* {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    color: rgb(224, 249, 249);

}
a{
    text-decoration: none;
}

body {
    background: linear-gradient(to bottom left, rgb(42, 38, 38), rgb(23, 23, 22), rgba(8, 8, 8, 0.945));
    background-color: #004f8f;
    overflow-x: hidden;
    position: relative;
}

p {
    font-size: 1.5em;
    padding: 3%;
}

p,
h3,
h1 {
    animation: color-changing2 both 10s ease-in-out infinite;
}

p.abs {
    padding: 6%;
}

.head {
    position: sticky;
    z-index: 1;
    top: 0;
    width: min-content;
    border-radius: 2em;
    overflow: hidden;
    /*animation: goofy-ahh 10s infinite alternate cubic-bezier(.68,-0.55,.27,1.55);*/
}

#logo {
    height: 13vh;
    width: 17vw;
    max-width: 700px;
    min-width: 250px;

}

.games,
.cus,
.ous {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tgs,
.mu,
.gca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* background: radial-gradient(#021635 30%, #004f8f 70%); */
    animation: br-changing 10s ease-in-out infinite alternate;
    border: 1px black solid;
    transition: .8s;
    z-index: 0;
    margin: 1em 0;
    padding: 1em;
    width: fit-content;
    height: fit-content;
    /* background: #015958; */
    overflow: hidden;
    /* position: relative; */
    border-radius: 2em;
}

.tgs img,
.mu img,
.gca img {
    width: 100%;
    max-width: 900px;
    border-radius: 1em;
}

i.fa.fa-instagram:hover,i.fa-youtube:hover {
    color: rgb(175, 34, 58);
    transition: .5s ease-in-out;
    background: #ffffff;
}
.tgs:hover,
.mu:hover,
.gca:hover {
    transform: scale(1.01) translateX(-1em) translateY(-1em);
    transition: .8s;
}

footer {
    display: flex;
    text-transform: capitalize;
    justify-content: space-around;
    align-items: first baseline;
    font-size: 1.5em;
    animation: goofy-ahh 3s ease-in-out infinite alternate;
}

.ous a i,.cus a i{
    margin: .5em;
    color: white;
    border-radius: 5em;
    transition: .5s ease-in-out;
    padding: .2em;
    font-size: 1.2em;
    font-weight: 900;
}
i.fa-envelope:hover{
    background-color: rgb(175, 34, 58);
    color: rgb(252, 255, 240);
}
i.fa-youtube,i.fa-instagram,i.fa-envelope{
    transition: .5s ease-in-out;
}


@keyframes color-changing2 {
    0% {
       background: burlywood;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* box-shadow: -20px 0px 15px rgb(45, 118, 255); */
    }

    33% {
        background: #f5babaf1;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* box-shadow: 20px 0px 15px rgb(45, 118, 255); */
    }

    66% {
       background: antiquewhite;
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* box-shadow: 0px 10px 15px rgb(45, 118, 255); */
    }

    100% {
       background: burlywood;
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* box-shadow: 0px -10px 15px rgb(45, 118, 255); */
    }
}

@keyframes br-changing {
    0% {
        border: 2px rgb(255, 66, 66) solid;
        box-shadow: 0 0 .75em rgb(255, 66, 66);
    }

    10% {
        border: 2px rgb(255, 133, 12) solid;
        box-shadow: 0 0 .75em rgb(255, 133, 12);
    }

    20% {
        border: 2px rgb(255, 196, 19) solid;
        box-shadow: 0 0 .75em rgb(255, 196, 19);
    }

    30% {
        border: 2px rgb(12, 255, 41) solid;
        box-shadow: 0 0 .75em rgb(12, 255, 41);
    }

    40% {
        border: 2px rgb(12, 255, 113) solid;
        box-shadow: 0 0 .75em rgb(12, 255, 113);
    }

    50% {
        border: 2px rgb(56, 255, 202) solid;
        box-shadow: 0 0 .75em rgb(56, 255, 202);
    }

    60% {
        border: 2px rgb(53, 198, 255) solid;
        box-shadow: 0 0 .75em rgb(53, 198, 255);
    }

    70% {
        border: 2px rgb(52, 99, 255) solid;
        box-shadow: 0 0 .75em rgb(52, 99, 255);
    }

    80% {
        border: 2px rgb(126, 59, 252) solid;
        box-shadow: 0 0 .75em rgb(126, 59, 252);
    }

    90% {
        border: 2px rgb(255, 62, 178) solid;
        box-shadow: 0 0 .75em rgb(255, 62, 178);
    }

    100% {
        border: 2px rgb(255, 62, 62) solid;
        box-shadow: 0 0 .75em rgb(255, 62, 62);
    }
}

@keyframes goofy-ahh {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(.8em);
    }
}