*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    max-width: 750px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}
nav{
    font-size: 24px;
    background-color: yellow;
    padding: 8px;
    margin-bottom: 180px;
    ul{
        display: flex;
        justify-content: space-around;
    }
    ul li{
        list-style: none;
        border: 3px solid;
        padding: 5px;
        border: none;
    }
    ul li a{
        text-decoration: none;
        color: black;
        font-weight: bold;
    }
    
}
main{
  margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    background-color: yellow;
    .score{
        padding: 10px;
        color:black;
        background-color: yellow;
        p{
            font-weight: bold;
            font-size: 24px;
            margin: 10px;
            text-align: center;
        }
        .view{
            display: flex;
            justify-content: center;
            button{
                padding: 10px;
                background-color: black;
                color: white;
                border: none;
                cursor: pointer;
                font-family: Arial, Helvetica, sans-serif;
            }
            button:hover{
                background-color: yellowgreen;
                color: black;
            }

        }
        .try{
            
            display: flex;
            justify-content: center;
            button{
                padding: 10px;
                background-color: black;
                color: white;
                border: none;
                cursor: pointer;
                font-family: Arial, Helvetica, sans-serif;
            }
            button:hover{
                background-color: yellowgreen;
                color: black;
            }
        }
    }
    .bod{
        font-weight: bold;
    }
    .score2{
        display: none;
        padding: 10px;
        color:black;
        background-color: yellow;
        p{
            font-weight: bold;
            font-size: 24px;
            margin: 10px;
            text-align: center;
        }
        .view{
            display: flex;
            justify-content: center;
            button{
                padding: 10px;
                background-color: black;
                color: white;
                border: none;
                cursor: pointer;
                font-family: Arial, Helvetica, sans-serif;
            }
            button:hover{
                background-color: yellowgreen;
                color: black;
            }

        }
        .try{
            
            display: flex;
            justify-content: center;
            button{
                padding: 10px;
                background-color: black;
                color: white;
                border: none;
                cursor: pointer;
                font-family: Arial, Helvetica, sans-serif;
            }
            button:hover{
                background-color: yellowgreen;
                color: black;
            }
        }
    }
.score1{
        padding: 10px;
        color:black;
        background-color: yellow;
        p{
            font-weight: bold;
            font-size: 24px;
            margin: 10px;
           text-align: center;
        }
        .view{
            display: flex;
            justify-content: center;
            button{
                padding: 10px;
                background-color: black;
                color: white;
                border: none;
                cursor: pointer;
                font-family: Arial, Helvetica, sans-serif;
            }
            button:hover{
                background-color: yellowgreen;
                color: black;
            }

        }
        .try{
            
            display: flex;
            justify-content: center;
            button{
                padding: 10px;
                background-color: black;
                color: white;
                border: none;
                cursor: pointer;
                font-family: Arial, Helvetica, sans-serif;
            }
            button:hover{
                background-color: yellowgreen;
                color: black;
            }
        }
    }
    .hide{
        z-index: 1;
    }
    .level{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: none;
        h2{
            padding: 20px;
        }
        button{
            padding: 10px;
            border-radius: 10px;
            border: none;            
            margin: 10px;
            background-color: black;
            color: white;
            cursor: pointer;
        }
        button:hover{
            background-color: yellowgreen;
            color: black;
        }
    }
    h1{
        padding: 10px;
        text-align: center;
    }
    button{
        font-size: 20px;
    }
    .but{
        background-color: black;
        color: white;
        font-size: 24px;
        padding: 10px;
        cursor: pointer;
        border-radius: 10px;
        margin-left: 150px;
        margin-right: 150px;
        margin-bottom: 20px;
        margin-top: 30px;
        border: none;
    }
    .but:hover{
        background-color: yellowgreen;
        color: black;
    }
 .container1{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    #time{
        font-weight: bold;
    }
    }
 }  
 .container2{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    }
    
    #time1{
        font-weight: bold;
    }
 } 
 .container3{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    
    #time2{
        font-weight: bold;
    }
    }
 }
 .container4{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    
    #time3{
        font-weight: bold;
    }
    }
 }
 .container5{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    
    #time4{
        font-weight: bold;
    }
    }
 }
}
#time3{
    display: none;
 padding: 20px;
    font-weight: bold;
    text-align: center;
}
#time2{
    display: none;
    padding: 20px;
    font-weight: bold;
    text-align: center;
}
.container6{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    }
}  
.container7{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    }
} 
.container8{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    }
}
.container9{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    }
}
.container10{
    display: none;
    margin: 20px;
    input{
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    label{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
    }
    div{
        display: flex;
        justify-content: flex-end;
        button{
            padding: 10px 20px;
            background-color: black;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        button:hover{
        background-color: yellowgreen;
        color: black;
    }
    }
}


footer{

    div{
        padding: 10px 5px;
        text-align: center;
            color: white;
        .fa-brands{
            background-color: white;
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
        .fa-solid{
            background-color: white;
            width: 20px;
            height: 20px;
            
        }
        .fa-brands:hover{
            border: 2px solid red;
        }
        .fa-solid:hover{
            border: 2px solid red;
            
        }
        p{
            margin-top: 10px;
        }
    }
}
@media (min-width:1200px) {
    body{
        max-width: 1600px;
        display: flex;
        flex-direction: column;
        font-family: Arial, Helvetica, sans-serif;
        background-color: black;
    
    }
}