:root {
    --tp-color: rgb(0, 255, 255);
    --easy-color: rgb(0, 172, 0);
    --medium-color: rgb(255, 255, 41);
    --hard-color: rgb(255, 115, 0);
    --impossible-color: rgb(255, 0, 0);
}


/* CLASSES & IDs */
.animated-title {
    opacity: 0;
    animation: fadeIn 1s ease 1;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
}

.menu-btn {
    display: block;
    width: 100%;
    padding: 15px var(--btn-side-pad) !important;
    margin: 15px auto;
    border-radius: 100px;

    font-size: calc(var(--master-font-size) * var(--btn-factor));
    transition: font-size 250ms ease;
}

.two-player {
    border: 1px solid var(--tp-color);
    color: var(--tp-color);
}

.easy {
    border: 1px solid var(--easy-color);
    color: var(--easy-color);
}

.medium {
    border: 1px solid var(--medium-color);
    color: var(--medium-color);
}

.hard {
    border: 1px solid var(--hard-color);
    color: var(--hard-color);
}

.impossible {    
    border: 1px solid var(--impossible-color);
    color: var(--impossible-color);
}

.menu-list {
    opacity: 0;
    animation: fadeIn 1s ease 1;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
}

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