:root{
    --background-dark: rgb(51, 51, 51);
}

@font-face {
    font-family: Lexend;
    src: url(./Lexend/Lexend-VariableFont_wght.ttf);
}

*{
    font-family: Lexend;
    color: white;
}

body{
    background-color: var(--background-dark);
    /* background-image: url(../src/bg1.gif); */
    display: flex;
    margin: 0;
}

.body{
    width: 95rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
}

.body::-webkit-scrollbar{
    width: 0.5rem;
}

.bodyStart{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.shaky{
    animation: shaky 0.5s;
}

.vibe{
    animation: slideDown 1s ease-in-out, vibe 2s infinite ease-in-out;
}

/*Animations*/

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {        
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shaky {
    0% {
        transform: rotateZ(0deg);
    }
    10% {
        transform: rotateZ(-5deg);
    }
    70% {
        transform: rotateZ(5deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes slideDown{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-10px);
    }
}

@keyframes vibe {
    0% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
    }
}