styles.css

@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');

p {
    font-family: "Indie Flower";
    font-weight: bold;
}

h3{
    font-family: "Titan One";
    font-weight: normal;
}

h4{
    font-family: "Concert One";
    font-weight: bold;
}

header{
    /* text-align: justify; */
    font-family: 'Titan One';
    /* width: 30%;
    margin-left: 150px; */
    color: white;
    background-color: #ffca48;
    padding-bottom: .01px;
    padding-top: .01px;
    /* margin-bottom: -20px; */
    /* font-size: 16px; */
}

header h1:nth-of-type(1){
    animation-name: header-animate;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    position: relative;
    animation-delay: .3s;
    left: -4000px;
    word-wrap: break-word;
    /* opacity: 0; */
    margin-left: 3%;
}

header h1:nth-of-type(2){
    animation-name: description-animate;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    position: relative;
    animation-delay: .8s;
    right: -4000px;
    word-wrap: break-word;
    margin-right: 3%;
}

@keyframes header-animate{
    0%{
        left: -4000px;
        /* opacity: 0; */
    }
    100%{
        left: 0px;
        /* opacity: 1; */
    }
}

@keyframes description-animate{
    0%{
        right: -4000px;
    }
    100%{
        right: 0px;
    }
}

body {
    background-image: url('img/steady-hand-co-nI-mPs7X-js-unsplash.jpg');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.wrapper{
    width: 95%;
    margin: auto;
    /* max-width: auto; */
    background-color: white;
    /* margin-bottom: 20px; */

    /* ANIMATION */
    animation-name: appear;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /* animation-delay: 1s; */
    position: relative;
    bottom: -10px;
    opacity: 0;
    /* background-color: #F7F2E7; */
    /* background-color: #f4f1ec; */

}

@keyframes appear{
    0%{
        opacity: 0;
        bottom: -10px;
    }
    100%{
        opacity: 1;
        bottom: 0px;
    }
}

footer{
    background-color: rgb(192, 0, 0);
    /* width: 83%;
    margin: auto; */
    /* max-width: auto; */
    /* margin-top: 30px; */
    margin-top: -20px;
}

footer p{
    padding: 30px;
    text-align: center;
    font-family: 'Kaushan Script';
    color: white;
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;

    /* ANIMATION */
    animation-name: footer-up;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    position: relative;
    bottom: -4000px;
}

@keyframes footer-up{
    0%{
        bottom: -4000px;
    }
    100%{
        bottom: 0px;
    }
}

.first-word{
    color: rgb(0, 183, 183);
}

.descript{
    text-align: right;
    font-size: 16px;
    color: #674A40;
}

#side-content{
    background-color: #F7F2E7;
    word-wrap: break-word;
    text-align: center;
}

.blog-post{
    background-color: rgb(226, 225, 225);
}

#blog-pinned{
    background-color: rgb(230, 213, 213);
}

#blog-sale{
    background-color: rgb(197, 218, 197);
}

#blog-pinned i[title = "Pinned"], #IMPORTANT-BLOG i[title = "IMPORTANT"], #IMPORTANT-BLOG i[title = "Pinned"], #blog-sale i[title = "Sale!"]{
    margin-right: 1%;
}

#blog-pinned h4 i[title = "Pinned"], #IMPORTANT-BLOG h4 i[title = "IMPORTANT"], #IMPORTANT-BLOG h4 i[title = "Pinned"], #blog-sale i[title = "Sale!"]{
    margin-left: 0%;
}

#IMPORTANT-BLOG {
    background-color:rgb(236, 236, 225);
}

#blog-pinned-success{
    background-color: rgb(191, 241, 191);
}

.normal{
    font-family: "Baloo 2";
}

.blog-post{
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}

.blog-post *{
    margin-left: 6%;
}

.blog-post i, .blog-post span{
    margin-left: 0%;
}

.blog-post h3{
    margin-left: 3%;
}

.blog-post a {
    margin-left: 1%;
    color: black;
    text-decoration: none;
}

.blog-post a:hover{
    text-decoration: underline;
}

.title-text{
    /* text-align: center; */
    /* margin-left: 10px; */
    font-family: 'Titan One';
    font-weight: normal;
    background-color: rgb(255, 202, 72);
    border-radius: 8px;
    /* width: 98%; */
    padding: 10px;
    margin: auto;
    margin-bottom: -10px;
    color: rgb(180, 0, 0);
    border-bottom: 4px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 1px solid black;
    cursor: pointer;
    margin-top: 30px;
}

