@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');

@font-face {
    font-family: 'LinjaPona';
    src: url('./fonts/linja-pona-4.9.otf') format('opentype');
  }

body {
    background-color: hsl(280, 50%, 65%);
    overflow: hidden;
    font-family: 'Comfortaa';
}

h1 {
    position: absolute;
    top: .5vw;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2vw;
}

#main-menu {
    position: relative;
    left: 1vw;
    top: 1vw;
    font-size: 1.5vw;  
    width: 4vw;  
    height: 4vw;  
    align-items: center; 
    padding: 0;  
    cursor: pointer;
    border: .4vh solid hsl(0, 0%, 0%);
    border-radius: .5rem;
    background-color: hsl(165, 60%, 70%);
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-bottom: 5vw;
}

#main-menu:hover {
    background-color: hsl(165, 60%, 60%);
    transform: scale(1.1);
}

.text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2vw;
    background-color: hsl(165, 60%, 70%);
    font-size: 3vw;
    width: 85vw;
    height: 80vh;
    border: .5vh solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    border-radius: 1rem;
    font-family: 'LinjaPona', sans-serif;;
}