* {
    box-sizing: border-box;
  }

body{
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px;
    padding: 0px;
}

#container{
    display: grid;
    grid-auto-rows:minmax(0px, auto);
    grid-template-columns: minmax(0px, 1fr) repeat(5, minmax(0px, 192px) minmax(0px, 1fr));
    margin: 0px;
    padding: 0px;
}

#logo{
    grid-area: 1 / 2 / 1 / -2;
    background-image: url("images/Logo_Horizontal.png");
    background-repeat: no-repeat;
    height: 245px;
    background-size: contain;
    background-position: center;
    background-color: #F1B5A2;
}

nav{
    grid-area: 2 / 2 / 2 / -2;
    background-color: white;
    top: 0;
    position: sticky;
}

nav ul{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18pt;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
}

nav ul li{
    width: 100%;
}

nav a{
    text-decoration: none;
    text-align: center;
    padding: 1rem 0rem;
    display: block;
    color:#472144;
    opacity: 1;
    transition: 0.6s;
}

nav a:hover{
    opacity: 1;
    color:#CB8AA6;
    margin: 0rem;
    padding: 1rem 0rem;
}

#mainimage{
    grid-area: 3 / 2 / 3 / -2;
    height: 466px;
    background-image: url("images/home_img.png");
    background-position: center;
    background-size: contain;
    background-color: #A44D9D;
    background-repeat: no-repeat;
}

#enrollimage{
    grid-area: 3 / 2 / 3 / -2;
    height: 466px;
    background-image: url("images/enroll_img.png");
    background-position: center;
    background-size: contain;
    background-color:#379CD6;
    background-repeat: no-repeat;
}

#classinfoimage{
    grid-area: 3 / 2 / 3 / -2;
    height: 466px;
    background-image: url("images/classinfo_img.png");
    background-position: center;
    background-size: contain;
    background-color:#CB8AA6;
    background-repeat: no-repeat;
}

#meetimage{
    grid-area: 3 / 2 / 3 / -2;
    height: 466px;
    background-image: url("images/classinfo_img.png");
    background-position: center;
    background-size: contain;
    background-color:#CB8AA6;
    background-repeat: no-repeat;
}

#contactimage{
    grid-area: 3 / 2 / 3 / -2;
    height: 466px;
    background-image: url("images/contactimage.png");
    background-position: center;
    background-size: cover;
}


main{
    grid-area: 4 / 2 / 8 / -2;
    background-color: #F1B5A2;
}

a{
    text-decoration: none;
    color: white;
}

h3{
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    font-size: 30pt;
    margin: 0px;
    padding: 0px;
}

h4{
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    font-size: 27pt;
    margin: 0px;
    padding: 0px;
}

h5{
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    font-size: 24pt;
    margin: 0px;
    padding: 0px;
}

.specialtext{
    font-style: italic;
    font-size: large;
}

ul{
    list-style: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 21pt;
    color: white;
    text-align: left;
    margin-top: 0px;
}

p{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 21pt;
    color: white;
    text-align: left;
    padding: 0px;
    margin-top: 0px;
}

.infoboximageholder{
    width: 315px;
    height: 315px;
    float: left;
    margin-right: 20px;
}

#infoboximage1{
    background-image: url("images/student_img_50p.png");
    background-position: center;
    background-size: cover;
    height: 315px;

}

#infoboximage2{
    background-image: url("images/student2_img_50p.png");
    background-position: center;
    background-size: cover;
    height: 315px;
}

#TeacherImg{
    background-image: url("images/Cara_Img_2.png");
    background-repeat: no-repeat;
    height: 473px;
    background-size: contain;
    background-position: center;
}

#summercampsinfo{
    background-image: url("images/Classes-Schedule_summer_22.png");
    background-repeat: no-repeat;
    height: 1000px;
    background-size: contain;
    background-position: center;
}

.infobox{
    width: auto;
    height: 315px;
    margin-top: 10px;
    margin-bottom: 50px;
    margin-right: 10px;
    margin-left: 10px;
}

.infobox h3, p{
    margin-right: 20px;
}

#pageinfo{
    width: auto;
    margin-top: 10px;
    margin-bottom: 50px;
    margin-right: 10px;
    margin-left: 10px;
}

.breakfloat{
    float: none;
}

#rainbow{
    grid-area: 11 / 2 / 11 / -2;
    padding:0px;
    margin:5px;
    background-image: url("images/Footer_Logo.png");
    background-repeat: no-repeat;
    height: 75px;
    background-size: contain;
    background-position: center;
}

