/* BODY */

body {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* LIGHT MODE */

body.light-mode {
    background-color: white;
}

body.light-mode .grids-background div {
    border: 2px solid rgba(224, 224, 224);
    background: linear-gradient(
        0deg,
        rgba(224, 224, 224, 0.5) 0%,
        rgba(224, 224, 224, 0.25) 40%,
        rgba(224, 224, 224, 0.0) 60%,
        rgba(224, 224, 224, 0.25) 100%
    );
}

/* DARK MODE */

body.dark-mode {
    background-color: black;
}

body.dark-mode .grids-background div {
    border: 2px solid rgba(32, 32, 32);
    background: linear-gradient(
        0deg,
        rgba(32, 32, 32, 0.5) 0%,
        rgba(32, 32, 32, 0.25) 40%,
        rgba(32, 32, 32, 0.0) 60%,
        rgba(32, 32, 32, 0.25) 100%
    );
}



/* GRID BACKGROUND */

.grids-background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: 100%;
    display: grid;
    padding-top: 2px;
    gap: 2px;
    grid-template-columns: repeat(28, 58px);
    grid-auto-rows: 58px;
    background-color: transparent;
    z-index: -1;
    pointer-events: none;
}

.grids-background div {
    border: 2px solid rgba(224, 224, 224);
    border-radius: 9px;
}
    


/* WELCOME */

.welcome {
    position: fixed;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: white;
    background-image: url('../images/welcome-light-mode.png');
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;

    transition: opacity 1.5s ease;
}

.welcome.light-mode {
    background-color: white;
    background-image: url('../images/welcome-light-mode.png');
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
}

.welcome.dark-mode {
    background-color: black;
    background-image: url('../images/welcome-dark-mode.png');
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
}



/* WARNING WINDOW */

.warning {
    position: fixed;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
}

.warning-content {
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;

    background-image: url('../images/warning-background.png');
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;
}

.inner-warning-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    width: 722px;
    height: 654px;

    padding-top: 30px;
    padding-left: 56px;
    padding-right: 56px;
    padding-bottom: 30px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    overflow-y: scroll;
    scrollbar-color: rgba(224, 224, 224) rgba(32, 32, 32);
}

.inner-warning-content > * { position: relative; z-index: 1; }

/* "DONATE" WINDOW */

.donate {
    position: fixed;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
}

.donate-content {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    width: 722px;
    height: 654px;

    padding-top: 30px;
    padding-left: 56px;
    padding-right: 56px;
    padding-bottom: 30px;

    background-image: url('../images/donate-window.png');
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;
}

.inner-donate-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    margin-left: 56px;
    margin-right: 56px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.inner-donate-content > * { position: relative; z-index: 1; }



.close-button {
    position: absolute;
    top: 6px;
    right: 10px;
    border: none;
    background: transparent;
    color: white;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
    transition: color 0.25s;
}

.close-button:hover { transform: scale(1.25); z-index: 4; }

/* "UNDER CONSTRUCTION" WINDOW */

.under-construction {
    position: fixed;
    z-index: 4;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
    background-image: url('../images/tape.png');
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
}

.under-construction-content {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    width: 834px;
    height: 474px;

    background-image: url('../images/warning-background.png');
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;
}

.inner-under-construction-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    margin-left: 56px;
    margin-right: 56px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.inner-under-construction-content > * { position: relative; z-index: 1; }

/* APT TUTORIAL */

.apt-tutorial {
    position: fixed;
    z-index: 3;

    display: flex;
    justify-content: center;

    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
    background-position-x: center;
}

.apt-tutorial-content {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 242px;
    width: 1194px;
    height: 594px;

    border: 2px solid transparent;
}

.apt-tutorial-content-242 {
    margin-top: 242px;
    width: 1194px;
    height: 594px;

    border: 2px solid transparent;
}

.apt-tutorial-content-1262 {
    margin-top: 1262px;
    width: 1194px;
    height: 594px;

    border: 2px solid transparent;
}

.apt-tutorial-content-1412 {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 1412px;
    width: 1194px;
    height: 594px;

    border: 2px solid transparent;
}

.welcome-apt-tutorial-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;
    margin-bottom: 10px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.welcome-apt-tutorial-content > * { position: relative; z-index: 1; }

.ind-apt-tutorial-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    margin-top: 200px;
    margin-left: 209px;
    margin-right: 32px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: left;
}

.ind-apt-tutorial-content > * { position: relative; z-index: 1; }

.ad-apt-tutorial-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    margin-left: 273px;
    margin-right: 91px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.ad-apt-tutorial-content > * { position: relative; z-index: 1; }

.ml-apt-tutorial-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    margin-top: 2px;
    margin-left: 60px;
    margin-right: 239px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.ml-apt-tutorial-content > * { position: relative; z-index: 1; }

.end-apt-tutorial-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    margin-left: 149px;
    margin-right: 329px;
    margin-bottom: 8px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.end-apt-tutorial-content > * { position: relative; z-index: 1; }

/* TEST WINDOW */

.before-dynamic {
    position: fixed;
    z-index: 6;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
}

.before-dynamic-content {
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;

    background-image: url('../images/warning-background.png');
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;
}

.inner-before-dynamic-content {
    display: block;
    justify-content: center;
    align-items: center;
    
    position: relative;

    width: 722px;
    height: 608px;

    padding-top: 48px;
    padding-left: 56px;
    padding-right: 56px;
    padding-bottom: 58px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    overflow-y: scroll;
    scrollbar-color: rgba(224, 224, 224) rgba(32, 32, 32);
}

.before-dynamic-content > * { position: relative; z-index: 1; }

.input-name {
    font-size: 27px; height: 52px; border: 2px solid rgba(192, 192, 192);

    font-family: 'Impact', sans-serif;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    outline: 2px solid white;
}

.input-name::placeholder {
    color: rgba(192, 192, 192);
}

/* PARENTAL BLOCK */

.parental-block {
    position: fixed;
    z-index: 4;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
}

