style.css

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

:root {
    --background-color: rgba(050, 050, 050, 1);
    --white:            rgba(250, 250, 250, 1);
    --black:            rgba(000, 000, 000, 1);
    --grey:             rgba(085, 085, 085, 1);

    --very-easy:        rgb(006, 185, 021);
    --easy:             rgb(004, 189, 189);
    --normal:           rgb(037, 047, 179);
    --hard:             rgb(124, 116, 0);
    --very-hard:        rgb(187, 090, 000);
    --extreme:          rgb(199, 033, 033);
    --insane:           rgb(000, 000, 000);
    --balanced:         rgb(121, 035, 233);
    --random:           rgb(134, 006, 077);
    --all-random:      rgba(000, 000, 000, 0);
}

body {
    background-color: var(--background-color);
    color: var(--black);
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100vw;
    height: 100lvh;
    margin: 0;
    padding: 0;
}

.card {
    display: grid;
    background-color: var(--white);
    border: var(--black) 1px solid;
    border-radius: 1rem;
    box-shadow: .25rem .25rem .5rem var(--black);
    min-width: 500px;
    grid-template-columns: 1fr;
    align-self: center;
    justify-self: center;
    align-items: center;
    justify-items: center;
    padding: 1rem .5rem;
    row-gap: 5px;
}

.header {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: MarioFont, serif;
    user-select: none;
    margin-bottom: 1rem;
}

.difficulty {
    width: calc(100% - 66px);
    /* height: 135px; */
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    column-gap: 1rem;
    align-items: center;
    justify-items: center;

    & .difficultyText {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
    }

    & .difficultyNickname {
        margin-top: 1rem;
        font-size: .75rem;
    }

    & .difficultyLevels {
        font-size: .75rem;
        width: 100%;
        text-align: center;
        justify-self: right;
    }
}

.options {
    display: grid;
    width: 100%;
    justify-items: center;
    align-items: center;
}

.optionsButton {
    font-size: 1rem;
    font-family: MarioFont, serif;
    user-select: none;
    border: var(--black) .2rem solid;
    border-radius: 1rem;
    padding: 1rem 2rem;
    background-color: var(--normal);
    color: var(--white);
    cursor: pointer;

    &:hover {
        opacity: .9;
    }
}

.itemVersion {
    justify-self: right;
    height: 0;
}
.itemVersioning {
    font-size: 1rem;
    outline: none;
    border: none
}

.allOptions {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
}

.allOptionsContainer {
    display: inline-block;
    position: absolute;
}

.allOptionsContent {
    display: none;
    position: absolute;

    background-color: var(--white);

    top: 0;
    left: -268px;
    row-gap: 1rem !important;
    z-index: 3;
    padding: 15px;
    width: 500px;

    border: var(--black) .2rem solid;
    border-radius: 1rem;

    justify-items: center;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;

    box-shadow: .25rem .25rem .5rem var(--black);
}

.optionContainer {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 30px;
}

.optionLabel {
    font-size: .9em;
    font-family: MarioFont, serif;
    text-align: right;
    padding-right: 5px;
    user-select: none;
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;

    &input {
        opacity: 0;
        width: 0;
        height: 0;
    }
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--grey);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 17px;

    &:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: var(--white);
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }
}

input:checked + .slider {
    background-color: var(--normal);

    &:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--normal);
}

.seed {
    width: calc(100% - 10px);
    border: var(--black) .2rem solid;
    border-radius: .5rem;
    padding: 5px;
    margin: 5px;
}

#seedInput {
    width: calc(100% - 37px);
    border: 0;
    padding-block: 0;
    padding-inline: 0;
    font-size: 1rem;
    font-family: MarioFont, serif;
    outline: none;
}

.clearSeed {
    font-size: .75rem;
    font-family: MarioFont, serif;
    user-select: none;
    border: var(--black) .15rem solid;
    border-radius: .3rem;
    padding: 7px 7px 7px 9px;
    background-color: var(--extreme);
    color: var(--white);
    cursor: pointer;
    text-align: center;

    &:hover {
        border-color: var(--extreme);
        background-color: var(--white);
        color: var(--black);
        cursor: pointer;
    }
}

.generatedNotifier {
    font-size: 1rem;
    font-family: MarioFont, serif;
    color: var(--very-easy);
    text-align: center;
}

.generate {
    width: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    /*column-span: 1rem;*/
}

.generateButton {
    font-size: 1rem;
    font-family: MarioFont, serif;
    padding: 1rem 2rem;
    background-color: var(--very-easy);
    color: var(--white);
    border: var(--black) .2rem solid;
    border-radius: 1rem;
    user-select: none;
    
    &:hover {
        border-color: var(--very-easy);
        background-color: var(--white);
        color: var(--black);
        cursor: pointer;
    }
}

.copyContainer {
    position: relative;
    display: inline-block;
}

.copyButton {
    font-size: 1rem;
    font-family: MarioFont, serif;
    padding: 1rem 2rem;
    background-color: var(--easy);
    color: var(--white);
    border: var(--black) .2rem solid;
    border-radius: 1rem;
    user-select: none;
    
    &:hover {
        border-color: var(--easy);
        background-color: var(--white);
        color: var(--black);
        cursor: pointer;
    }

    &:disabled {
        background-color: var(--grey);
        border-color: var(--black);
        color: var(--white);

        &:hover {
            opacity: .85;
        }
    }
}

.copiedText {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 8px;
    text-align: center;
    padding: 15px;
    background-color: var(--very-easy);
    color: var(--white);
    font-family: MarioFont, serif;
    font-size: small;
    border-radius: 1rem;
    user-select: none;
    cursor: pointer;
}

@keyframes copyAnimation {
    from { 
        bottom: 0;
        opacity: 1;
    }
    to { 
        bottom: 100%;
        opacity: 0; 
    }
}

@keyframes rotateColors {
    0%  { 
        background: var(--very-easy);
    }
    11.1% { 
        background: var(--easy);
    }
    22.2% { 
        background: var(--normal);
    }
    33.3% { 
        background: var(--hard);
    }
    44.4% { 
        background: var(--very-hard);
    }
    55.5% { 
        background: var(--extreme);
    }
    66.6% { 
        background: var(--insane);
    }
    77.7% { 
        background: var(--balanced);
    }
    88.8% { 
        background: var(--random);
    }
    99.9% { 
        background: var(--very-easy);
    }
}

.show {
    visibility: visible;
    animation: copyAnimation 1s;
}

.all-random {
    animation: rotateColors .7s linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@media only screen and (max-width: 768px) {
    .card {
        justify-self: auto;
        align-self: auto;
    }
}