@media(max-width: 600px) /*Mobil*/
{
    #container
    {
        overflow: hidden;
    }

    .emailsent
    {
        font-size: 20px;
        padding: 5px;
        height: 6s0px;
    }

    #tutorialdiv
    {
        width: 20px;
    }

    #conclusion
    {
        width: 70%;
        margin: auto;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    #infodivbottom
    {
        position: relative;
    }

    #arrow
    {
        position: absolute;
        top: 10%;
        left: 0;
        width: 15%;
    }

    #DownButton
    {
       width: 20%;
    }

    #infodiv p 
    {
        font-size: 15px;
    }

    #infodiv
    {
        width: 90%;
        margin-bottom: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    #infodivlang
    {
        margin: auto;
        margin-top: 70px;
    }

    #infodivlang strong
    {
        color: rgb(166, 120, 245);
        font-size: 20px;
    }

    #StartingButton
    {
        width: 100px;
    }

    #tutorialdiv p
    {
        margin-bottom: 60px;
    }

    .inputs
    {
        font-size: 5px;
    }

    #logo
    {
        width: 22%;
    }

    #LogoDiv
    {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    #MainMoto
    {
        font-size: 2em
    }
    
    #mainidea
    {
        font-size: 1em;
    }

    #mainimg
    {
        width: 280%;
        overflow: hidden;
    }

    #chaptitle
    {
        text-align: center;
        font-size: 3em;
    }

    #mainlogo
    {
        width: 60px;
        height: 60px;
    }

    #mainnav
    {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: min(15em, 100%);
        z-index: 10;
    }

    #footerlogo
    {
        width: 50px;
        height: 50px;
    }

    #footernav
    {
        font-size: 14px;
    }

    #formtitle
    {
        font-size: 2.3em;
    }

    .inputs
    {
        font-size: 10px;
    }


    #tutodiv
   {
     display: flex;
     flex-direction: column;
     gap: 35px;
   }


   #tutorialnum
   {
    margin: 10px;
    font-size: 50px;
   }

   #footer
   {
     width: 100%;
   }


   #tutorialdiv
   {
        width: 65%;
        height: 50%;
   }

   #tutodiv
   {
        position: relative;
   }

     button[type="submit"]
    {
        width: 40%;;
    }

    #captext
    {
        font-size: 10px;
    }

    #nextstep:nth-child(1)
    {
       display: none;
    }

    #enddivs
    {
        padding-left: 0;
        text-align: start;
    }

    #enddivs i
    {
        color: red;
    }

    #footernav
    {
        font-size: 15px;
        margin-left: 0px;
        text-align: start;
        padding: 0;
    }

    #loginnav
    {
        padding: 0;
    }

    #Mail
    {
        font-size: 35px;
        text-decoration: none;
        color: rgb(169, 160, 160);
    }

    #emailp
    {
        font-size: 0px;
    }

    #footernav:nth-child(3)
    {
        background-color: red;
    }

    #nextstep:nth-child(2)
    {
       display: none;
    }


    #footernav
    {
        width: 50%
    }

    .inputs
    {
        font-size: 17px;
    }

    input::placeholder,textarea::placeholder
    {
        font-size: 17px;
    }

    textarea
    {
        font-size: 17px;
    }
    
    #subbutton
    {
        font-size: 17px;
    }
}

@media(max-width: 400px)
{
    #sidenav
    {
        width: 100%;
        align-items: center;
    }

    #sidenav li:nth-child(1)
    {
        align-self: flex-start;
        margin-left: 30px;
    }
}