@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600&display=swap');
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.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;
}
li.fifth {
    margin-left: -25%;
    position: absolute;
}
div.post-square {
   width: 76%;
    display: block;
    margin: 0 auto;
}
div#header {
    margin-left: 35%;
    width: 270px;
    font-family: "Titillium Web";
       margin-top: 10%;
}
 img.imgs {
      margin-left: 15%;
      margin-top: 5%;
    height: 300px;
    width: 300px;
    border-radius: 100%;
}

div#header h1 {
    text-align: center;
     display: inline;
}
div#head-cent {
    text-align: center;
}
h1.header, h1.header2   {
    font-weight: 600;
}
h1.name {
    color: #FFD700;
    font-weight: 600;
     margin: 0 5px;
}
h3.blog-header {
    font-family: "Titillium Web";
     color: #FFD700;
    text-align: center;
    margin: 2%;
     font-size: 2.2em;
}

a.btn-warning {
    display: block;
    margin: 0 auto;
}

a.post-title, h5 {
    font-weight: 600;
    font-family: "Titillium Web";
}
a.post-title {
    margin-top: 5%;
    font-size: 1.5rem;
    color: black;
    display: block;
}
a.post-title:hover {
    font-size: 1.5rem;
    color: black;
}
h5.date-post {
    font-size: 1.1rem;
    color: #FFD700;
}
h5 {
    display: inline-block;
    width: 870px;
} 
a.btn-warning {
    margin-top: 4%;
}
h3.about-header {
    font-family: "Titillium Web";
     color: #FFD700;
    font-size: 2.2em;
    margin-bottom: 2%;
}
p.about-body {
    font-size: 1.2rem;
    font-family: "Titillium Web";
}
div#header2 {
    display: block;
    width: 80%;
    margin-left: 12%;
    margin-top: 3%;
}
div#header3 {
    display: block;
    width: 80%;
    margin-left: 10%;
    margin-top: 3%;
    padding: 2%;
}
h3.contact-header {
     font-family: "Titillium Web";
    color: #FFD700;
    text-align: right;
    font-size: 2.2em;
}
div.icons {
     margin-left: 27%;
}
div.icons i {
    padding: 4%;
    color: black !important;
}
div.icons i:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
     color: #FFD700 !important;
}
.copy {
    display: block;
    margin-left: 41%;
    font-family: "Titillium Web";
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}
@media only screen and (max-width: 425px) {
li.first{
    display: block;
     text-align: center;
    margin: 5% 0 0 8%;
     position: static;
}
li.second {
     display: block;
     text-align: center;
   margin: 5% 0 0 8%;
    position: static;
}
li.third {
     display: block;
    text-align: center;
    margin: 5% 0 0 8%;
     position: static;
 }
li.fourth {
    display: block;
    margin: 5% 0 0 8%;
    text-align: center;
    position: static;
     font-size: 1.5rem;
}
li.fifth {
    display: block;
    margin: 5% 0 0 8%;
    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.blog-header {
    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: 2%;
}
.copy {
    display: block;
    margin-left: 25%;
    font-family: "Titillium Web";
}
}
@media only screen and (max-width: 375px) {
    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: -5%;
    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: 290px;
} 
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: -5px !important;
    }
div.icons {
     margin-left: -10%;
    margin-right: -20%;
    padding: 1%;
}
.copy {
    display: block;
    margin-left: 17%;
    font-family: "Titillium Web";
}
}