* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}



#container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #350808;
}

h1 {
    font-family: "Arbutus", serif;
    font-weight: 400;
    font-style: normal;
    
}

a {

    font-family: "Arbutus", serif;
    font-weight: 400;
    font-style: normal; 
   font-size: 33px;
   color: #350808;
}

p {
    line-height: 30px;
    font-family: "ABeeZee", sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size: 16px;
}

h6 {
    line-height: 30px;
    font-family: "ABeeZee", sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size: 16px;
}

/* ---------------------HEADER------------------------------- */


 html, body {
        overflow-x: hidden;
    }

header {
    width: 1200px;
    height: 185px;
    background-image: url(imgs/background_img_header.png);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    
   
   
}

#sandwich {
    display: none;
}


#thename {
    font-family: "Protest Revolution", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    color: #350808;
    margin-left: 40px;


}

#technopotato {
    margin-top: 49px;
    
}

#technopotato_tablet {
    display: none;
}

#menu {
    width: 1200px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #FFD9CB;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 144px;
}



#menu1 {
    width: 580px;
    display: flex;
    justify-content: space-between;
    margin-left: 40px;
    color: #350808;
   
}

#limitedshop {
    transition: 0.3s;
}


#limitedshop:hover {
    color: #FF0000;
}

#shop {
    transition: 0.3s;
}

#shop:hover {
    color: #FF0000;
}




#menu2 {
    width: 270px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 140px;
    color: #350808;
}

#sandwicht {
    display: none;
}



/* --------------------INTRO----------------------------- */


#intro {
    width: 1172px;
    height: 555px;
    display: flex;
    justify-content:center;
    align-items: center;
    margin-left: 14px;
    padding-top: 20px;
    background-color: #742D2D;
    margin-bottom: 160px;
    flex-direction: column;
}

#thebibliotablet {
    display: none;
}

#intro_mobile {
    display: none;
}

#introbuttons {
    display: flex;
    flex-direction: row;
    width: 10px;
   justify-content: center; 
   padding-top: 10px;

}
 
.dots {
    height: 10px;
    width: 20px;
    background-color: #e68b8b;
    border: none;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    margin: 0px 3px;
    opacity: 0.6;
    transition: 0.3s;
    border-radius: 100%;
    margin-bottom: 8px;
}


 
.dots:hover {
    opacity: 5;
}

#intro_tablet {
    display: none;
}

/* --------------------THE BIBLIOGRAPHY------------------------ */



#txt1 {
    width: 754px;
    height: 426px;
    background-color: #FFD9CB;
    border-top-right-radius: 65px ;
    border-bottom-right-radius: 65px;
    display: flex;
    padding-left: 105px;
    padding-right: 96px;
    margin-right: 40px;
    padding-bottom: 100px;
    flex-direction: column-reverse;
    


}



#imgtechnomobile {
    display: none;
}

#thebibliomobile {
    display: none;
}


#title1 {
    display: flex;
    justify-content: center;
    margin-bottom: 45px;
 
    align-items: center;
    



}

#kys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
}

#actualtxt {
    width: 572px;
    height: 229px;


}


#thebibliography {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  

        

}



#bibliotxt {
    width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    


}

#imgtechno {
    border:#742D2D 26px solid;
    margin-left: 40px;


}

#thebibliography2 {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 30px;
}

#imgtechnopepe {
    border:#742D2D 26px solid;
    border-radius: 100%;
    margin-right: 20px;


}

#txt {
    width: 724px;
    height: 375px;
    background-color: #FFD9CB;
    border-radius: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    margin-right: 20px;
    margin-left: 10px;
    

}

#txtwords {
    width: 600px;
    height: 229px;
    display: flex;
    justify-content: center;
    align-items: center;

    
}

#imgtechnotablet {
    display: none;
}

/* ----------------------------THE STORY--------------------------- */

#thestory {
    width: 660px;
    height: 160px;
    display: flex;
    justify-content: center;
    margin-left: 268px;
    margin-top: 216px;
    margin-bottom: 200px;
}

#thestory_mobile {
    display: none;
}

#imgmonday_mobile {
    display: none;
}


#minemonday {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
 
}

#txt2 {
    width: 700px;
    height: 352px;
    background-color: #FFD9CB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    margin-right: 30px;
 
    
}

#monday {
    width: 572px;
    height: 203px; 
    display: flex;
    justify-content: center;
    align-items: center;
    
}

#imgmonday {
    background-color:#742D2D ;
    width: 350px;
    height: 321px;
    border-radius: 78px;
    padding-bottom: 10px;
}


