html {
  font-size:100%;
}
body {
    background-color:#f2f2f8;
    color: #001514;
    font-family: 'Segoe UI', sans-serif;
}
#title{
    margin-top:200px;
    color: #A3333D;
    text-align: center;
}
#title h4{
    margin-top:auto;
    font-family: 'marydale';
    font-size:4.20em;
}
.caption {
    font-size:1.2rem;
    font-style:italic;
    font-family: 'Segoe UI', sans-serif;
    
}
.main {
    display:flex;
    flex-direction: row;
    font-family: 'Lato', sans-serif;
    color:#001514;
    font-size:1.5em;
    line-height: 2.0em;
    height:100%;
}
h3 {
    margin-top:-15px;
    font-size:3.5rem;
    font-family:'Raleway', sans-serif;
    font-style:italic;
    color:#A3333D;
    margin-left:100px;
}

h4 {
  text-align:center;
  font-size:2.8rem;
  font-family:'Raleway';
}

/*navbar*/
.navbar {
    z-index: 10;
    font-family:'Raleway';
    position:fixed;
    display: flex;
    margin-top: -200px;
    background-color:#9F827F;
    width:100%;
    justify-content: space-between;
    box-shadow: 0px 4px 8px #A3333D;
}

.navbar div {
    font-family:'Raleway';
    color:#f2f2f8;
    text-align: center;
    font-size: 1.6rem;
    padding-top:45px;
    font-family:'Segoe UI', sans-serif;
}
.navbar div:nth-child(1) {
    width:20%;
    padding-top:30px;
    padding-left: 10px;
} 

.navbar > div:nth-child(10){
                display:none;
            }
#bodycopy a {
    font-size: 1.9rem;
    color:#001514;
    padding:10px;
    background-color:#b497d6; 
}
#bodycopy a:hover {
    border: solid 3px #690643;
    text-decoration: none;
}

/*link styling*/

a:link {
  color:#f2f2f8;
  background-color: transparent;
  text-decoration: none;
font-family:'Raleway';
}

.current a {
  color:#690643;
}
a:visited {
    color:none;
}
a:hover {
  color:#b497d6;
  background-color: transparent;
  text-decoration:none;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

/*author info and overlay effect*/

.author {
    position:relative;
    display:block;
    font-size: 24pt;
    background-color:#001514;
    width:300px;
    max-height:325px;
    margin-left:20px;
    padding:10px;
    text-align:center;
    color:#f2f2f8;
    font-size:1.4rem;
    line-height:140%;
}
.author img{
    padding:8px;
}
.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:#b497d6;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.author:hover .overlay {
    bottom:0;
    height:100%;
}
.textoverlay {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#bodycopy {
    display:inline-block;
    width:600px;
    margin-left:150px;
}

/*articles*/

.articles {
    display:flex;
    flex-direction:row;
    justify-content: space-around;
}
.articles > div {
    padding:5px;
    text-align:center;
}

/*footer*/

.footer {
    background-color:#9F827F;
    min-height:600px;
    font-size:1.8rem;
    line-height: 2.2rem;
    color:#f2f2f8;
    padding-left: 15px;
}
.footer a{
    color:#f2f2f8;
}
        @media all and (max-width: 768px) {

           #title{
                margin-top:350px;
            }
            #title img {
                width:90%;
            }

            .navbar {
                margin-top: -350px;
                flex-direction:column;
                flex-wrap:nowrap;
                align-items:center;
                justify-content:center;
                width:100%;
                line-height:1rem;
            }

            .navbar > div {
                padding:15px;
                width:auto;
                text-align: center;
            }
            .navbar > div:nth-child(1){
               width:200px;
            }

            .navbar > div:nth-child(2){
                display:block;
            }
            .navbar > div:nth-child(3){
                            display:none;
                        }
            .navbar > div:nth-child(4){
                            display:none;
                        }
            .navbar > div:nth-child(5){
                            display:none;
                        }
            .navbar > div:nth-child(6){
                            display:none;
                        }
            .navbar > div:nth-child(7){
                            display:none;
                        }
            .navbar > div:nth-child(8){
                            display:none;
                        }
            .navbar > div:nth-child(10){
                display:block;
            }
            .main {
                flex-direction:column;
                flex-wrap:nowrap;
            }
            
            .author{
                margin-left: 250px;
                height:325px;
            }
            #bodycopy{
                margin-left:0px;
            }
           
             .articles {
                        display:flex;
                        flex-direction:column;
                                }
            .articles > div {
                        width:100%;
                                }


                            @media all and (max-width: 600px) {
                                h3 {
                                    margin-left:10px;
                                }
                                .navbar {
                                    align-items:center;
                                    flex-wrap:nowrap;
                                    flex-direction: column;
                                    justify-content: center;
                                    }

                                .author{
                                    margin-left: 50px;
                                }
                                
                                #bodycopy{
                                    width:400px;
                                }
        
                               
                            }