@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=VT323&display=swap');
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    background: linear-gradient(to right top, #d62525, #dd4621, #e3601f, #e87620, #eb8c25);
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 34px;
    overflow: hidden;
    user-select: none;
}
a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.logo, .menuInfo {
    font-family: 'Fjalla One', sans-serif;
    font-size: 80px;
    margin-left: 10%;
}
.menuInfo {
    position: absolute;
    top: 5px;
    right: 100px;
}
.blackScreen {
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: black;
    top: 0; left: 0;
    z-index: 50;
    transition: opacity 1s;
    cursor: pointer;
}
button {
    border: none;
    box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.75);
    border-radius: 5px;
    padding: 15px 0;
    color: inherit;
    background-image: linear-gradient(to right bottom, #ff9b00, #fb8e03, #f68108, #f1740d, #eb6712);
    font-family: inherit;
    font-size: inherit;
    transition: filter 0.15s;
}
button:hover {
    cursor: pointer;
    filter: brightness(108%);
}
.back {
    position: absolute;
    bottom: 25px; right: 25px;
    padding: 15px;
    border-radius: 50%;
    opacity: 0;
    z-index: -50;
}
#firstMenu {
    display: flex;
    position: absolute;
    top: initial; bottom: 150px; left: 82%;
    height: 200px;
}
#firstMenu button { width: 350px; }
#secondMenu {
    top: 50%;
    transform: translate(-50%,-50%);
    height: 260px;
}
.menu {
    display: none;
    position: absolute;
    left: 50%; top: 180px;
    transform: translateX(-50%);
    flex-direction: column;
    width: 40%;
}
.menu button { 
    margin-top: 15px;
}
.disabled { filter: brightness(75%); }
.disabled:hover { filter: brightness(75%); cursor: default; }
.infoStart {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    letter-spacing: 5px;
    -webkit-box-reflect: below -40px linear-gradient(transparent, rgba(0,0,0,0.2));
    cursor: default;
    width: 100%;
    text-align: center;
}
.infoStart span {
    display: inline-block;
    animation: wavy 1.85s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}
.menu, #answers {
    height: calc(100vh - 210px);
    overflow-y: scroll;
    overflow: auto;
}
.menu::-webkit-scrollbar, #answers::-webkit-scrollbar { 
    border-radius: 15px;
    width: 7px; 
    background-color: #b94f08;
}
.menu::-webkit-scrollbar-thumb, #answers::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #ff9100;
}
.align-right {
    position: absolute;
    right: 20px;
}
@keyframes wavy {
    0% {   transform: translateY(0px); }
    15% { transform: translateY(-25px); }
    30%,100% { transform: translateY(0px); }
}
@media (max-width: 1240px) {
    .menuInfo {right: 15px;}
    .logo {margin-left: 15px;}
}
@media (max-width: 1100px) {
    .menu { width: 60%; }
}
@media (max-width: 989px) {
    .logo { font-size: 4rem; }
    .menuInfo { font-size: 4rem; }
}
@media (max-width: 800px) {
    .logo { font-size: 3rem; }
    .menuInfo { font-size: 3rem; }
}
@media (max-width: 700px) {
    .menu { width: 80%; }
}
@media (max-width: 610px) {
    .logo { width: 200px; }
    #firstMenu button { width: 100%; }
    #firstMenu { left: 0; right: 0; top: initial; bottom: 5px; transform: translateY(-50%); width: 100%; }
}
@media (max-width: 500px) {
    .menu { width: 100%; }
    .menuInfo { font-size: 2rem; }
    .infoStart { font-size: 4rem; }
}
@media (max-width: 380px) {
    .menuInfo { font-size: 1.5rem; top: -10px; }
    .infoStart { font-size: 3rem; -webkit-box-reflect: below -27px linear-gradient(transparent, rgba(0,0,0,0.2));}
}