.cool {
    font-family: CreatoDisplay;
    color: white;
    text-align: center;
    animation: 60s infinite;
    animation-name: bganim;
}

@keyframes bganim{
    0%{background-color: rgb(31, 83, 11);}
    30%{background-color: rgb(11, 80, 83);}
    60%{background-color: rgb(11, 83, 49);}
    100%{background-color: rgb(31, 83, 11);}
}

@font-face {
    font-family: CreatoDisplay;
    src: url(/direeectory/fonts/CreatoDisplay-Regular.otf);
}

@font-face {
    font-family: MAROLA;
    src: url(/direeectory/fonts/MAROLA__.TTF);
}

h1 {
    font-size: 64px;
}

.woah {
    font-family: MAROLA;
    animation: 2s infinite cubic-bezier(0.1, 0, 0.63, 1);
    animation-name: magic;

    max-width: 430px;
    margin:auto;
    padding: 50px;
}

@keyframes magic{
    0% {
        transform: rotateZ(5deg);
        color: yellow;
    }

    25% {
        transform: rotateZ(-2.5deg) scaleX(1.16);
        color: rgb(38, 255, 0);
    }

    50% {
        transform: rotateZ(-10.7deg) scaleX(1.05);
        color: rgb(0, 208, 255);
    }

    75% {
        transform: rotateZ(-7.65deg) scaleX(1.3);
        color: rgb(255, 0, 0);
    }

    100% {
        transform: rotateZ(5deg);
        color: yellow;
    }
}

.elbutton {
    text-decoration: none;
    color: white;
    font-size: 28px ;
    border: 5px;
    border-style: solid;
    margin: auto;
    padding: 6px;
    background-color: rgba(48, 150, 25, 0.454);
    transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.elbutton:hover {
    padding: 10px;
    border-radius: 12px;
    font-size: 48px;
}

hr {
    animation: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-name: introHR;
    width: auto;
}

@keyframes introHR {
    0% {transform: scaleX(0);}
    25% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
}

.box {
    border: 6px;
    border-style: dashed;
    margin-left: 15%;
    margin-right: 15%;
    background-color: rgba(0, 0, 0, 0.421);
    font-size: 24px;
    transition: 0.25s;

    animation: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-name: introes;
}

.box:hover {
    transform: scale(1.002);
}

@keyframes introes {
    0% {transform: scaleX(0);}
    45% {transform: scaleX(0);}
    50% {transform: scaleX(0.5);}
    100% {transform: scaleX(1);}
}