.parental-block-content {
    position: relative;

    width: 842px;
    height: 174px;
    
    background-color: rgba(252, 252, 252);
    background-image: url('../images/block-block-block.gif');
    background-size: 954px 534px;
    background-position: top;
    background-repeat: no-repeat;

    padding-top: 540px;
    padding-left: 56px;
    padding-right: 56px;
    
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

.parental-block-content > * { position: relative; z-index: 1; }



/* HEADER */

header {
    position: fixed;
    margin: 0 auto;
    z-index: 5;
    flex-wrap: nowrap;

    display: flex;
    justify-content: center;
    align-items: center;

    top: 2px;
    width: 1194px;
    height: 114px;

    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;

    font-family: 'Impact', sans-serif;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    outline: 2px solid white;
}

header.light-mode { outline: 2px solid white; }

header.dark-mode { outline: 2px solid black; }



/* BUTTONS */

/* ACCEPT BUTTON */

.accept-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(0, 192, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.accept-button.visible { visibility: visible; }

.accept-button.none { display: none; }

.accept-button:hover { transform: scale(1.25); z-index: 4; }

.accept-button > * { position: relative; z-index: 1; }

/* EXIT BUTTON */

.exit-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(255, 0, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.exit-button.visible { visibility: visible; }

.exit-button.none { display: none; }

.exit-button:hover { transform: scale(1.25); z-index: 4; }

.exit-button > * { position: relative; z-index: 1; }

/* PREVIOUS BUTTON */

.unlocked-previous-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(255, 0, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px 0 0 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.unlocked-previous-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.unlocked-previous-button > * { position: relative; z-index: 1; }

.locked-previous-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(64, 0, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px 0 0 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: rgba(64, 64, 64);
    text-shadow: 0px 1px 2px rgba(48, 48, 48);

    cursor: not-allowed;
    pointer-events: none;
}

/* NEXT BUTTON */

.unlocked-next-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(0, 192, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 0 9px 9px 0;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.unlocked-next-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.unlocked-next-button > * { position: relative; z-index: 1; }

.locked-next-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(0, 48, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 0 9px 9px 0;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: rgba(64, 64, 64);
    text-shadow: 0px 1px 2px rgba(48, 48, 48);

    cursor: not-allowed;
    pointer-events: none;
}

/* LEFT BUTTON */

.selected-option {
    position: relative;

    width: 58px;
    height: 58px;

    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px 0 0 9px;

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: not-allowed;
    pointer-events: none;
}

.selected-option.light-mode { outline: 2px solid white; }

.selected-option.dark-mode { outline: 2px solid black; }

.selected-option:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.selected-option > * { position: relative; z-index: 1; }

.background-audio-button {
    position: relative;

    width: 58px;
    height: 58px;

    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px 0 0 9px;

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.background-audio-button.light-mode { outline: 2px solid white; }

.background-audio-button.dark-mode { outline: 2px solid black; }

.background-audio-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.background-audio-button > * { position: relative; z-index: 1; }

/* AUDIO SYMBOLS */

.audio { background-image: url('../images/audio.png'); }

.no-audio { background-image: url('../images/no-audio.png'); }

/* BORDER RADIUS */

.left-border-radius { border-radius: 9px 0 0 9px; }

.right-border-radius { border-radius: 0 9px 9px 0; }

/* START BUTTON */

.start-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(0, 192, 0);
    border: 2px solid rgba(192, 192, 192);

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.start-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.start-button > * { position: relative; z-index: 1; }

/* FINISH BUTTON */

.finish-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(255, 0, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.finish-button.light-mode { outline: 2px solid white; }

.finish-button.dark-mode { outline: 2px solid black; }

.finish-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.finish-button > * { position: relative; z-index: 1; }



.locked-finish-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(64, 0, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: rgba(64, 64, 64);
    text-shadow: 0px 1px 2px rgba(48, 48, 48);
    text-align: center;

    cursor: not-allowed;
    pointer-events: none;
}

.locked-finish-button.light-mode { outline: 2px solid white; }

.locked-finish-button.dark-mode { outline: 2px solid black; }

/* UNLOCKED RESTART BUTTON */

.unlocked-restart-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(255, 0, 0);
    border: 2px solid rgba(192, 192, 192);

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.unlocked-restart-button.light-mode { outline: 2px solid white; }

.unlocked-restart-button.dark-mode { outline: 2px solid black; }

.unlocked-restart-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.unlocked-restart-button > * { position: relative; z-index: 1; }

/* LOCKED RESTART BUTTON */

.locked-restart-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(64, 0, 0);
    border: 2px solid rgba(192, 192, 192);

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: rgba(64, 64, 64);
    text-shadow: 0px 1px 2px rgba(48, 48, 48);
    text-align: center;

    cursor: not-allowed;
    pointer-events: none;
}

.locked-restart-button.light-mode { outline: 2px solid white; }

.locked-restart-button.dark-mode { outline: 2px solid black; }

.locked-restart-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        0deg,
        rgba(224, 224, 224, 0.5) 0%,
        rgba(224, 224, 224, 0.25) 40%,
        rgba(224, 224, 224, 0.0) 60%,
        rgba(224, 224, 224, 0.25) 100%
    );
    pointer-events: none;
}

/* DARK MODE BUTTON */

.dark-mode-button {
    position: relative;

    width: 238px;
    height: 58px;

    border: 2px solid rgba(192, 192, 192);
    
    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.dark-mode-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.dark-mode-button > * { position: relative; z-index: 1; }

/* LIGHT MODE BUTTON */

.light-mode-button {
    position: relative;

    width: 238px;
    height: 58px;

    border: 2px solid rgba(192, 192, 192);
    
    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.light-mode-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.light-mode-button > * { position: relative; z-index: 1; }

/* "ABOUT" BUTTON */

.about-button {
    position: relative;

    width: 238px;
    height: 58px;

    background-color: rgba(0, 192, 0);
    border: 2px solid rgba(192, 192, 192);
    
    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.about-button.light-mode { outline: 2px solid white; }

.about-button.dark-mode { outline: 2px solid black; }

.about-button:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.about-button > * { position: relative; z-index: 1; }



.locked-about-button {
    width: 238px;
    height: 58px;

    background-color: rgba(0, 48, 0);
    border: 2px solid rgba(192, 192, 192);
    
    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: rgba(64, 64, 64);
    text-shadow: 0px 1px 2px rgba(48, 48, 48);
    text-align: center;

    cursor: not-allowed;
    pointer-events: none;
}

.locked-about-button.light-mode { outline: 2px solid white; }

.locked-about-button.dark-mode { outline: 2px solid black; }



/* SELECTS */

/* LANGUAJE SELECT */

.language-select {
    position: relative;

    width: 178px;
    height: 58px;
    margin-left: 2px;

    background-color: rgba(224, 224, 224);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 0 9px 9px 0;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.language-select.light-mode { outline: 2px solid white; }

.language-select.dark-mode { outline: 2px solid black; }

.language-select > * { position: relative; z-index: 1; }

.language-select:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }



.locked-language-select {
    position: relative;

    width: 178px;
    height: 58px;
    margin-left: 2px;

    background-color: rgba(56, 56, 56);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 0 9px 9px 0;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 27px;
    color: black;
    text-shadow: 0px 1px 2px rgba(48, 48, 48);
    text-align: center;

    cursor: not-allowed;
    pointer-events: none;
}

.locked-language-select.light-mode { background-color: rgba(56, 56, 56); outline: 2px solid white; }

.locked-language-select.dark-mode { background-color: rgba(56, 56, 56); outline: 2px solid black; }



/* DEFINED TABLE */

.grids-container {
    padding-top: 2px;
    display: grid;
    grid-template-columns: repeat(20, 58px);
    gap: 2px;

    font-family: 'Impact', sans-serif;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
}

.grid-item {
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;

    word-wrap: break-word;
    overflow-wrap: break-word;
}

.grid-item.light-mode { outline: 2px solid white; }

.grid-item.dark-mode { outline: 2px solid black; }

.grid-item > * { position: relative; z-index: 1; }

.grid-item-alt {
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;

    word-wrap: break-word;
    overflow-wrap: break-word;
}

.grid-item-alt > * { position: relative; z-index: 1; }

.inner-grids-container-8 {
    display: grid;
    grid-template-columns: repeat(8, 30px);
    justify-content: center;
    align-items: center;
}

.inner-grids-container-6 {
    display: grid;
    grid-template-columns: repeat(6, 29px);
    justify-content: center;
    align-items: center;
}

.inner-grid-item {
    display: flex;
    position: relative;
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    align-items: center;
    z-index: 1;
}

.inner-grid-item.cols-5-rows-2 {
    grid-column: span 5;
    grid-row: span 2;
    height: 53px;
}

.inner-grid-item.cols-3-rows-2 {
    grid-column: span 3;
    grid-row: span 2;
    height: 53px;
}

.inner-grid-item.cols-2-rows-2 {
    grid-column: span 2;
    grid-row: span 2;
    height: 56px;
}

.inner-grid-item.cols-2-rows-1 {
    grid-column: span 2;
    grid-row: span 1;
    height: 23px;
}

.inner-grid-item.cols-6-rows-4 {
    grid-column: span 6;
    grid-row: span 4;
    height: 110px;
}

.inner-grid-item.cols-1-rows-2 {
    grid-column: span 1;
    grid-row: span 2;
    height: 56px;
}



.inner-grid-item.cols-1-rows-1 {
    grid-column: span 1;
    grid-row: span 1;
    height: 25px;
}

.inner-grid-item.cols-5-rows-1 {
    grid-column: span 5;
    grid-row: span 1;
    height: 25px;
}

.inner-grid-item.cols-1-rows-5 {
    grid-column: span 1;
    grid-row: span 5;
    height: 141px;
}

.inner-grid-item.cols-2-rows-2 {
    grid-column: span 2;
    grid-row: span 2;
    height: 54px;
}

.inner-grid-item.cols-3-rows-2 {
    grid-column: span 3;
    grid-row: span 2;
    height: 54px;
}

.inner-grid-item.cols-2-rows-3 {
    grid-column: span 2;
    grid-row: span 3;
    height: 83px;
}

.inner-grid-item.cols-3-rows-3 {
    grid-column: span 3;
    grid-row: span 3;
    height: 83px;
}



#click-age-difference {
    position: relative;
}

#click-sustraction {
    position: relative;
}

.arrows-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}



.template-rows-13 { grid-template-rows: repeat(13, 58px); }

.template-rows-14 { grid-template-rows: repeat(14, 58px); }

.template-rows-15 { grid-template-rows: repeat(15, 58px); }

.template-rows-16 { grid-template-rows: repeat(16, 58px); }

.template-rows-17 { grid-template-rows: repeat(17, 58px); }

.template-rows-18 { grid-template-rows: repeat(18, 58px); }

.template-rows-19 { grid-template-rows: repeat(19, 58px); }

.template-rows-20 { grid-template-rows: repeat(20, 58px); }

.template-rows-21 { grid-template-rows: repeat(21, 58px); }

.template-rows-22 { grid-template-rows: repeat(22, 58px); }

.template-rows-23 { grid-template-rows: repeat(23, 58px); }

.template-rows-24 { grid-template-rows: repeat(24, 58px); }

.template-rows-25 { grid-template-rows: repeat(25, 58px); }

.template-rows-26 { grid-template-rows: repeat(26, 58px); }

.template-rows-27 { grid-template-rows: repeat(27, 58px); }

.template-rows-28 { grid-template-rows: repeat(28, 58px); }

.template-rows-29 { grid-template-rows: repeat(29, 58px); }

.template-rows-30 { grid-template-rows: repeat(30, 58px); }

.template-rows-31 { grid-template-rows: repeat(31, 58px); }

.template-rows-32 { grid-template-rows: repeat(32, 58px); }

.template-rows-33 { grid-template-rows: repeat(33, 58px); }

.template-rows-34 { grid-template-rows: repeat(34, 58px); }

.template-rows-35 { grid-template-rows: repeat(35, 58px); }

.template-rows-36 { grid-template-rows: repeat(36, 58px); }

.template-rows-37 { grid-template-rows: repeat(37, 58px); }

.template-rows-38 { grid-template-rows: repeat(38, 58px); }

.template-rows-39 { grid-template-rows: repeat(39, 58px); }

.template-rows-40 { grid-template-rows: repeat(40, 58px); }

.template-rows-41 { grid-template-rows: repeat(41, 58px); }

.template-rows-42 { grid-template-rows: repeat(42, 58px); }

.template-rows-43 { grid-template-rows: repeat(43, 58px); }

.template-rows-44 { grid-template-rows: repeat(44, 58px); }

.template-rows-45 { grid-template-rows: repeat(45, 58px); }

.template-rows-46 { grid-template-rows: repeat(46, 58px); }

.template-rows-47 { grid-template-rows: repeat(47, 58px); }

.template-rows-48 { grid-template-rows: repeat(48, 58px); }

.template-rows-49 { grid-template-rows: repeat(49, 58px); }

.template-rows-50 { grid-template-rows: repeat(50, 58px); }

.template-rows-51 { grid-template-rows: repeat(51, 58px); }

.template-rows-52 { grid-template-rows: repeat(52, 58px); }

.template-rows-53 { grid-template-rows: repeat(53, 58px); }

.template-rows-54 { grid-template-rows: repeat(54, 58px); }

.template-rows-55 { grid-template-rows: repeat(55, 58px); }

.template-rows-56 { grid-template-rows: repeat(56, 58px); }

.template-rows-57 { grid-template-rows: repeat(57, 58px); }

.template-rows-58 { grid-template-rows: repeat(58, 58px); }

.template-rows-59 { grid-template-rows: repeat(59, 58px); }

.template-rows-60 { grid-template-rows: repeat(60, 58px); }

.template-rows-61 { grid-template-rows: repeat(61, 58px); }

.template-rows-62 { grid-template-rows: repeat(62, 58px); }

.template-rows-63 { grid-template-rows: repeat(63, 58px); }

.template-rows-64 { grid-template-rows: repeat(64, 58px); }


.template-rows-98 { grid-template-rows: repeat(98, 58px); }

.template-rows-108 { grid-template-rows: repeat(108, 58px); }



.option-buttons { grid-template-rows: repeat(1, 58px); padding-left: 2px; }



/* TEXT ANIMATION */

.and-or-1, .and-or-2, .and-or-3, .and-or-4, .he-she, .es-un-una, .es-del-de-los { display: inline-block !important; }

.ind-a {
    font-size: 36px;
    color: white;

    display: inline-block !important;
}

.ind-a > * { position: relative; z-index: 1; }

.ind-b {
    padding-left: 4px;
    font-size: 36px;
    color: white;

    writing-mode: sideways-lr;

    display: inline-block !important;
}

.ind-b > * { position: relative; z-index: 1; }



/* AGE OF MAJORITY INDIVIDUALS A BACKGROUND */

@keyframes age-of-majority {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 60px 0;
    }
}

.age-of-majority {
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url('../images/age-of-majority.png');

    font-size: 27px;
    color: white;
    text-align: center;

    animation: age-of-majority 0.5s linear infinite;
}

.age-of-majority > * { position: relative; z-index: 1; }

/* LIFE STAGE INDIVIDUALS A BACKGROUND */

@keyframes life-stage {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 60px 0;
    }
}

.life-stage {
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url('../images/life-stage.png');

    font-size: 27px;
    color: black;
    text-align: center;

    animation: life-stage 0.5s linear infinite;
}

.life-stage > * { position: relative; z-index: 1; }

/* AGE OF MAJORITY INDIVIDUALS B BACKGROUND */

@keyframes age-of-majority-90 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 60px;
    }
}

