*{
        padding: 0;
        margin: 0;
    }
    body{
        background-color:#847e78;
        font-family:san-serif
    }
    .container{
        width:90%;
        margin: 0 auto;
        padding-top: 20px
    
    }
    .header-content{
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .level{
        font-size: 20px;
        display: flex;
    }
    li{
        display:inline;
    }
    .help-link a{
     background-color: #874306; 
     color: #ffffff;
     text-decoration: none;
     font-size:20px;
     padding: 10px 30px;
     border-radius: 20px  
    }
    .level-links a{
        text-decoration: none;
         color:#ffffff;
         background-color: #8c8d88;
         padding: 5px 20px;
         border-radius: 20px
    }
    .current a{
        background-color: #efe000;
        color: #874306;
    }
    .score h1{
        color: #874306;
        background-color: #ffffff;
        padding:20px 30px;
        border-radius: 100%;
    }
    section{
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .navigation{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }
    .navigation a{
        text-decoration: none;
        font-size: 40px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .navigation .previous a{
        color: red;
    }
    .navigation .next a{
        color: greenyellow;
    }
    .paragraph{
        color: #ffffff;
        font-size: 50px;
    }
    input{
        border:2px solid #efe000;
        border-radius:30px;
        width:100%;
        margin-top: 20px;
        height: 50px;
        text-align: center;
        outline: none;
    }
    input::placeholder{
        color: #874306;
        font-size: 18px;
        font-weight: bolder;
    }
    .write input{
        background-color: inherit;
    }
    .submit input{
        background-color: #efe000;
        color: #ffffff;
        font-size: 20px;
        font-weight: bolder;
    }
    .submit input:hover{
        background-color: #ffffff;
        color:  #efe000;
    }
    @media screen and (max-width: 1200px){
        section{
            margin-top: 150px;
        }
        .help-link a{
            font-size: 12px;
        }
        .score h1{
            font-size: 18px;
        }
        .spongeBob-image img{
            width: 300px;
            margin-left: 75px;
        }
        .paragraph, .navigation a{
            font-size: 30px;
        }
        .form{
            margin-right: 75px;
        }
    }
    @media screen and (max-width: 993px){
        .spongeBob-image img{
            width: 250px;
            margin-left: 25px;
        }
        .paragraph, .navigation a{
            font-size: 20px;
            text-align: center;
        }
        .form{
            width: 40%;
        }
    }
    @media screen and (max-width: 767px){
        section{
            margin-top: 250px;
        }
        .score{
            position: absolute;
            margin-left: 82%;
            margin-top: 150px;
        }
        .spongeBob-image img{
            width: 200px;
            margin-left: 0px;
        }
        .form{
            width: 50%;
            margin-right: 25px;
        }
    }
    @media screen and (max-width: 600px){
        .score{
            margin-left: 78%;
        }
        .paragraph, .navigation a,input::placeholder,.write input,.submit input{
            font-size: 16px;
        }
    }
    @media screen and (max-width: 500px){
        section{
            margin-top: 125px;
        }
        .help-link{
            margin-left: -20px;
            margin-top: -20px;
        }
        .level p{
            font-size: 14px;
            font-weight: bolder;
        }
        .level-links{
            margin-top: -5px;
        }
        .score{
            margin-left: 75%;
        }
        .spongeBob-image img{
            width: 250px;
            margin-left: 85px;
            height: 300px;
            margin-bottom: 600px;
        }
        .form{
            width: 100%;
            margin-left: -320px;
        }
        .paragraph, .navigation a,input::placeholder,.write input,.submit input{
            font-size: 20px;
        }
    }
    @media screen and (max-width: 420px){
        section{
            margin-top: 150px;
        }
        .spongeBob-image img{
            margin-left: 60px;
        }
        .form{
            margin-left: -290px;
        }
        .score{
            margin-top: 35px;
            margin-left: 70%;
        }
        .help-link{
            margin-top: 5px;
            margin-left: -10px;
            position: absolute;
        }
        .level{
            margin-top: 200px;
            position: absolute;
            margin-left: 7.5%;
        }
    }
    @media screen and (max-width: 350px){
        .spongeBob-image img{
            margin-left: 30px;
        }
        .form{
            margin-left: -260px;
        }
        .score{
            margin-left: 68%;
        }
        .level{
            margin-left: 3.5%;
        }
    }