*,
*::before,
*::after {
  box-sizing: border-box;
}

body,h1,h2,h3,h4,h5 {
    font-family: "Lato", sans-serif
}

body {
    font-size:20px;
/*     background-color: #fffff8; */
    background-color: #ffffff;
}

@media (max-width: 600px) {
    body {
        font-size:14px;
    }
}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}

.w3-main {
    margin-left: 0px;
    margin-right: 0px
}

.w3-container a:link{
    color: #0b7dda; 
    text-decoration: underline dotted; 
    text-underline-offset: 3px;   
}

.w3-container a:visited{
    color: purple; 
    text-decoration: underline dotted; 
    text-underline-offset: 3px;   
}

.w3-container a:hover{
    color: #064579; 
    text-decoration: underline dotted; 
    text-underline-offset: 3px;   
}

.w3-container a:active{
    color: red; 
    text-decoration: underline dotted; 
    text-underline-offset: 3px;   
}

.w3-xxlarge h1{
    text-align: center; 
    text-underline-offset: 6px;
    font-weight: bold;
    
}

#About {
    border: 2px black;
    border-style: none none;
    margin-left: 300px; 
    margin-right: 300px;
}

@media (max-width: 600px) {
    #About {
    border: 2px black;
    border-style: none none;
    margin-left: 5px; 
    margin-right: 5px;
    }
}

#MJO {   
    background-color: #cfe8fc;
    border: 12px #0961aa;
    border-style: none none none solid;
    margin-bottom: 25px;
    outline-style: outset;
    outline-color: #0961aa; 
    outline-width: 4px;
}

#pfp {
    height:400px;
}

@media (max-width: 600px) {
    #pfp {
        display: none;
    }
}

.grid-container {
    display: grid;
    row-gap: 25px;
    column-gap: 25px;
    grid-template-columns: auto auto;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 150px; 
    margin-right: 150px;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: auto;
    margin: 20px 20px;
  }
}

.index-grid-item {
/*   background-color: #cfe8fc; */
  background-color: #bed4ec;
  border-style: outset;
  border: 2px solid black;
  border-radius: 8px;
  padding: 20px;
}

@media (max-width: 600px) {
  #Figures {
    background-image: none;
  }
}

p {
    text-align: justify;
}

#mjo_gif {
    width: 100%;
    margin: auto
}