#mcc {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 75px;
    margin-bottom: 235px;
}

#imgmcc_mobile {
    display: none;
}

#txt3 {
    width: 700px;
    height: 352px;
    background-color: #FFD9CB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    margin-left: 30px;


}

#mcc_txt {
    width: 572px;
    display: flex;
    justify-content: center;
    align-items: center;
}


#imgmcc {
    background-color:#742D2D ;
    width: 350px;
    height: 321px;
    border-radius: 78px;

}






/* ---------------------------SO LONG NERDS VIDEO-------------- */

#slnvideo {
    width: 711px;
    height: 356px;
    border:#742D2D 18px solid;
    border-radius: 54px;
    background-color: #742D2D;
    margin-left: 230px;
    margin-top: 205px;
    margin-bottom: 205px;

}

/* -------------------FOOTER---------------------------- */

footer {
    width: 1200px;
    height: 445px;
    display: flex;
    flex-direction: row;
    background-color: #000000;
}

#coolimg {
    width: 414px;
    height: 366px;
    display: flex;
    margin-top: 79px;
    margin-left: 106px;
}

#name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 120px;
    margin-top: 40px;

}

#txtfooter {
    color: #FFFFFF;
    width: 151px;
    height: 75px;
    text-align: center;
    margin-left: 18px;
    margin-bottom: 30px;
}


#allayinsta {
    opacity: 0.6;
    transition: 0.3s;
}

#allayinsta:hover {
    opacity: 5;
}



#allayyoutube {
    opacity: 0.6;
    transition: 0.3s;
}

#allayyoutube:hover {
    opacity: 5;
}

#sln {
    margin-left: 260px;
}

#sln_mobile {
    display: none;
}

#allaytwitter {
    opacity: 0.6;
    transition: 0.3s;
}

#allaytwitter:hover {
    opacity: 5;
}

#social_mobile {
    display: none;
}

#technocrown_mobile {
    display: none;
}


/* ----------------- RESPONSIVE WHATEVER ---------------- */

