body{
    background: linear-gradient(180deg, rgba(96, 176, 188, 1) 0%, rgba(213, 175, 220, 1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}   

h1{
    border: 5px solid #D9C0E8;
    border-radius: 23px;
    color:#be4ee1;
    background-color: #D9C0E8;
    font-family: 'MyCustomFont', sans-serif;
    font-weight: lighter;
    font-size: clamp(1.5rem, 4vw, 3rem); 
    height:15vh;
    width:90%;
    text-align: center;
    margin: 20px auto;
    display:flex;
    align-items: center;
    justify-content: center;
}
@font-face {
    font-family: 'MyCustomFont';
    src: url('./Orbitron-VariableFont_wght.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MyCustomFon';
    src: url('./SmoochSans-VariableFont_wght.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
p{
    font-family: 'MyCustomFon', sans-serif;
    text-align: center;
    padding:7vw;
    padding-bottom: 1vw;
    font-size: clamp(3rem, 10vw, 5rem); 
}
button{
    font-family: 'MyCustomFon', sans-serif;
    padding: 10px 20px;
    font-size: 1.7rem; 
    height: 90px; 
    flex: 1; 
    text-align: center;
    background-color: #be69d7;
    border: none;
    border-radius:10px;
    cursor: pointer;
    color: white;
    margin: 20px auto;
    /* Center text */
    display: flex;
    justify-content: center;
    align-items: center;
}
button:hover {
    background-color: #90c4d4; 
}

#modeSelection{
    display: flex;
    justify-content: center;
    gap: 10px; 
    width: 80%; 
    max-width: 570px; 
    margin: 20px auto;
}