/* CUSTOM HOVER COLOURS {*/
    #tmhub:hover, #Shields-IO:hover, #TranslucentTB:hover{
        color: green;
    }

    #zai-tm:hover, #Windscribe:hover, #GitHub:hover, #TMNF-UF-FIX:hover, #RoundedTB:hover, #WeTransfer:hover{
        color: blue;
    }
    #Porkbun:hover{
        color: #F27777;
    }
    #NTRX-Homepage:hover, #Xodo-PDF:hover, #AdBlock:hover, #Return-YouTube-Dislike:hover, #Visual-Studio-Marketplace:hover, #msi-afterburner:hover, #profiles-ntrx:hover, #NFS-HEAT:hover{
        color: red;
    }
    #Gamebanana:hover, #ModernFlyouts:hover{
        color: rgb(176, 176, 1);
    }
    #VSCode:hover{
        color: rgb(0, 119, 255);
    }
    #Unsplash:hover, #Sniper-Elite-4-CA:hover, #HTML-Validator-Formatter:hover{
        color: gray;
    }
    #DoctoPDF:hover, #GlideX:hover, #GitHub-Pull-App:hover{
        color: #47A4A5;
    }
    #Cesv:hover, #NTRX-DFX-Hub:hover{
        color: rgb(221, 181, 7);
    }
    #WinDynamicDesktop:hover, #NTRX-CS-Hub:hover{
        color: rgb(179, 171, 127);
    }
    #Dark-Reader:hover{
        color: rgb(48, 110, 125);
    }
    #avernetronix-ntrx:hover{
        color: rgb(66, 66, 189);
    }
/* } */

.blog-post a:visited{
    color: black;
    text-decoration: none;
}

.blog-post p{
    margin-left: 0%;
    text-align: justify;
}

.blog-post img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: 70%;
    border-radius: 15px;
}

.blog-post iframe, .blog-post video{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 50vh;
    border-radius: 15px;
}

a[class = "username"]{
    text-decoration: none;
    color: black;
    font-family: "Concert One";
    font-weight: bold;
}

a[class = "username"]:hover{
    text-decoration: underline;
    font-family: "Concert One";
    font-weight: bold;
    color: black;
}

a[class = "username"]:visited{
    text-decoration: none;
    font-family: "Concert One";
    font-weight: bold;
    color: black;
}

header > h1 a{
    text-decoration: none;
    color: white;
}

header > h1 a:hover{
    text-decoration: none;
}

header > h1 a:visited{
    text-decoration: none;
    color: white;
}

.bottom-nav{
    text-align: center;
}

.bottom-nav a{
    color: black;

    /* transition-property: color, color;
    transition-duration: 1s; */

    animation-name: hover-animate-reverse;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

.bottom-nav a:hover{
    animation-name: hover-animate;
    animation-duration: .5s;
    /* animation-timing-function: ease-in; */
    /* animation-direction: alternate-reverse; */
    animation-fill-mode: forwards;
}

/* .bottom-nav:not(:hover){
    
} */

@keyframes hover-animate{
    0%{
        color: black;
        font-size: 18px;
    }
    50%{
        color: blue;
        /* font-size: 25px; */
    }
    100%{
        color: red;
        font-size: 22px;
    }
    /* 100%{
        color: black;
    } */
}

@keyframes hover-animate-reverse{
    0%{
        color: red;
        font-size: 22px;
    }
    50%{
        color: blue;
        /* font-size: 25px; */
    }
    100%{
        color: black;
        font-size: 18px;
    }
    /* 100%{
        color: black;
    } */
}

.last-commit{
    text-align: center;
}

#side-content p{
    margin-left: 10%;
    margin-right: 10%;
}

#main-content{
    margin-left: 2%;
    margin-right: 2%;
}

@media only screen and (min-width: 768px){
    .wrapper{
        width: 80%;
    }

    main {
        display: grid;
        /* grid-template-columns: 430px 150px; */
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr;
    }

    #main-content{
        /* background-color: white; */
        grid-column: 1;
    }

    #side-content{
        text-align: justify;
        grid-column: 2;
    }

    #side-content h3, #side-content h4{
        margin-left: 3%;
    }

    .blog-post img{
        transition-property: all;
        transition-duration: 1s;
    }
    
    .blog-post img:hover{
        transform: scale(1.2, 1.2);
    }
}