body {
    margin: 0;
    padding: 0;
}
#intro {
    position: absolute;
    top: 0;
    padding: 2rem;
    border-bottom: 2px solid black;
}

#intro p {
    margin: 0;
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#chance-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chance-container h1 {
    margin: 0;
    font-size: 27vw;
    font-weight: 100;

}

#next-chance-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2rem;
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-top: 2px solid black;
    cursor: pointer;
}

.startingClass {
    font-family: 'Courier New', Courier, monospace;
}

/* Font-Family */
.fontFam-1 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.fontFam-2 {
    font-family: Georgia, 'Times New Roman', Times, serif
}
.fontFam-3 {
    font-family: 'Courier New', Courier, monospace;
}
.fontFam-4 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.fontFam-5 {
    font-family: 'Lucida Sans', 'Lucida Sans Regular';
}
.fontFam-6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.fontFam-7 {
    font-family: 'Times New Roman', Times, serif;
}
.fontFam-8 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.fontFam-9 {
    font-family: Arial, Helvetica, sans-serif;
}
.fontFam-10 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.fontFam-11 {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.fontFam-12 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.fontFam-13 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.fontBlend-14 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Font-Blending (Color) */
.fontBlend-1 {
    mix-blend-mode: normal;
}
.fontBlend-2 {
    mix-blend-mode: multiply;
}
.fontBlend-3 {
    mix-blend-mode: screen;
}
.fontBlend-4 {
    mix-blend-mode: overlay;
}
.fontBlend-5 {
    mix-blend-mode: darken;
}
.fontBlend-6 {
    mix-blend-mode: lighten;
}
.fontBlend-7 {
    mix-blend-mode: color-dodge;
}
.fontBlend-8 {
    mix-blend-mode: color-burn;
}
.fontBlend-9 {
    mix-blend-mode: hard-light;
}
.fontBlend-10 {
    mix-blend-mode: soft-light;
}
.fontBlend-11 {
    mix-blend-mode: difference;
}
.fontBlend-12 {
    mix-blend-mode: exclusion;
}
.fontBlend-13 {
    mix-blend-mode: hue;
}
.fontBlend-14 {
    mix-blend-mode: saturation;
}
.fontBlend-15 {
    mix-blend-mode: color;
}
.fontBlend-16 {
    mix-blend-mode: luminosity;
}


/* Background-Color */
.bgColor-1 {
    background-color: yellowgreen;
}
.bgColor-2 {
    background-color: yellow;
}
.bgColor-3 {
    background-color: hotpink;
}
.bgColor-4 {
    background-color: aqua;
}
.bgColor-5 {
    background-image: linear-gradient(#e66465, #9198e5);
}
.bgColor-6 {
    background-image: linear-gradient(#46972e, #4d57ca);
}
.bgColor-7 {
    background-image: linear-gradient(#e6e464, #91e5d0);
}
.bgColor-8 {
    background-image: linear-gradient(#8de664, #d791e5);
}
.bgColor-9 {
    background-image: linear-gradient(#c864e6, #9198e5);
}
.bgColor-10 {
    background-image: linear-gradient(#e6b264, #ace591);
}
.bgColor-11 {
    background-image: linear-gradient(#e664ac, #91e5e1);
}