:root {
    --main-text-color: rgb(255, 255, 101);
    --font-family: Verdana, Geneva, Tahoma, sans-serif;
    --shape-background: rgba(0, 0, 0, 0.9);
}

* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    background-color: black;
    overflow-x: hidden;
    max-width: 100%;
}

/* -------------------------------------------------------------- */

.smallBtn {
    background-color: var(--main-text-color); 
    font-size: 1rem;
    font-family: var(--font-family);
    padding: 1vh 1vw;
    border: 1px solid transparent;
}

.smallBtn:hover {
    background-color: black;
    border: 1px solid var(--main-text-color);
    color: var(--main-text-color);
    cursor: pointer;
}

/* ---------------animations---------------------- */

/* Fade in animations */
.fade-in-animate {
    opacity: 0;
    transition: opacity 1s ease-in;
    transition-delay: 1s;
}

.fade-in-animate.appear {
    opacity: 1;
}

/* Slide in animations */
.slide-in-right-animate {
    opacity: 0;
    transform: translateX(50%);
}

.slide-in-left-animate {
    opacity: 0;
    transform: translateX(-50%);
}

.slide-in-right-animate, .slide-in-left-animate {
    transition: transform 1s ease-in, opacity 1s ease-in;
}

.slide-in-right-animate.appear, .slide-in-left-animate.appear {
    opacity: 1;
    transform: translateX(0);
}