@media only screen and (max-width: 720px) {
   
    #container {
        width: 100%;
        max-width: 720px;
        background-color: #350808;
        margin-left: auto;
        margin-right: auto;
    
    }
   
   
    a {

        font-family: "Arbutus", serif;
        font-weight: 400;
        font-style: normal; 
       font-size: 28px;
       color: #350808;
    }

    html, body {
        overflow-x: hidden;
    }

 /* ------------------ HEADER --------------------    */
    header {
        width:100% ;
        max-width: 720px;
        background-image: url(imgs/header_tablet.png);
    }
    
    #menu {
        width:100% ;
        max-width: 720px;
    }

    #menu1 {
        width: 426px;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
       
    }

    #menu2 {
        display: none;
    }

    #sandwicht {
        display: block;
        margin-right: 60px;
    }
   
    #technopotato_tablet {
        display: none;
    }

    #technopotato {
        display: none;
    }

    #thename {
        width: 360px;
       
    }

   /* --------------------------INTRO---------------------------------- */


   #intro {
        width: 100%;
        max-width: 720px;
        height: 469px;
        margin-top: 100px;
        margin-left: 0px;
    }
    
    
    #intro_tablet {
        display: block;
        border: 3px solid #742D2D ;

    }
    
    
    #intro_pc {
        display: none;
    }


   /* ------------------------THE BIBLIOGRAPHY------------------------- */

    
   #themainbiblio {
        width: 100%;
        max-width: 720px;
    } 

    #bibliotxt2 {
        display: none;
    }

    #thebibliomobile {
        display: none;
    }

    #thebibliotablet {
        display: block;
        margin-bottom: 90px;
        width: 575px;

    }

    #imgtechnomobile {
        display: none;
   
    }

    #imgtechno {
        display: none;
    }

  

    #title1 {
        display: none;
    }

    #thebibliography {
        flex-direction: column;
        display: flex;
        margin-left: 0px;
        align-items: center;
     
    }

    #imgtechnotablet {
        width: 340px;
        height: 470px;
        display: block;
        display: block;
        border:#742D2D 26px solid;
        margin-top: 15px;
        margin-bottom: 30px;
    }

    #txt1 {
        width: 349px;
        height: 492px;
        border-top-left-radius: 65px ;
        border-bottom-left-radius: 65px;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 10px;
        padding-bottom: 240px;
        display: flex;
        flex-wrap: wrap;
    }

    #actualtxt {
        width: 329px;
        text-align: center;
        margin-left: 5px;

    }

    #kys {
        display: flex;
        flex-direction: row-reverse;
      
    }

    #txtwords {
        width: 329px;
        text-align: center;
        margin-left: 5px;
    }


    #txt {
        width: 349px;
        height: 540px;
        border-top-left-radius: 65px ;
        border-bottom-left-radius: 65px;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 5px;
        margin-top: 0px;
        margin-left: 10px;
        padding-bottom: 0px;
    }

    #imgtechnopepe {
        width: 360px;
        border:#742D2D 18px solid;
        margin-right: 0px;
        


    }

    #thebibliography2 {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }
  
  /* ----------------------------- THE STORY ------------------------- */

    #thestory_mobile {
        display: none;
    }

    #thestory {
        width: 575px;
        margin-left: 65px;
        margin-top: 130px;
        margin-bottom: 80px;
      
    }

    #story {
        width: 100%;
        max-width: 720px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }


    #minemonday {
        display: flex;
        flex-direction: column ;
        margin-left: -4px;
        align-items: center;
        margin-right: 0px;
        margin-top: 75px;
        margin-bottom: 135px; 
        
      
    }


    #imgmonday {
        display: none;
       
    }

    #imgmonday_mobile {
        display: block;
        background-color:#742D2D ;
        border-radius: 78px;
        padding-bottom: 30px;
        padding-top: 20px;
        width: 340px;
        margin-bottom: 10px;
    }

    #txt2 {
        width: 312px;
        height: 470px;
        background-color: #FFD9CB;
        flex-direction: column-reverse;
        margin-left: 30px; 
        
    
    }


    #monday {
        width: 292px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;   
    }
    
    
    
    #mcc {
        width: 100%;
        max-width: 720px;
        display: flex;
        flex-direction: column;
        margin-left: 0px;
        align-items: center;
        margin-right: 0px;
        margin-top: 75px;
        margin-bottom: 150px; 
    }
    
    
    
    
    
    
    
    #txt3 {
        width: 312px;
        height: 510px;
        background-color: #FFD9CB;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        margin-left: 0px;
    
    
    }

   #imgmcc {
        display: none;
   }

   #imgmcc_mobile {
        display: block;
        background-color:#742D2D ;
        border-radius: 78px;
        padding-bottom: 20px;
        padding-top: 20px;
        width: 340px;
        margin-bottom: 10px;
   }
   

    
   
    #mcc_txt {
        width: 292px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

 /* ------------------------ SO LONG NERDS VIDEO ---------------------- */


    #sln_mobile {
        display: none;
    }

    #sln {
        width:575px ;
        margin-left: 70px;
        display: flex;
        flex-wrap: wrap;
    }

    #slnvideo {
        
        width: 650px;
        height: 356px;
        display: flex;
        flex-wrap: wrap;
        border:#742D2D 18px solid;
        border-radius: 54px;
        background-color: #742D2D;
        margin-left: 40px;
        margin-top: 185px;
        margin-bottom: 205px;
    
    }

 /* ------------------------------ FOOTER ----------------------------- */


    footer {
        max-width: 720px;
        width: 100%;
    
    }


    #social {
        display: none;
    }

    #coolimg {
        margin-left: 10px;
    }


    #social_mobile {
        display: block;
        display: flex;
        flex-direction: row;
    }
 
    #txtfooter {
        color: #FFFFFF;
        width: 117px;
        height: 127px;
        text-align: center;
        margin-left: 10px;
        margin-bottom: 50px;
    }
  
    
    #name {
        display: flex;
        flex-direction: column;
        margin-left: 50px;
        margin-top: 15px;
    

    }
    

    #technocrown {
        display: none;
    }

    #technocrown_mobile {
        display: block;
        margin-left: 5px;
    }

    #omeucu {
        margin-right: 10px;
    }

   



}


