.age-of-majority-90 {
    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 1px;

    background-image: url('../images/age-of-majority-90.png');

    font-size: 27px;
    color: white;
    text-align: center;

    writing-mode: sideways-lr;

    animation: age-of-majority-90 0.5s linear infinite;
}

.age-of-majority-90 > * { position: relative; z-index: 1; }

/* LIFE STAGE INDIVIDUALS B BACKGROUND */

@keyframes life-stage-90 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 60px;
    }
}

.life-stage-90 {
    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 1px;

    background-image: url('../images/life-stage-90.png');

    font-size: 27px;
    color: black;
    text-align: center;

    writing-mode: sideways-lr;

    animation: life-stage-90 0.5s linear infinite;
}

.life-stage-90 > * { position: relative; z-index: 1; }

/* INDIVIDUALS BACKGROUND */

.individuals {
    background-image: url('../images/individuals.png');
}

#ind-a-b {
    position: relative;
    isolation: isolate;
}

.ind-background {
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url('../images/ind-background.png');

    color: white;
    text-align: center;
}



.transparent { background: transparent; border: 2px solid transparent; outline: transparent; }

.none { display: none; }



/* OUTLINE */

.outline { outline: 2px solid white; }

.outline.light-mode { outline: 2px solid white !important; }

.outline.dark-mode { outline: 2px solid black !important; }



