@media only screen and (max-width: 600px) {

    
    #burger {

        border: solid yellow 2px;
        width: 56px;
        
        

    }


    #chef {

        width: 78px; 
        margin-bottom: 10px;
        margin-right: 2px;

    }

    #oscar2 {

        height: 120px;
        margin-top: 2px;

    }
    
   
    #newFont {

        font-size: 36px;
        width: 98%;

    }


  
    #mainPicture {

        width: 97%;

        border: solid purple 4px;

    }

   
    #soir {

        font-size: 33px;
        margin-left: 15px;
        text-align: center;

    }

  button {

        height: 50px;
        background-color: #f0ad4e;
        color: white;
        font-size: 15px;
        margin: 6px;
        border-radius: 6px;
        border: solid white 3px;

    }

    a div .menus {


        width: 32%;
        height: 40px;
        padding-left: 14px;
        padding-right: 14px;

    }

    #newFont {


        font-size: 25px;

    }

    #containerHeader {


        margin-left: 4px;

    }


     .menuItem {

        width: 31%;
        font-size: 11px;
        height: 30px;
        padding-top: 15px;
        margin-bottom: 12px;
        font-weight: bold;

    }


    #message {

        font-size: 17px;
        font-weight: bold;


    }

    #inputField {


        width: 90%;

    }

   .styleTextInput {

        width: 65%;
        height: 65px;
        float: left;
        font-size: 20px;
        border: solid black 1px;
        padding-left: 10px;
        padding-right: 0px;

    }



    .headingDatabase {

        height: 42px;
        width: 98%;
        background-color: red;
        color: white;
        border: solid white 3px;
        font-size: 21px;
        text-align: center;
        padding-top: 12px;
       
    }



    .menuItem {

        width: 31%;
        font-size: 11px;
        height: 30px;
        padding-top: 12px;
        margin-bottom: 10px;
        margin-left: 3px;
        

    }


    .styleMainPic {

        margin-top: 0px;
        width: 92%;

    }

    input[type='radio'] { 
        transform: scale(2); 
        
    }

    #addEntry {


        width: 21%;
        height: 70px;
        font-size: 24px;

    }

     tr td {

        padding-top: 4px;
        font-size: 32px;
    

       
    
    }

    .red {

        width: 8px;

    }

    #addRemove {


        font-size: 24px;
        text-align: center;
        font-weight: bold;
        background-color: #DDDDDD;
        padding: 12px;
        border: solid red 2px;

    }

    
    
    #scratch {

        font-size: 15px;
        width: 49%;
        background-color: #7393B3;
        display: inline-block;
        margin: 0px;
        color: white;


    }

    #fromDatabase {

        width: 50%;
        background-color: #7393B3;
        display: inline-block;
        margin: 0px;

        color: white;

         font-size: 15px;


    }

    #message {

        font-size: 25px;

        text-align: center;


    }

    #textbox {

        width: 70%;
        height: 48px;
        border-radius: 6px;


    }

   .styleSubmit {

        width: 25%;
        margin-left: 4px;
        height: 53px;
        background-color: green;
        border-radius: 6px;
        border: solid white 2px;
        font-size: 25px;


    }

    .errorMessage {

        font-size: 20px;

        font-weight: bold;


    }

    #draw {

        height: 37px;
        padding-top: 14px;
        font-size: 25px;

        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 25px;


    }

    .modal {
        position: fixed; /* positioning in center of page */
        top: 40vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 200px; /* size */
        width: 350px;
        background-color: white;
        border: solid #1E90FF 4px; 
        font-size: 20px;
        padding: 20px;
        border-radius: 5px;
    }

    .stylePopupButtonImport {

        width: 45%;
        height: 40px;
        background-color: #50C878;
        border: solid lightgreen 2px;
        border-radius: 5px;
        font-size: 10px;
        color: white;
    

    }

    .stylePopupButtonCancel {

        width: 45%;
        height: 40px;
        background-color: #DDDDDD;
        border: solid #AAAAAA 2px;
        border-radius: 5px;
        font-size: 10px;
        margin-bottom: 19px;
        color: black;

    }

    .modal2 {
        position: fixed; /* positioning in center of page */
        top: 40vh;
        left: 46vw;
        transform: translate(-50%,-50%);
        height: 220px; /* size */
        width: 350px;
        background-color:white;
        border: solid #50C878 4px; 
        font-size: 20px;
        padding: 20px;
        border-radius: 5px;
    }


    #resto {

        font-size: 20px;

    }

    #nav {

        margin-top: 30px;

      


    }
    


}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

     #burger {

        border: solid green 2px;
        width: 75px;
        
        
        

    }

    #chef {

        width: 78px; 
        margin-bottom: 10px;
        margin-right: 2px;

    }

    #soir {

        font-size: 44px;
        margin-left: 35px;
        text-align: center;

    }

     .menuItem {

        width: 31.5%;
        font-size: 16px;
        height: 40px;
        margin-bottom: 12px;
        padding-top: 20px;
        margin-left: 3px;

    }


     #nav div {

        border-bottom: orange 2px;

        margin-bottom: 3px;

    }

      
    #scratch {

        font-size: 19px;
        width: 49%;
        background-color: #7393B3;
        display: inline-block;
        margin: 0px;
        color: white;

        padding: 20px;

        border-radius: 5px;
        border: solid white 2px;


    }

    #fromDatabase {

        width: 50%;
        background-color: #7393B3;
        display: inline-block;
        margin: 0px;

        color: white;

        font-size: 19px;

        padding: 20px;

        
        border-radius: 5px;
        border: solid white 2px;



    }

    #message {


        font-size: 35px;
        text-align: center;

    }

    #textbox {

        height: 62px;
        width: 70%;
        border-radius: 6px;

    }

    .styleSubmit {

        width: 26%;
        margin-left: 4px;
        height: 65px;
        background-color: green;
        border-radius: 6px;
        border: solid white 2px;
        font-size: 25px;


    }

     tr td span {

        padding-top: 0px;
        margin-bottom: 15px;

        padding-left: 1px;
        font-size: 37px;
        margin-top: 1px;

       
    
    }

    .red {

        width: 11px;
        margin-right: 9px;
        margin-bottom: 4px;

    }

     .errorMessage {

        margin-top: 3px;
        font-size: 26px;

        font-weight: bold;


    }

    #draw {

        height: 48px;
        padding-top: 14px;
        font-size: 32px;

        font-weight: bold;
        margin-top: 20px;


    }

    .modal {
        position: fixed; /* positioning in center of page */
        top: 40vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 260px; /* size */
        width: 70%;
        background-color: white;
        border: solid #1E90FF 4px; 
        font-size: 24px;
        padding-left: 40px;
        padding-top: 40px;
        padding-right: 18px;
        border-radius: 5px;
    }

    .stylePopupButtonImport {

    width: 45%;
    height: 55px;
    background-color: #50C878;
    border: solid lightgreen 2px;
    border-radius: 5px;
    font-size: 14px;
    color: white;
    

    }

    .stylePopupButtonCancel {

    width: 45%;
    height: 55px;
    background-color: #DDDDDD;
    border: solid #AAAAAA 2px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 19px;
    color: black;

    }



    .modal2 {
        position: fixed; /* positioning in center of page */
        top: 40vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 270px; /* size */
        width: 70%;
        background-color: white;
        border: solid #50C878 4px; 
        font-size: 24px;
        
        border-radius: 5px;
        padding-bottom: 18px;
        padding-left: 36px;
        padding-top: 22px;

        
    }

     #resto {

        font-size: 27px;
        padding: 12px;


    }

    #nav {

        margin-top: 16px;
        margin-bottom: 16px;

    }



}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) { 

      #burger {

        border: solid red 2px;
        margin-top: 0px;

        width: 92px;

        margin-right: 10px;
        
        

    }

    #chef {

        width: 120px;
        margin-bottom: 10px;

    }

     #soir {

        font-size: 55px;
        margin-left: 45px;
        

    }

    #scratch {

        font-size: 24px;
        width: 49%;
        background-color: #7393B3;
        display: inline-block;
        margin: 0px;
        color: white;

        padding: 33px;

        border-radius: 7px;
        border: solid white 2px;


    }

    #fromDatabase {

        width: 50%;
        background-color: #7393B3;
        display: inline-block;
        margin: 0px;

        color: white;

        font-size: 24px;

        padding: 33px;

        
        border-radius: 7px;
        border: solid white 2px;



    }

     #message {


        font-size: 44px;
        text-align: center;
        margin-top: 17px;

    }

    #textbox {

        height: 112px;
        width: 70%;
        border-radius: 6px;

    }

    .styleSubmit {

        width: 27%;
        margin-left: 4px;
        height: 112px;
        background-color: green;
        border-radius: 6px;
        border: solid white 2px;
        font-size: 40px;


    }

     tr td span {

        padding-top: 24px;
      
        font-size: 59px;
        height: 80px;
        padding-left: 0px;

       
    
    }

    .red {

        width: 20px;
        margin-right: 16px;

    }

     .errorMessage {

        margin-top: 3px;
        font-size: 35px;

        font-weight: bold;


    }

    #draw {

        height: 86px;
        padding-top: 22px;
        font-size: 50px;

        font-weight: bold;
        margin-top: 20px;


    }

    
   .menuItem {

        width: 31%;
        font-size: 20px;
        height: 49px;
        padding-top: 22px;
        margin-bottom: 12px;

    }


    .stylePopupButtonImport {

    width: 45%;
    height: 85px;
    background-color: #50C878;
    border: solid lightgreen 2px;
    border-radius: 5px;
    font-size: 19px;
    color: white;
    

    }

    .stylePopupButtonCancel {

    width: 45%;
    height: 85px;
   
    border: solid #AAAAAA 2px;
    border-radius: 5px;
    font-size: 19px;
    margin-bottom: 19px;
    margin-left: 12px;
    color: black;

    }


    .modal {
        position: fixed; /* positioning in center of page */
        top: 40vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 270px; /* size */
        width: 70%;
        background-color: white;
        border: solid #1E90FF 4px; 
        font-size: 25px;
        padding-left: 40px;
        padding-top: 60px;
        padding-right: 18px;
        border-radius: 5px;
    }

    
    .modal2 {
        position: fixed; /* positioning in center of page */
        top: 39vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 320px; /* size */
        width: 70%;
        background-color: white;
        border: solid #50C878 4px; 
        font-size: 28px;
        padding-left: 55px;
        padding-top: 40px;
        padding-right: 40px;
        border-radius: 5px;
    
        
    }

    #resto {

        font-size: 34px;
        padding: 12px;


    }
    

     #nav {

        margin-left: 12px;
        float: left;

    }





}

