@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600&display=swap');
body {
    width: 100%;
    height: 100%;
     margin: 0;
    padding: 0;
}
img.navbar-brand {
    transition: 1.5s;
    margin: 2%;
}
img.navbar-brand:hover {
    transition: 1.5s;
    transform: rotate(360deg);
}
ul.navbar-nav {
    margin-right: 2% !important;
    margin-top: -4%;
}
.nav-link {
    padding: .05rem !important;
}
a.nav-link {
    font-size: 1.5rem;
    font-family: "Titillium Web";
    font-weight: 600;
    color: black !important;
}
a.second-linka:hover {
    border-bottom: 3px solid #FFD700;
}
a.linka:hover {
    border-bottom: 3px solid #FFD700;
}
li.first {
     position: absolute;
    margin-left: -45%;
}
li.second {
    margin-left:-37%;
    position: absolute;
}
li.third {
    margin-left: -11%;
    position: absolute;
}
li.fifth {
    margin-left: -25%;
    position: absolute;
}
li.fourth {
    margin-top: -1%;
    margin-left: -4%;
    position: absolute;
}
li.fourth p {
    cursor: pointer;
    font-family: "Titillium Web";
     font-weight: 600;
}
li.fourth p:hover {
    color: #FFD700;
}

div.post {
    padding: 0 8% 0 8% ;
} 
div.post {
    margin-top: 4%;
    margin-left: 0%;
    font-family: "Titillium Web";
}
h3 {
    color: #FFD700;
    text-align: center;
    margin-top: 35px !important;
    margin-bottom: 25px !important;
}
h5 {
     text-align: center;
     font-weight: 600 !important;
}

p.date-post {
    color: #FFD700;
}
a.page {
    font-size: 1.2rem;
}
.copy {
    display: block;
    margin-left: 41%;
    margin-top: 10%;
    font-family: "Titillium Web";
}
@media only screen and (max-width: 425px) {
li.first{
    display: block;
     text-align: center;
    margin: 5% 0 0 7%;
     position: static;
}
li.second {
     display: block;
     text-align: center;
   margin: 5% 0 0 7%;
    position: static;
}
li.third {
     display: block;
    text-align: center;
    margin: 5% 0 0 7%;
     position: static;
 }
li.fourth {
    display: block;
    margin: 5% 0 0 7%;
    text-align: center;
    position: static;
    font-size: 1.5rem;
}
li.fifth {
    display: block;
    margin: 5% 0 0 7%;
    text-align: center;
    position: static;
    font-size: 1.5rem;
}
div#header {
    margin-left: 15%;
}
img.imgs {
      margin-left: 11%;
      margin-top: 10%;
}
div#header2 {
    margin-left: 13%;
     margin-top: 10%;
}
h3 {
    margin-top: 7%;
}
h5 {
    display: inline-block;
    width: 310px;
} 
a.post-title {
    margin-top: 10%;
}
div#header4 {
    margin-left: 0%;
}
h3.contact-header {
     margin-top: 7%;
    margin-left: 3%;
}
    a.btn.btn-warning {
        margin-left: 0px !important;
    }
div.icons {
     margin-left: 15%;
}
.copy {
    display: block;
    margin-left: 25%;
    font-family: "Titillium Web";
}
}
@media only screen and (max-width: 380px) {
    li.first{
    margin: 5% 0 0 6%;
}
li.second {
   margin: 5% 0 0 5%;
}
li.third {
    margin: 5% 0 0 5%;
 }
li.fourth {
    display: block;
    margin: 5% 0 0 5%;
    text-align: center;
    position: static;
}

div#header {
    margin-left: 11%;
}
img.imgs {
      margin-left: 6%;
      margin-top: 10%;
}
div#header2 {
    margin-left: 10%;
     margin-top: 10%;
}
h3.blog-header {
    margin-top: 7%;
}
h5 {
    display: inline-block;
    width: 290px;
} 
a.post-title {
    margin-top: 10%;
}
div#header4 {
    margin-left: -2%;
}
h3.contact-header {
     margin-top: 10%;
    margin-right: -7% !important;
}
a.btn.btn-warning {
        margin-left: 10px !important;
    }
div.icons {
     margin-left: 10%;
    margin-right: -10%;
    padding: 1%;
}
.copy {
    display: block;
    margin-left: 22%;
    font-family: "Titillium Web";
}
}
@media only screen and (max-width: 320px) {
    li.first{
    margin: 10% 0 0 6%;
}
li.second {
   margin: 5% 0 0 5%;
}
li.third {
    margin: 5% 0 0 5%;
 }
li.fourth {
    display: block;
    margin: 5% 0 0 5%;
    text-align: center;
    position: static;
}

div#header {
    margin-left: 7%;
}
img.imgs {
      margin-left: 2%;
      margin-top: 10%;
}
div#header2 {
    margin-left: 5%;
     margin-top: 10%;
    width: 300px;
}
h3.blog-header {
    margin-top: 7%;
    margin-left: 9%;
}
h5 {
    display: inline-block;
    width: 250px;
} 
a.post-title {
    margin-top: 10%;
}
div#header4 {
    margin-left: -9%;
}
h3.contact-header {
     margin-top: 10%;
    margin-right: -19% !important;
}
a.btn.btn-warning {
        margin-left: 30px !important;
    }
div.icons {
     margin-left: 6%;
    margin-right: -20%;
    padding: 1%;
}
.copy {
    display: block;
    margin-left: 17%;
    font-family: "Titillium Web";
}
}