footer{
    grid-area: 12 / 2 / 12 / -2;
    background-image: url("images/navbar_bg.png");
    height: 120px;
    text-align: center;
    margin: 0px;
}

footer p{
    color: white; 
    font-size: 12pt;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

/*form{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 200px 1fr;
    width: 75%;
    gap: 0.5rem;
}

input{
    padding: 5px;
    color: white;
    background-color: #ffdbd0;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2rem;
}

textarea{
    font-size: 2rem;
    padding: 10px;
    color: white;
    background-color: #ffdbd0;
    border: none;
}

input [type=text]:focus {
    outline: none;
    background-color: #ffdbd0;
}

textarea [type=text]:focus {
    outline: none;
    background-color: #ffdbd0;
}

label{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2rem;
    padding: 5px;
    text-align: right;
    color: white;
}

#submit{
    width: 10rem;
    grid-column: 2 / 3;
    background-color: #379CD6;
}*/

@media only screen and (max-width: 992px){
    #container{
        display: grid;
        grid-auto-rows: minmax(0px, auto);
        grid-template-columns:minmax(0px, 1fr) repeat(5, minmax(0, 153.6px)) minmax(0px, 1fr);
    }

    nav{
        grid-area: 2 / 2 / 2 / -2; 
    }
    
    nav a{
        font-size: 12pt;
    }

    #logo{
        grid-area: 1 / 1 / 1 / -1;
    }

    h3{
        font-size: 21pt;
    }

    h4{
        font-size: 19pt;
    }
    
    h5{
        font-size: 17pt;
    }
    
    ul{
        font-size: 16pt;
    }

    p{
        font-size: 16pt;
    }

    #mainimage{
        height: 350px;
    }

    #enrollimage{
        height: 350px;
    }

    #classinfoimage{
        height: 350px;
    }

    #meetimage{
        height: 350px;
    }

    #contactimage{
        height: 350px;
    }

    #summercampsinfo{
        height: 750px;
    }

    .infoboximageholder{
        width: 200px;
        height: 200px;
        float: left;
        margin-right: 20px;
    }

    #infoboximage1{
        height: 200px;
    }

    #infoboximage2{
        height: 200px;
    }

    #TeacherImg{
        height: 200px;
    }

    .infobox{
        width: auto;
        height: 200px;
        margin-top: 10px;
        margin-bottom: 50px;
        margin-right: 10px;
        margin-left: 10px;
    }

    /*form{
        grid-template-columns: 150px 1fr;
    }*/
    
    input{
        font-size: 1rem;
    }
    
    textarea{
        font-size: 1rem;
    }
    
    label{
        font-size: 1rem;
    }
    
}

@media only screen and (max-width: 768px){
    #container{
        display: grid;
        grid-auto-rows: minmax(0px, auto);
        grid-template-columns: 0fr 0fr 100% 0fr 0fr;
    }

    #logo{
        grid-area: 1 / 1 / 1 / -1;
        background-image: url("images/Logo_new.png");
    }

    nav ul{
        flex-flow: column nowrap;
    }

    h3{
        font-size: 14pt;
    }

    h4{
        font-size: 13pt;
    }
    
    h5{
        font-size: 12pt;
    }

    .specialtext{
        font-style: italic;
        font-size:smaller;
    }
    
    ul{
        font-size: 10pt;
    }

    p{
        font-size: 10pt;
    }

    #mainimage{
        height: 200px;
    }
    #enrollimage{
        height: 200px;
    }

    #classinfoimage{
        height: 200px;
    }

    #meetimage{
        height: 200px;
    }

    #contactimage{
        height: 200px;
    }

    #summercampsinfo{
        height: 500px;
    }

    .infoboximageholder{
        width: 100%;
        height: 125px;
        float: none;
        margin-right: 0px;
    }

    #infoboximage1{
        height: 125px;
        width: 125px;
    }

    #infoboximage2{
        height: 125px;
        width: 125px;
    }

    #TeacherImg{
        height: 125px;
        /*width: 125px;*/
    }

    .infobox{
        width: auto;
        height: 230px;
        margin-bottom:10px;
    }

    /*form{
        width: 20%;
    }*/

    footer{
        background-image: url("images/navbar_bg_small.png");
    }

    footer p{
        font-size: 10pt;
    }
}