@media only screen and (max-width: 360px) {
   
    #container {
        width: 100%;
        max-width: 360px;
        background-color: #350808;
    }
   

  header .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
  
    }

    html, body {
        overflow-x: hidden;
    }
   
 /* ----------------------------HEADER--------------------------------- */



   header {
        width: 100%;
        max-width: 360px;
        background-image: url(imgs/background_image_header_mobile.png);
   }

   #technopotato_tablet {
        display: none;
   
    }
  
   
    #thename {
       width: 270px;
       margin-left: 5px;
    }

    #sandwich {
        display: block;
        margin-right: 20px;
       
    }

    

    

    #menu {
        display: none;
    }

    #technopotato {
        display: none;
    }

   /* --------------------------INTRO---------------------------------- */
    #intro {
        width: 100%;
        max-width: 360px;
        height: 410px;
        margin-top: 100px;
        margin-left: 0px;
    }


    #intro_pc {
        display: none;
    }

    #intro_tablet {
        display: none;
    }

   #intro_mobile {
        display: block;
        border: 3px solid #742D2D ;
    }


   

   /* ------------------------THE BIBLIOGRAPHY------------------------- */

   #themainbiblio {
        width: 100%;
        max-width: 360px;
    }

    #imgtechnotablet {
        display: none;
    }

    #thebibliotablet {
        display: none;
    }



    #thebibliomobile {
        display: block;
    }

    #imgtechnomobile {
        display: none;
    }

    

    #title1 {
        display: none;
    }

    #imgtechno {
        display: block;
        border:#742D2D 20px solid;
        margin-left: -3px;
        margin-bottom: 30px;

        
    }

    #thebibliography {
        flex-direction: column;
        display: flex;
        margin-left: 0px;
        align-items: center;
     
    }

    #actualtxt {
        width: 292px;
        height: 459px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 80px;
        text-align: center;
    
    }

    #imgtechnopepe {
        width: 340px;
        border:#742D2D 26px solid;
        border-radius: 100%;
        margin-right: 10px;
        
    
    }

    #txt {
        display: none;
    }

    #txt1 {
        width: 320px;
        height: 630px;
        background-color: #FFD9CB;
        border-radius: 65px;
        display: flex;
        flex-direction: column-reverse;
        padding-left: 10px;
        padding-right: 0px;
        margin-right: 0px;
        padding-bottom: 0px;

      
    
    
    }

  /* ----------------------------- THE STORY ------------------------- */

    #thestory_mobile {
        display: block;
        margin-left: 13px;
        margin-top: 130px;
    }

    #thestory {
        display: none;
    }

    #story {
        width: 100%;
        max-width: 360px;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    #minemonday {
        display: flex;
        flex-direction: column ;
       
        align-items: center;
      
        margin-top: 75px;
        margin-bottom: 135px; 
        
      
    }


    #imgmonday {
        display: none;
       
    }

    #imgmonday_mobile {
        display: block;
        background-color:#742D2D ;
        border-radius: 78px;
        padding-bottom: 20px;
        padding-top: 20px;
        width: 340px;
        margin-bottom: 10px;
    }

    #txt2 {
        width: 312px;
        height: 470px;
        background-color: #FFD9CB;
        flex-direction: column-reverse;
        margin-left: 30px; 
        
    
    }


    #monday {
        width: 292px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;   
    }
    
    
    
    #mcc {
        display: flex;
        flex-direction: column;
        align-items: center;
       
        margin-top: 75px;
        margin-bottom: 150px; 
    }
    
    
    
    
    
    
    
    #txt3 {
        width: 312px;
        height: 510px;
        background-color: #FFD9CB;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        margin-left: 0px;
    
    
    }

   #imgmcc {
        display: none;
   }

   #imgmcc_mobile {
        display: block;
        background-color:#742D2D ;
        border-radius: 78px;
        padding-bottom: 20px;
        padding-top: 20px;
        width: 340px;
        margin-bottom: 10px;
   }
   

    
   
    #mcc_txt {
        width: 292px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }


 /* ------------------------ SO LONG NERDS VIDEO ---------------------- */



    #sln {
        display: none;
    }

    #sln_mobile {
        display: block;
        margin-left: 8px;
       
    }



    #slnvideo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 285px;
        height: 327px;
        border:#742D2D 18px solid;
        border-radius: 54px;
        background-color: #742D2D;
        margin-left: 40px;
        margin-top: 125px;
        margin-bottom: 125px;
    }
 
 
 /* ------------------------------ FOOTER ----------------------------- */
  

    #coolimg {
        display: none;
    }
    
    
    footer {
        width: 100%;
        max-width: 360px;
    }

    #social {
        display: none;
    }

    #social_mobile {
        display: block;
    }
 
    #txtfooter {
        color: #FFFFFF;
        width: 117px;
        height: 127px;
        text-align: center;
        margin-left: 10px;
        margin-bottom: 50px;
    }
  
    
    #name {
        display: flex;
        flex-direction: column;
        margin-left: 80px;
        margin-top: 5px;
    

    }
    

    #technocrown {
        display: none;
    }

    #technocrown_mobile {
        display: block;
        margin-left: 5px;
    }

    #omeucu {
        margin-right: 10px;
    }

   


}