style.css

*{
      filter: saturate(0%);
}

body{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    background: #0f0f0f;
    color: #ebe9e2;

    animation: ContentFlicker 1s infinite alternate;
}

@keyframes ContentFlicker{
    0% {
        filter: opacity(100%);
    }
    25% {
        filter: opacity(75%);
    }
    30% {
        filter: opacity(95%);
    }
    50% {filter: opacity(80%);
    }
    75% {
        filter: opacity(100%);
    }
    90% {
        filter: opacity(85%);
    }
    95% {
        filter: opacity(75%);
    }
    100% {
        filter: opacity(100%);
    }
}

h1{
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    text-align: center;
}

img{
    width: 100%;
    height: auto;
    filter: sepia(100%);
}

/* HEADER BAR  */

header{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
}

.page-title{
color: rgba(255, 0, 255, 0.65);
text-align: center;
animation-name: titleGlitch;
animation-duration: .15s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes titleGlitch{
    0% {
        color: red;
    }
    50% {
        color: blue;
    }
    100% {
        color: yellow;
    }
} 

.top-bar ul{
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.top-bar li{
    margin: 0.15em;
    padding: 0.25em;
    transition: transform 1s, text-shadow 1.5s, border 1.25s, box-shadow 1s;
}

.top-bar li:hover{
    transform: scale(1.03);
    /* border: 0.01em solid cyan; */
    /* border-radius: 0.5em; */
    box-shadow: 0 0.05em 0.3em #070707, inset 0 0.05em 0.01em yellow;
}

.top-bar li a{
    color: #ebe9e2;
    text-align: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    /* text-shadow: 0.05em 0.05em .35em yellow; */
}


@media (min-width: 992px) {
    header{
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-auto-rows: minmax(10em, auto);
        gap: 2rem;
        align-items: start;
        justify-content: space-between;
    }

    .page-title{
        color: rgba(255, 0, 255, 0.65);
        /* text-shadow: 0.1rem -0.1rem 0.01rem yellow; */
        animation-name: titleGlitch_l;
        animation-duration: .15s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        height: 10rem;
        width: 10rem;
        /* background-image: url("imgs/img_6.jpg");
        background-size: 200px; */
    }    

    @keyframes titleGlitch_l{
        0% {
            color: red;
            /* text-shadow: 0.1rem -0.1rem 0.01rem cyan; */
            transform: translate(10%, 5%);
        }
        50% {
            color: blue;
            /* text-shadow: 0.1rem -0.1rem 0.01rem magenta; */
            transform: translate(-25%, -50%);
        }
        100% {
            color: yellow;
            /* text-shadow: 0.1rem -0.1rem 0.01rem yellow; */
            transform: translate(25%, -15%);
        }
    } 

    .top-bar ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-basis: 35%;
        /* border: 0.1rem solid blue; */
        align-items: flex-end;
        justify-content: flex-end;
        padding: auto;
    }
}

/* MAIN */

main{
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
    justify-content: start;
    align-content: start;
}

section{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    justify-content: start;
    align-content: start;
    gap: 1em;
}

.article-title{
    align-self: start;
    text-align: left;
    border-bottom: 0.02em solid yellow;
}

.geo{
    align-self: center;
    height: .15rem;
    animation-name: textBG;
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: transform 0.05s;
}

@keyframes textBG {
    0% {
        background-color: red;
    }
    50% {
        background-color: yellow;
    }
    100% {
        background-color: blue;
    }
}

.geo:hover{
    transform: translate(-10%, -100%)
}

section img{
    grid-column: 1/2;
    align-self: start;
    justify-self: start;
    border: 0.1em solid red;
    /* border-radius: 0.5rem; */
    transition: transform 0.25s;
}

section img:hover{
    transform: translate(3%, -5%);
}

.article-title{
    align-self: start;
    text-align: left;
    border-bottom: 0.02em solid yellow;
    animation: articleT .3s infinite alternate ;
}

@keyframes articleT {
    0% {
        color: red;
    }
    95% {
        color: yellow;
    }
    100% {
        color: blue;
    }
}

.tagline h2{
    text-align: center;
    text-transform: uppercase;
    animation: taglineGlitch 0.5s infinite alternate;
}

@keyframes taglineGlitch{
    0% {
        transform: translate(0%);
    }
    20% {
        transform: translate(0%, -3%);
    }
    95% {
        transform: translate(0%, -5%);
    }
    100% {
        transform: translate(10%, 5%);
    }
}

.tagline h2 span{
    display: inline-block;
    text-align: center;
    padding-top: .3em;
    color: #0f0f0f;
    background-color: #ebe9e2;
    animation: ghaspGlitch 0.1s infinite alternate;
}

@keyframes ghaspGlitch{
    0% {
        transform: translate(0%);
    }
    1% {
        transform: translate(0%, 3%);
    }
    75% {
        transform: translate(-10%, 5%);
    }
    100% {
        transform: translate(10%, -5%);
    }
}

@media (min-width: 992px) {
    main{
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.5em;
        justify-content: start;
        align-content: start;
    }

    .tagline{
        justify-self: center;
        border-bottom: 0.02em solid yellow;
        grid-column: 1/3;
        margin-bottom: 10%;
    }

    section{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: min-content;
        justify-content: start;
        align-content: start;
        gap: 1.5em;
        /* padding: 1em; */
    }

    .geo{
        align-self: center;
        grid-row: 3;
        height: .5rem;
        animation-name: textBG_l;
        animation-duration: 0.15s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transition: transform 0.05s;
    }

    @keyframes textBG_l {
        0% {
            background-color: red;
            transform: translate(-10%, -100%)
        }
        50% {
            background-color: yellow;
            transform: translate(50%, -750%)
        }
        100% {
            background-color: blue;
            transform: translate(-5%, 100%)
        }
    }

    .geo:hover{
        transform: translate(-10%, -100%);
    }

    .text{
        align-self: start;
        text-align: left;
        margin: 0;
    }

    /* section:nth-of-type(3n+3) .text{
        grid-row: 2;
        grid-column: 1;
        text-align: right;
        background-color: gray;
    }

    section:nth-of-type(3n+3) img{
         grid-row: 2;
        grid-column: 2;
    } */
}