/* Large devices (laptops/desktops, 992px and up)*/ 
@media only screen and (min-width: 992px) {

     #burger {

        border: solid blue 2px;
        width: 68px;
        float: left;
        
        

    }

     #chef {

        width: 75px; 
        margin-bottom: 14px;
        

    }

    #soir {

        font-size: 42px;
        margin-right: 40px;
        margin-top: 12px;
        margin-left: 20px;
        

    }

   .menuItem {

        width: 173px;

        font-size: 14px;
        height: 33px;
        padding-top: 15px;
        margin-bottom: 0px;
        background-color: white;
        margin-left: 0px;

    }
    
    .styleImage {

        width: 540px;
        
        margin-top: 0px;


    }

    .headingDatabase {

        width: 547px;
        margin: auto;
        font-size: 22px;
        height: 33px;
        padding-top: 10px;
        border-radius: 5px;
        


    }

    #styleTable {

        width: 500px;
        margin: auto;

        font-size: 14px;

    }

    span {


        font-size: 17px;


    }

    #containerHeader {

        width: 570px;
        margin: auto;
       

      


    }

    .red {

        width: 8px;
        margin-right: 0px;
        

    }

    

    #header2 {


        width: 550px;
        margin: auto;
        height: 76px;


    }

    tr td {

        vertical-align: top;
       
        font-size: 27px; 

        height: 21px;
        padding-left: 0px;
        padding-top: 1px;


    }

    

    #message {

        font-size: 24px;
        padding: 0px;
        margin-top: 10px;
        margin-bottom: 12px;
        width: 550px;


    }

   .styleMainPic {

        margin: 0px;
        vertical-align: top;
       

        width: 600px;

        margin-top: 10px;


   }

   .styleTextInput {

    height: 49px;
    width: 74%;
    padding: 0px;



   }

   .styleSubmit {

        height: 53px;
        font-size: 25px;
        width:  198px;

   }

   input[type='text'] { 

    font-size: 25px;
    margin-top: 0px;
    padding-left: 0px;


    }

    .styleSubHeader {

        margin-bottom: 2px;


    }

     input[type='radio'] { 
        transform: scale(2); 

        margin-right: 8px;


    }

    #nav div {

        border-bottom: orange 2px;

        margin-bottom: 3px;

    }

    #addEntry {


        width: 22%;
        font-size: 24px;

    }

    #scratch {

        height: 40px;
        font-size: 16px;
        background-color: #7393B3;
        width: 270px;
        padding-top: 15px;
        color: white;
        margin-left: 3px;
       

    }

   #fromDatabase  {

        height: 40px;
        font-size: 16px;
        background-color: #7393B3;
        width: 270px;
        padding-top: 14px;
      
        border-radius: 5px;
        border: solid white 2px;
        color: white;
       

    }
    
    tr td span {

        font-size: 30px;
        height: 28px;

        margin-left: 2px;
        

    }

    #textbox {

        height: 50px;
        width: 340px;

    }

    #draw {

        height: 37px;
        font-size: 25px;
        padding-top: 12px;
        width: 542px;

    }

     #resto {

        font-size: 24px;
        padding: 12px;
        width: 490px;
        border-radius: 6px;


    }

    .errorMessage {

        font-size: 20px;
        margin-left: 33px;

    }

    .styleSubHeader {

        text-align:  center;
        font-size: 30px;

    }

    #nav {

        width: 545px;
        margin-top: 0px;
        margin-bottom: 2px;
        margin-left: 8px;

    }

    .modal {
        position: fixed; /* positioning in center of page */
        top: 40vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 200px; /* size */
        width: 400px;
        background-color: white;
        border: solid #1E90FF 4px; 
        font-size: 21px;
        padding-left: 40px;
        padding-top: 20px;
        padding-right: 18px;
        padding-bottom: 20px;
        border-radius: 5px;
    }

    .stylePopupButtonCancel {

    width: 46%;
    height: 43px;
   
    border: solid #AAAAAA 2px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 19px;
    margin-left: 12px;
    color: black;

    }

    
    .stylePopupButtonImport {

    width: 46%;
    height: 43px;
    background-color: #50C878;
    border: solid  lightgreen 2px;
    border-radius: 5px;
    font-size: 14px;
    color: white;
    

    }

     .modal2 {
        position: fixed; /* positioning in center of page */
        top: 39vh;
        left: 49vw;
        transform: translate(-50%,-50%);
        height: 250px; /* size */
        width: 395px;
        background-color: white;
        border: solid #50C878 4px; 
        font-size: 22px;
        padding-left: 40px;
        padding-top: 40px;
        padding-right: 40px;
        border-radius: 5px;
        
    
        
    }

    form {

        width: 554px;



    }


   



}