.glass {
    background: linear-gradient(
        0deg,
        rgba(224, 224, 224, 0.5) 0%,
        rgba(224, 224, 224, 0.25) 40%,
        rgba(224, 224, 224, 0.0) 60%,
        rgba(224, 224, 224, 0.25) 100%
    );
}

.glass-content {
    position: relative;
    overflow: hidden;
}

.glass-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        0deg,
        rgba(224, 224, 224, 0.5) 0%,
        rgba(224, 224, 224, 0.25) 40%,
        rgba(224, 224, 224, 0.0) 60%,
        rgba(224, 224, 224, 0.25) 100%
    );
    pointer-events: none;
}

.shadow-content {
    position: relative;
    overflow: hidden;
}

.shadow-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        0deg,
        rgba(32, 32, 32, 0.5) 0%,
        rgba(32, 32, 32, 0.25) 40%,
        rgba(32, 32, 32, 0.0) 60%,
        rgba(32, 32, 32, 0.25) 100%
    );
    pointer-events: none;
}

/* DIAGONAL LINE */

.diagonal-line {
    position: relative;
    overflow: hidden;
}

.diagonal-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2px;
    width: 200%;
    height: 3px;
    background-color: white;
    transform: rotate(45deg);
    transform-origin: top left;
}

.diagonal-line.light-mode::before {
    background-color: white;
}

.diagonal-line.dark-mode::before {
    background-color: black;
}

.diagonal-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        0deg,
        rgba(224, 224, 224, 0.5) 0%,
        rgba(224, 224, 224, 0.25) 40%,
        rgba(224, 224, 224, 0.0) 60%,
        rgba(224, 224, 224, 0.25) 100%
    );
    pointer-events: none;
}



/* DEFINDE MARGINS FOR THE TABLE */

.table-margins { margin-top: 120px; margin-bottom: 120px; }



/* DEFINDE PRINCIPAL TITLE FOR THE TABLE */

.apt-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-left: 125px;
    padding-right: 125px;

    font-size: 36px;
    text-shadow: 0px 2px 2px rgba(192, 192, 192);
    text-align: center;
}

.test-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-left: 75px;
    padding-right: 75px;

    font-size: 36px;
    text-shadow: 0px 2px 2px rgba(192, 192, 192);
    text-align: center;
}

/* DEFINDE SECONDARY TITLE FOR THE TABLE */

.ml-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-left: 15px;
    padding-right: 15px;

    font-size: 27px;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}



/* COLSPAN 20 */

.columns-20 { grid-column: span 20; }

/* COLSPAN 19 */

.columns-19 { grid-column: span 19; }

/* COLSPAN 18 */

.columns-18 { grid-column: span 18; }

/* COLSPAN 17 */

.columns-17 { grid-column: span 17; }

/* COLSPAN 16 */

.columns-16 { grid-column: span 16; }

/* COLSPAN 15 */

.columns-15 { grid-column: span 15; }

/* COLSPAN 14 */

.columns-14 { grid-column: span 14; }

/* COLSPAN 13 */

.columns-13 { grid-column: span 13; }

/* COLSPAN 12 */

.columns-12 { grid-column: span 12; }

/* COLSPAN 11 */

.columns-11 { grid-column: span 11; }

/* COLSPAN 10 */

.columns-10 { grid-column: span 10; }

/* COLSPAN 9 */

.columns-9 { grid-column: span 9; }

/* COLSPAN 9 */

.columns-8 { grid-column: span 8; }

/* COLSPAN 9 */

.columns-7 { grid-column: span 7; }

/* COLSPAN 6 */

.columns-6 { grid-column: span 6; }

/* COLSPAN 5 */

.columns-5 { grid-column: span 5; }

/* COLSPAN 4 */

.columns-4 { grid-column: span 4; }

/* COLSPAN 3 */

.columns-3 { grid-column: span 3; }

/* COLSPAN 2 */

.columns-2 { grid-column: span 2; }



/* ROWSPAN 32 */

.rows-32 { grid-row: span 32; }

/* ROWSPAN 31 */

.rows-31 { grid-row: span 31; }

/* ROWSPAN 30 */

.rows-30 { grid-row: span 30; }

/* ROWSPAN 19 */

.rows-29 { grid-row: span 29; }

/* ROWSPAN 28 */

.rows-28 { grid-row: span 28; }

/* ROWSPAN 27 */

.rows-27 { grid-row: span 27; }

/* ROWSPAN 26 */

.rows-26 { grid-row: span 26; }

/* ROWSPAN 25 */

.rows-25 { grid-row: span 25; }

/* ROWSPAN 24 */

.rows-24 { grid-row: span 24; }

/* ROWSPAN 23 */

.rows-23 { grid-row: span 23; }

/* ROWSPAN 22 */

.rows-22 { grid-row: span 22; }

/* ROWSPAN 21 */

.rows-21 { grid-row: span 21; }

/* ROWSPAN 20 */

.rows-20 { grid-row: span 20; }

/* ROWSPAN 19 */

.rows-19 { grid-row: span 19; }

/* ROWSPAN 18 */

.rows-18 { grid-row: span 18; }

/* ROWSPAN 17 */

.rows-17 { grid-row: span 17; }

/* ROWSPAN 16 */

.rows-16 { grid-row: span 16; }

/* ROWSPAN 15 */

.rows-15 { grid-row: span 15; }

/* ROWSPAN 14 */

.rows-14 { grid-row: span 14; }

/* ROWSPAN 13 */

.rows-13 { grid-row: span 13; }

/* ROWSPAN 12 */

.rows-12 { grid-row: span 12; }

/* ROWSPAN 11 */

.rows-11 { grid-row: span 11; }

/* ROWSPAN 10 */

.rows-10 { grid-row: span 10; }

/* ROWSPAN 9 */

.rows-9 { grid-row: span 9; }

/* ROWSPAN 8 */

.rows-8 { grid-row: span 8; }

/* ROWSPAN 7 */

.rows-7 { grid-row: span 7; }

/* ROWSPAN 6 */

.rows-6 { grid-row: span 6; }

/* ROWSPAN 5 */

.rows-5 { grid-row: span 5; }

/* ROWSPAN 4 */

.rows-4 { grid-row: span 4; }

/* ROWSPAN 3 */

.rows-3 { grid-row: span 3; }

/* ROWSPAN 2 */

.rows-2 { grid-row: span 2; }



.egg-interaction-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    position: relative;
}

.ryan-interaction-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: relative;
}

