* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-size: cover;
    background-image: url(./files/imgs/background.jpg);
}

#name-div, #num-div {    
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    grid-row: span 1;
    margin: 0 auto;
}

#home-div {
    grid-row: span 4;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

#play-button, .next , .play-again{
    grid-row: span .5;
    margin: 0 auto;
}

.next, .play-again {
    margin-top: 2vmin;
}

main {
    border: 2vmin dotted rgb(194, 1, 194);
    margin: 4vmin auto;
    width: 67vmin;
    height: 83vmin;    
}

#main-container {
    margin: 2vmin auto;
    height: 75vmin;
    width: 55vmin;
    display: grid;
    grid-template-rows: 1fr 4fr;
    position: relative;
    background-color: rgba(255, 255, 255, 0.779);

}

h1 {
    font-family: 'Tilt Neon', cursive;
    grid-row: span 1;
    margin: 5vmin auto;
    max-width: 45vmin;
    font-size: 6vmin;
    text-align: center;
}

.neonText {
    color: white;
    text-shadow:
      0 0 .5vmin purple,
      0 0 .75vmin purple,
      0 0 2vmin purple,
      0 0 5vmin purple,
      0 0 8vmin purple,
      0 0 11vmin purple,
      0 0 14vmin purple,
      0 0 17vmin purple;
}

.score-msg {
    font-weight: bolder;
    font-size: 3.25vmin;
    color: white;
    text-shadow:
   -.13vmin -.13vmin 0 #000,  
    .13vmin -.13vmin 0 #000,
    -.13vmin .13vmin 0 #000,
    .13vmin .13vmin 0 #000;
}

input {
    width: 20vmin;
    height: 5vmin;
    font-size: 2.25vmin;
    padding: .5vmin;
}

button {
    width: 15vmin;
    height: 5vmin;
    border-radius: 4vmin;
    font-size: 2.5vmin;
    background-color: purple;
    color: white;
    font-weight: bolder;
}

label {
    font-size: 3vmin;
    font-weight: bold;
    max-width: 40vmin;
    height: auto;
    text-align: center;
    margin-bottom: 2vmin;
}

ul {
    margin: auto;
}

li {
    list-style: none;
    padding: 1vmin;
    margin: auto;
    text-align: center;
    font-size: 2.5vmin;
}

li:hover {
    color: rgb(205, 0, 205);
}

.warning-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;    
    position: absolute;
    top: 47%;
    left: 27%;
    height: 8vmin;
    width: 25vmin;
    background-color: rgba(255, 0, 0, 0.833);
    border: .5vmin outset red;

}

.warning-msg {
    font-weight: bolder;
    font-size: 2.25vmin;

    
}

.focus {
    border: 0.5vmin solid rgb(237, 81, 81);
    background-color: rgba(255, 0, 0, 0.123);
}

.question {
    text-align: center;
    max-width: 40vmin;
    margin: auto;
    font-size: 3vmin;
    font-weight: bolder;
}

.choice {
    font-weight: bold;
}

p {
    max-width: 45vmin;
    margin: -4vmin auto;
    font-size: 3vmin;
    text-align: center;
}

p.congrats-msg, h4 {
    max-width: 45vmin;
    margin: auto;
    font-size: 3vmin;
    text-align: center;
    grid-row: span 1;
}

.emphasize {
    font-weight: bolder;
    font-size: 4vmin;
}