/* for editing reference... viewport is 1440px × 900px */
/* maximum phone width is about 640px landscape mode, 
however, in vertical, it is 480px*/

*{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 font-size: 20px;
}

html{
    background-color:lightblue;
    margin: 20px;
}

/*new stuff messing with grids*/

.header_grid{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   }
   .header_grid li{
    padding: 2%;
   }

/*new stuff messing with grids*/


header{
    padding: 5%;
    overflow: hidden;
}

.everything-except-header{
    background-color:papayawhip;
    padding: 5%;
}


.finishedcake{
    max-width: 600px;
   /*padding: 15%;*/
}

 
    .timing{
    box-sizing: border-box;
    padding-bottom: 20px;
    margin-top: 100px;
    font-size: 1.3rem;
    text-align: center;
    }

    .based{
        box-sizing: border-box;
     padding-bottom: 20px;
     font-size: 1.2rem;
     opacity: 40%;
     font-style: italic; 
     text-align:center;
     
    }
    

h1{
 color: whitesmoke;
font-size: 4rem;
 margin-top: -5px;
 text-align: center;
}

#warning{
    text-align:center;
    color: #000000;
 font-weight: 600;

}
.primaryh2{
color: darkslategray
}

.secondaryh2{
 color: darkslategray;
 font-weight: 400;

}
div{
    padding-left: 10%;
     padding-right: 10%
   }

.introduction{
color: #6c6e79;}

/*.prep{}
.instructions{}*/

.steps{
    list-style-type: none;
}

.steps li{
    padding: 12px;
}

.pictor-example{
    width: 270px;
    padding: 25px;
    position: relative;
}

.minilist{
 list-style-type: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.minilist span{
    position:absolute;
    text-align: center;
    margin-left: -200px;
   opacity: 50%;
   }

   .pictorSMALL{
    width: 180px;
   }

.img_tools{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


aside{
    background-color: white;
    padding-top: 20px;
    padding-bottom: 20px;
}

.references{
    padding-top: 5%;
    font-size: 0.7rem;
    color: dimgrey;
}

a{
    font-size: 1.2rem;
   }
   

/*------media queries zone past this zone, enter with caution--------*/














/*---------------------------------------------------------------------*/

@media(max-width: 480px){
    *{
        font-size: .9rem;
    }
}



@media(max-width: 605px){
    ul{
    width: 70%;
    }
}

@media(max-width: 338px){
    aside{
    display:none;
     }
 }
 
 @media(max-width: 400px){
    .pictor-example{
    scale: 70%;
     margin-right: 50px;
     }
 }



@media(min-width: 300px) and (max-width: 606px){
    .finishedcake{
   max-width: 800px;
     }
 }

 @media(min-width: 300px) and (max-width: 606px){
    header{
   margin-top: -25%;
     }
 }