.inner-ryan-interaction-grid {
    display: block;
    justify-content: center;
    text-align: center;
    
    position: relative;
    margin-left: 56px;
    margin-right: 56px;
    margin-bottom: 13px;
}



.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* COLORED BACKGROUNDS */

/* DARK BLUE BACKGROUND */

.dark-blue-background { background-color: rgba(0, 0, 255); color: rgba(255, 255, 255); fill: white; }

/* BLUE BACKGROUND */

.blue-background { background-color: rgba(128, 128, 255); color: rgba(255, 255, 255); fill: white; }

/* LIGHT BLUE BACKGROUND */

.light-blue-background { background-color: rgba(192, 192, 255); color: rgba(0, 0, 0); fill: black; }

/* DARK PURPLE BACKGROUND */

.dark-purple-background { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }

/* PURPLE BACKGROUND */

.purple-background { background-color: rgba(192, 128, 255); color: rgba(255, 255, 255); fill: white; }

/* LIGHT PURPLE BACKGROUND */

.light-purple-background { background-color: rgba(224, 192, 255); color: rgba(0, 0, 0); fill: black; }

/* DARK GREEN BACKGROUND */

.dark-green-background { background-color: rgba(0, 192, 0); color: rgba(255, 255, 255); fill: white; }

/* LIGHT GREEN BACKGROUND */

.light-green-background { background-color: rgba(128, 255, 0); color: rgba(0, 0, 0); fill: black; }

/* YELLOW BACKGROUND */

.yellow-background { background-color: rgba(255, 255, 0); color: rgba(0, 0, 0); fill: black; }

/* ORANGE BACKGROUND */

.orange-background { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }

/* PINK BACKGROUND */

.pink-background { background-color: rgba(255, 128, 192);; color: rgba(0, 0, 0); fill: black; }

/* RED BACKGROUND */

.red-background { background-color: rgba(255, 0, 0); color: rgba(255, 255, 255); fill: white; }

/* DARK RED BACKGROUND */

.dark-red-background { background-color: rgba(128, 0, 0); color: rgba(255, 255, 255); fill: white; }

/* BLACK BACKGROUND */

.black-background { background-color: rgba(0, 0, 0); color: rgba(255, 255, 255); fill: white; }

/* DARK GRAY BACKGROUND */

.dark-gray-background { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }

/* GRAY BACKGROUND */

.gray-background { background-color: rgba(192, 192, 192); color: rgba(0, 0, 0); fill: black; }

/* LIGHT GRAY BACKGROUND */

.light-gray-background { background-color: rgba(224, 224, 224); color: rgba(0, 0, 0); fill: black; }

/* WHITE GRAY BACKGROUND */

.white-background { background-color: rgba(255, 255, 255); color: rgba(0, 0, 0); fill: black; }



/* ANIMATED BACKGROUNDS */

/* ORANGE AND BLACK ANIMATED BACKGROUND */

@keyframes orange-black-background {
    0% { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }
    50% { background-color: rgba(0, 0, 0); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }
}

.orange-black-background {
    animation: orange-black-background 3s infinite;
}

/* ORANGE AND DARK RED ANIMATED BACKGROUND */

@keyframes orange-dark-red-background {
    0% { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }
    50% { background-color: rgba(128, 0, 0); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }
}

.orange-dark-red-background {
    animation: orange-dark-red-background 3s infinite;
}

/* DARK GRAY AND DARK GREEN ANIMATED BACKGROUND */

@keyframes dark-gray-dark-green-background {
    0% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(0, 192, 0); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
}

.dark-gray-dark-green-background {
    animation: dark-gray-dark-green-background 3s infinite;
}

/* DARK GRAY AND RED ANIMATED BACKGROUND */

@keyframes dark-gray-red-background {
    0% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(255, 0, 0); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
}

.dark-gray-red-background {
    animation: dark-gray-red-background 3s infinite;
}

/* DARK GRAY AND DARK RED ANIMATED BACKGROUND */

@keyframes dark-gray-dark-red-background {
    0% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(128, 0, 0); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
}

.dark-gray-dark-red-background {
    animation: dark-gray-dark-red-background 3s infinite;
}

/* DARK GRAY AND BLACK ANIMATED BACKGROUND */

@keyframes dark-gray-black-background {
    0% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(0, 0, 0); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(128, 128, 128); color: rgba(255, 255, 255); fill: white; }
}

.dark-gray-black-background {
    animation: dark-gray-black-background 3s infinite;
}

/* DARK GREEN AND PURPLE ANIMATED BACKGROUND */

@keyframes dark-green-dark-purple-background {
    0% { background-color: rgba(0, 192, 0); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(0, 192, 0); color: rgba(255, 255, 255); fill: white; }
}

.dark-green-dark-purple-background {
    animation: dark-green-dark-purple-background 3s infinite;
}

/* LIGHT GREEN AND PURPLE ANIMATED BACKGROUND */

@keyframes light-green-dark-purple-background {
    0% { background-color: rgba(128, 255, 0); color: rgba(0, 0, 0); fill: black; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(128, 255, 0); color: rgba(0, 0, 0); fill: black; }
}

.light-green-dark-purple-background {
    animation: light-green-dark-purple-background 3s infinite;
}

/* YELLOW AND PURPLE ANIMATED BACKGROUND */

@keyframes yellow-dark-purple-background {
    0% { background-color: rgba(255, 255, 0); color: rgba(0, 0, 0); fill: black; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(255, 255, 0); color: rgba(0, 0, 0); fill: black; }
}

.yellow-dark-purple-background {
    animation: yellow-dark-purple-background 3s infinite;
}

/* ORANGE AND PURPLE ANIMATED BACKGROUND */

@keyframes orange-dark-purple-background {
    0% { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(255, 192, 0); color: rgba(0, 0, 0); fill: black; }
}

.orange-dark-purple-background {
    animation: orange-dark-purple-background 3s infinite;
}

/* RED AND PURPLE ANIMATED BACKGROUND */

@keyframes red-dark-purple-background {
    0% { background-color: rgba(255, 0, 0); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(255, 0, 0); color: rgba(255, 255, 255); fill: white; }
}

.red-dark-purple-background {
    animation: red-dark-purple-background 3s infinite;
}

/* DARK RED AND PURPLE ANIMATED BACKGROUND */

@keyframes dark-red-dark-purple-background {
    0% { background-color: rgba(128, 0, 0); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(128, 0, 0); color: rgba(255, 255, 255); fill: white; }
}

.dark-red-dark-purple-background {
    animation: dark-red-dark-purple-background 3s infinite;
}

/* BLACK AND PURPLE ANIMATED BACKGROUND */

@keyframes black-dark-purple-background {
    0% { background-color: rgba(0, 0, 0); color: rgba(255, 255, 255); fill: white; }
    50% { background-color: rgba(128, 0, 255); color: rgba(255, 255, 255); fill: white; }
    100% { background-color: rgba(0, 0, 0); color: rgba(255, 255, 255); fill: white; }
}

.black-dark-purple-background {
    animation: black-dark-purple-background 3s infinite;
}



/* AGE DIFFERENCE GRIDS */

.difference {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    text-align: center;
}

.difference.a-brightness-dark { outline: 2px solid transparent; }

.difference.b-brightness-dark { outline: 2px solid transparent; }

.difference > * { position: relative; z-index: 1; }



/* DESCRIPTION GRIDS */

.description {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-left: 6px;
    padding-right: 6px;
    
    font-size: 18px;
    text-align: left;
}

