@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: -32%;
}
li.second {
    margin-left:-24%;
    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;
}
div.post {
    margin-top: 4%;
    margin-left: 0%;
    font-family: "Titillium Web";
}
div.post h1 {
    color: #FFD700;
    text-align: center;
}
h5 {
     text-align: center;
}
div.post-body h5 {
    margin-top: 5%;
    font-weight: 600;
     text-align: left;
}
div.code {
    background-color: gainsboro;
    width: 650px;
    border-radius: 8px;
    border: 1px solid #FFD700;
    display: block;
    margin: 5% auto;
     padding: 1% 5%;
   
}
code
pre {
    border-radius: 5%;
}
.copy {
    display: block;
    margin-left: 41%;
    margin-top: 10%;
    font-family: "Titillium Web";
}
@media only screen and (max-width: 415px) {
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;
}
    div.code {
    width: 375px;
}
.copy {
    margin-left: 23%;
}
}
@media only screen and (max-width: 375px) {
        li.first{
    margin: 9% 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.code {
    width: 350px;
}
    .copy {
    margin-left: 17%;
}
}
@media only screen and (max-width: 320px) {
    div.code {
    width: 290px;
}
}