.description > * { position: relative; z-index: 1; }



.what-do-you-get {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/what-do-you-get.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 32px;
    padding-right: 486px;
    padding-bottom: 6px;

    color: black;
    text-align: center;
}

.what-do-you-get > * { position: relative; z-index: 1; }

.crazy-idea {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/crazy-idea.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 486px;
    padding-right: 32px;
    padding-bottom: 6px;

    color: black;
    text-align: center;
}

.crazy-idea > * { position: relative; z-index: 1; }

.mission {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/mission.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 32px;
    padding-right: 486px;
    padding-bottom: 6px;

    color: black;
    text-align: center;
}

.mission > * { position: relative; z-index: 1; }

.vission {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/vission.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 486px;
    padding-right: 32px;
    padding-bottom: 6px;

    color: black;
    text-align: center;
}

.vission > * { position: relative; z-index: 1; }

.main-grid-donate {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-image: url('../images/main-grid-donate.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-left: 260px;
    padding-right: 260px;

    color: white;
    text-align: center;
}

.main-grid-donate > * { position: relative; z-index: 1; }

.es-grooming {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/es-grooming.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 486px;
    padding-right: 32px;
    padding-bottom: 6px;

    color: white;
    text-align: center;
}

.es-grooming > * { position: relative; z-index: 1; }



.apt-big-button {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/apt-big-button.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 36px;
    padding-right: 486px;
    padding-bottom: 6px;

    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.apt-big-button:hover { transform: scale(1.25); z-index: 4; }

.apt-big-button > * { position: relative; z-index: 1; }

.egg-big-button {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/egg-big-button.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 36px;
    padding-right: 486px;
    padding-bottom: 6px;

    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.egg-big-button:hover { transform: scale(1.25); z-index: 4; }

.egg-big-button > * { position: relative; z-index: 1; }

.test-big-button {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/test-big-button.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 36px;
    padding-right: 486px;
    padding-bottom: 6px;

    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.test-big-button:hover { transform: scale(1.25); z-index: 4; }

.test-big-button > * { position: relative; z-index: 1; }



.routes-buttons-20 {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/under-construction-1.png');

    grid-column: span 20;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 36px;
    padding-right: 486px;
    padding-bottom: 6px;

    color: white;
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.routes-buttons-20:hover { transform: scale(1.25); z-index: 4; }

.routes-buttons-20 > * { position: relative; z-index: 1; }

.routes-buttons-10 {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url('../images/under-construction-2.png');

    grid-column: span 10;
    grid-row: span 4;

    padding-top: 6px;
    padding-left: 36px;
    padding-right: 329px;
    padding-bottom: 6px;

    color: white;
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.routes-buttons-10:hover { transform: scale(1.25); z-index: 4; }

.routes-buttons-10 > * { position: relative; z-index: 1; }



/* LOWER BRIGHTNESS */

.brightness-dark { filter: brightness(0.25); outline: 2px solid transparent; cursor: not-allowed; pointer-events: none; }

.brightness-dark-alt { filter: brightness(0.25); cursor: not-allowed; pointer-events: none; }

.brightness-dark.light-mode { outline: 2px solid transparent; }

.brightness-dark.dark-mode { outline: 2px solid transparent; }



.a-brightness-dark { filter: brightness(0.25); outline: 2px solid transparent; cursor: not-allowed; pointer-events: none; }

.a-brightness-dark.light-mode { outline: 2px solid transparent; }

.a-brightness-dark.dark-mode { outline: 2px solid transparent; }



.b-brightness-dark { filter: brightness(0.25); outline: 2px solid transparent; cursor: not-allowed; pointer-events: none; }

.b-brightness-dark.light-mode { outline: 2px solid transparent; }

.b-brightness-dark.dark-mode { outline: 2px solid transparent; }



/* SIGNATURE AND COPYRIGHT */

.signature-copyright {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: blue;
    color: white;
}

.signature > * { position: relative; z-index: 1; }

.signature-copyright-90 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    writing-mode: sideways-lr;

    background-color: blue;
    color: white;
}

.signature-copyright-90 > * { position: relative; z-index: 1; }




@keyframes scale {
    0% {transform: scale(1); }
    50% {transform: scale(1.25); }
    100% {transform: scale(1.0); }
}

.scale { animation: scale 3s infinite; }



/* LINKED TEXTS */

/* WHITE LINKED TEXT */

span.white-linked-text a { color: rgba(255, 255, 255); text-decoration: none; }

span.white-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* BLACK LINKED TEXT */

span.black-linked-text a { color: rgba(0, 0, 0); text-decoration: none; }

span.black-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* RED LINKED TEXT */

span.red-linked-text a { color: rgba(255, 0, 0); text-decoration: none; }

span.red-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* BLACK WHITE LINKED TEXT */

@keyframes black-white-linked-text {
    0% { color: rgba(0, 0, 0); }
    50% { color: rgba(255, 255, 255); }
    100% { color: rgba(0, 0, 0); }
}

span.black-white-linked-text a { animation: black-white-linked-text 3s infinite; text-decoration: none; }

span.black-white-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

@keyframes map-zoo-text {
    0%, 87.5% { color: rgba(0, 0, 0); }
    87.5%, 100% { color: rgba(255, 255, 255); }
}

span.map-zoo-text a { animation: map-zoo-text 3s steps(1, end) infinite; text-decoration: none; }

span.map-zoo-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* WHITE PINK LINKED TEXT */

@keyframes white-pink-linked-text {
    0% { color: rgba(255, 255, 255); }
    50% { color: rgba(255, 128, 192); }
    100% { color: rgba(255, 255, 255); }
}

span.white-pink-linked-text a { animation: white-pink-linked-text 3s infinite; text-decoration: none; }

span.white-pink-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* BLACK PINK LINKED TEXT */

@keyframes black-pink-linked-text {
    0% { color: rgba(0, 0, 0); }
    50% { color: rgba(255, 128, 192); }
    100% { color: rgba(0, 0, 0); }
}

span.black-pink-linked-text a { animation: black-pink-linked-text 3s infinite; text-decoration: none; }

span.black-pink-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* RED CYAN LINKED TEXT */

@keyframes red-cyan-linked-text {
    0% { color: rgba(255, 0, 0); }
    50% { color: rgba(128, 192, 255); }
    100% { color: rgba(255, 0, 0); }
}

span.red-cyan-linked-text a { animation: red-cyan-linked-text 3s infinite; text-decoration: none; }

span.red-cyan-linked-text a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* RAINBOW LINKED TEXT */

@keyframes rainbow {
    0% { color: rgba(255, 0, 0); }
    12.5% { color: rgba(255, 192, 0); }
    25% { color: rgba(255, 255, 0); }
    37.5% { color: rgba(0, 192, 0); }
    50% { color: rgba(128, 192, 255); }
    62.5% { color: rgba(0, 0, 255); }
    75% { color: rgba(128, 0, 255); }
    87.5% { color: rgba(255, 128, 192); }
    100% { color: rgba(255, 0, 0); }
}

.rainbow-text a { text-decoration: none; }

.rainbow-text a:hover { text-decoration: underline; }

.rainbow-text span { animation: rainbow 3.25s linear infinite; }



/* AGE BUTTONS */

/* UNLOCKED AGE BUTTON */

.unlocked-age-button {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;

    animation: unlocked-age-button 1.5s;
}

.unlocked-age-button:hover { transform: scale(1.25); z-index: 4; }

/* ALTERNATIVE UNLOCKED AGE BUTTON */

@keyframes unlocked-age-button-alt {
    0% {transform: scale(1); z-index: 2; }
    50% {border-radius: 9px; transform: scale(1.25); z-index: 2; }
    100% {transform: scale(1); z-index: 2; }
}

#option-under-9 { animation-delay: 1.5s; }
#option-9 { animation-delay: 2s; }
#option-10 { animation-delay: 2.5s; }
#option-11 { animation-delay: 3s; }
#option-12 { animation-delay: 3.5s; }
#option-13 { animation-delay: 4s; }
#option-14 { animation-delay: 4.5s; }
#option-15 { animation-delay: 5s; }
#option-16 { animation-delay: 5.5s; }
#option-17 { animation-delay: 6s; }
#option-18 { animation-delay: 6.5s; }
#option-over-18 { animation-delay: 7s; }

.unlocked-age-button-alt {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(224, 224, 224);
    border: 2px solid rgba(192, 192, 192);
    outline: 2px solid white;
    
    font-size: 18px;
    color: black;
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;

    animation: unlocked-age-button-alt 1.5s;
}

.unlocked-age-button-alt:hover { border-radius: 9px; transform: scale(1.25); z-index: 4; }

.unlocked-age-button-alt.-brightness-dark-alt { outline: 2px solid transparent; }

/* LOCKED AGE BUTTON */

.locked-age-button {
    display: flex;
    justify-content: center;
    align-items: center;

    outline: 2px solid transparent;
    
    font-size: 18px;
    text-align: center;

    cursor: not-allowed;
    pointer-events: none;
}

.locked-age-button-alt {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(56, 56, 56);
    border: 2px solid rgba(48, 48, 48);
    outline: 2px solid transparent;
    
    cursor: not-allowed;
    pointer-events: none;
    
    font-size: 18px;
    color: black;
    text-shadow: 0px 1px 2px rgba(48, 48, 48);
    text-align: center;
}

.selected-button {
    position: relative;
    z-index: 1;
}



/* AGE SELECTS */

/* UNLOCKED AGE SELECT */

.unlocked-age-select {
    font-family: 'Impact', sans-serif;
    font-size: 18px;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: pointer;
    transition: transform 0.25s ease;

    animation: unlocked-age-select 1.5s;
}

.unlocked-age-select:hover { transform: scale(1.25); z-index: 4; }

.unlocked-age-select.a-brightness-dark { outline: 2px solid transparent; }

.unlocked-age-select.b-brightness-dark { outline: 2px solid transparent; }

/* LOCKED AGE SELECT */

.locked-age-select {
    font-family: 'Impact', sans-serif;
    font-size: 18px;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;

    cursor: not-allowed;
    pointer-events: none;
}



/* STOP ANIMATION */

.stop-animation {
    animation: none;
}



/* TOOLTIP */

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

.tooltip .tooltip-text {
    position: absolute;
    z-index: 1;

    visibility: hidden;

    width: 228px;
    padding: 6px;

    background-color: rgba(128, 128, 128);
    border-radius: 9px;

    color: white;
    text-align: left;

    left: 50%;
    bottom: 118%;
    margin-left: -120px;

    opacity: 0;
    transition: opacity 0.25s;
}

.tooltip .tooltip-text::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(128, 128, 128) transparent transparent transparent;
}

.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }



/* FOOTER */

footer {
    position: fixed;
    margin: 0 auto;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-items: center;

    bottom: 2px;
    width: 1074px;
    height: 114px;

    padding-left: 60px;
    padding-right: 60px;
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);
    text-align: center;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9px;
    background: linear-gradient(
        0deg,
        rgba(224, 224, 224, 0.5) 0%,
        rgba(224, 224, 224, 0.25) 40%,
        rgba(224, 224, 224, 0.0) 60%,
        rgba(224, 224, 224, 0.25) 100%
    );
    pointer-events: none;
    z-index: 1;
}

footer > * { position: relative; z-index: 1; }

footer.light-mode { outline: 2px solid white; }

footer.dark-mode { outline: 2px solid black; }

@keyframes footer-animating-1 {
    0% { background-image: url('../images/footer-background-1-1.png'); color: black; }
    50% { background-image: url('../images/footer-background-1-2.png'); color: black; }
    100% { background-image: url('../images/footer-background-1-1.png'); color: black; }
}

.footer-animating-1 { animation: footer-animating-1 3s infinite; }

@keyframes footer-animating-2 {
    0% { background-image: url('../images/footer-background-2-1.png'); color: white; }
    50% { background-image: url('../images/footer-background-2-2.png'); color: white; }
    100% { background-image: url('../images/footer-background-2-1.png'); color: white; }
}

.footer-animating-2 { animation: footer-animating-2 3s infinite; }

@keyframes age-of-consent-background {
    0%, 100% { background-image: url('../images/age-of-consent-background.png'); color: white; width: 984px; padding-left: 30px; padding-right: 180px; }
}

.age-of-consent-background { animation: age-of-consent-background 3s steps(1, end) infinite; }

@keyframes map-flag {
    0% { background-image: url('../images/map-flag-1.png'); color: white; width: 834px; padding-left: 180px; padding-right: 180px; }
    50% { background-image: url('../images/map-flag-2.png'); color: white; width: 834px; padding-left: 180px; padding-right: 180px; }
    100% { background-image: url('../images/map-flag-1.png'); color: white; width: 834px; padding-left: 180px; padding-right: 180px; }
}

.map-flag { animation: map-flag 3s infinite; }

@keyframes map-flag-background {
    0%, 87.5% { background-image: url('../images/map-flag-background-1.png'); color: black; }
    87.5%, 100% { background-image: url('../images/map-flag-background-2.png'); color: white; }
}

.map-flag-background { animation: map-flag-background 3s steps(1, end) infinite; }

@keyframes websites {
    0% { background-image: url('../images/websites-1.png'); color: white; width: 674px; padding-left: 260px; padding-right: 260px; }
    50% { background-image: url('../images/websites-2.png'); color: white; width: 674px; padding-left: 260px; padding-right: 260px; }
    100% { background-image: url('../images/websites-1.png'); color: white; width: 674px; padding-left: 260px; padding-right: 260px; }
}

.websites { animation: websites 3s infinite; }

@keyframes rta-label {
    0% { background-image: url('../images/rta-1.png'); color: white; width: 914px; padding-left: 140px; padding-right: 140px; }
    50% { background-image: url('../images/rta-2.png'); color: white; width: 914px; padding-left: 140px; padding-right: 140px; }
    100% { background-image: url('../images/rta-1.png'); color: white; width: 914px; padding-left: 140px; padding-right: 140px; }
}

.rta-label { animation: rta-label 3s infinite; }

@keyframes trans-flag-background {
    0% { background-image: url('../images/trans-flag-background-1.png'); color: black; }
    50% { background-image: url('../images/trans-flag-background-2.png'); color: black; }
    100% { background-image: url('../images/trans-flag-background-1.png'); color: black; }
}

.trans-flag-background { animation: trans-flag-background 3s infinite; }

@keyframes lgbt-flag-background {
    0% { background-image: url('../images/lgbt-flag-background-1.png'); color: black; }
    50% { background-image: url('../images/lgbt-flag-background-2.png'); color: white; }
    100% { background-image: url('../images/lgbt-flag-background-1.png'); color: black; }
}

.lgbt-flag-background { animation: lgbt-flag-background 3s infinite; }

@keyframes zoo-flag-background {
    0%, 87.5% { background-image: url('../images/zoo-flag-background-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    87.5%, 100% { background-image: url('../images/zoo-flag-background-2.png'); color: white; width: 894px; padding-left: 150px; padding-right: 150px; }
}

.zoo-flag-background { animation: zoo-flag-background 3s steps(1, end) infinite; }

@keyframes zack {
    0%, 87.5% { background-image: url('../images/zack-1.png'); color: white; width: 894px; padding-left: 150px; padding-right: 150px; }
    87.5%, 100% { background-image: url('../images/zack-2.png'); color: white; width: 894px; padding-left: 150px; padding-right: 150px; }
}

.zack { animation: zack 3s steps(1, end) infinite; }

@keyframes male-cancer {
    0% { background-image: url('../images/male-cancer-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    50% { background-image: url('../images/male-cancer-2.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    100% { background-image: url('../images/male-cancer-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
}

.male-cancer { animation: male-cancer 3s infinite; }

@keyframes female-cancer {
    0% { background-image: url('../images/female-cancer-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    50% { background-image: url('../images/female-cancer-2.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    100% { background-image: url('../images/female-cancer-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
}

.female-cancer { animation: female-cancer 3s infinite; }

@keyframes revictimization {
    0% { background-image: url('../images/revictimization-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    50% { background-image: url('../images/revictimization-2.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    100% { background-image: url('../images/revictimization-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
}

.revictimization { animation: revictimization 3s infinite; }

@keyframes hpv {
    0% { background-image: url('../images/hpv-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    50% { background-image: url('../images/hpv-2.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
    100% { background-image: url('../images/hpv-1.png'); color: black; width: 894px; padding-left: 150px; padding-right: 150px; }
}

.hpv { animation: hpv 3s infinite; }

@keyframes anti-flag {
    0% { background-image: url('../images/anti-flag-1.png'); color: black; width: 834px; padding-left: 180px; padding-right: 180px; }
    50% { background-image: url('../images/anti-flag-2.png'); color: black; width: 834px; padding-left: 180px; padding-right: 180px; }
    100% { background-image: url('../images/anti-flag-1.png'); color: black; width: 834px; padding-left: 180px; padding-right: 180px; }
}

.anti-flag { animation: anti-flag 3s infinite; }

@keyframes rainbow-background {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 480px 0;
    }
}

.rainbow-background { background-image: url('../images/rainbow-background.png'); animation: rainbow-background 3s linear infinite; color: white; }

@keyframes nerd-emoji {
    0%, 100% {
        background-image: url('../images/nerd-emoji.gif'), url('../images/nerd-emoji.gif'); 
        background-position: left 48px center, right 48px center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: white;

        color: black;

        width: 694px;
        padding-left: 250px;
        padding-right: 250px;
    }
}

.nerd-emoji { animation: nerd-emoji 3s steps(1, end) infinite; }



@keyframes couple-egg-1 {
    0%, 87.5% { background-image: url('../images/egg-expression-1.png'); grid-column: span 12; grid-row: span 12; }
    96.875%, 100% { background-image: url('../images/egg-expression-3.png'); grid-column: span 12; grid-row: span 12; }
}

.couple-egg-1 { animation: couple-egg-1 12s steps(1, end) infinite; }

@keyframes couple-egg-2 {
    0%, 87.5% { background-image: url('../images/egg-expression-2.png'); grid-column: span 12; grid-row: span 12; }
    96.875%, 100% { background-image: url('../images/egg-expression-4.png'); grid-column: span 12; grid-row: span 12; }
}

.couple-egg-2 { animation: couple-egg-2 12s steps(1, end) infinite; }



@keyframes ryan-1 {
    0%, 87.5% { background-image: url('../images/ryan-expression-1.png'); background-size: contain; grid-column: span 12; grid-row: span 12; }
    96.875%, 100% { background-image: url('../images/ryan-expression-3.png'); background-size: contain; grid-column: span 12; grid-row: span 12; }
}

.ryan-1 { animation: ryan-1 12s steps(1, end) infinite;  }

@keyframes ryan-2 {
    0%, 87.5% { background-image: url('../images/ryan-expression-2.png'); background-size: contain; grid-column: span 12; grid-row: span 12; }
    96.875%, 100% { background-image: url('../images/ryan-expression-4.png'); background-size: contain; grid-column: span 12; grid-row: span 12; }
}

.ryan-2 { animation: ryan-2 12s steps(1, end) infinite; }



.discover-age-button {
    position: relative;

    width: 118px;
    height: 118px;

    background-color: rgba(224, 224, 224);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 36px;
    color: black;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.discover-age-button.visible { visibility: visible; }

.discover-age-button.hidden { visibility: hidden; }

.discover-age-button:hover { transform: scale(1.25); z-index: 4; }

.discover-age-button > * { position: relative; z-index: 1; }



.apt-button {
    position: relative;

    width: 298px;
    height: 58px;

    background-color: rgba(0, 192, 0);
    border: 2px solid rgba(192, 192, 192);
    border-radius: 9px;
    outline: 2px solid white;

    font-family: 'Impact', sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 0px 1px 2px rgba(192, 192, 192);

    cursor: pointer;
    transition: transform 0.25s ease;
}

.apt-button.visible { visibility: visible; }

.apt-button.hidden { visibility: hidden; }

.apt-button:hover { transform: scale(1.25); z-index: 4; }

.apt-button > * { position: relative; z-index: 1; }



.unlocked-button {
    padding: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.unlocked-button:hover { transform: scale(1.25); z-index: 4; }

.unlocked-button > * { position: relative; z-index: 1; }

.locked-button {
    padding: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.locked-button > * { position: relative; z-index: 1; }



.unlocked-option-button {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 12px;

    cursor: pointer;
    transition: transform 0.25s ease;
}

.unlocked-option-button:hover { transform: scale(1.25); z-index: 4; }

.unlocked-option-button > * { position: relative; z-index: 1; }



.font-size-18 {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    text-align: center;
}

.font-size-27 {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 27px;
    text-align: center;
}

.font-size-36 {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 36px;
    text-align: center;
}

.font-size-108 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 108px;
    text-align: center;
}



.font-size-18-alt {
    font-size: 18px;
    text-align: center;
}

.font-size-27-alt {
    font-size: 27px;
    text-align: center;
}



.no-pointer-events {
    cursor: not-allowed;
    pointer-events: none;
}



.question {
    grid-column: span 20;
    grid-row: span 4;

    background-color: rgba(224, 192, 255);
    color: rgba(0, 0, 0);
    fill: black;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;

    font-size: 27px;
    text-align: center;
}



.option-cols-5 {
    display: flex;
    justify-content: center;
    text-align: center;

    grid-column: span 5;
    font-size: 27px;
    padding: 12px;
}

.option-cols-10 {
    display: flex;
    justify-content: center;
    text-align: center;

    grid-column: span 10;
    font-size: 27px;
    padding: 12px;
}

.option-cols-20 {
    display: flex;
    justify-content: center;
    text-align: center;

    grid-column: span 20;
    font-size: 27px;
    padding: 12px;
}

.option-cols-20-rows-2 {
    display: flex;
    justify-content: center;
    text-align: center;

    grid-column: span 20;
    grid-row: span 2;
    font-size: 27px;
    padding: 12px;
}