html,
body {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0px;
    overflow: scroll;
    justify-content: center;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

body {
    background-image: url("./assets/images/pencilsRegister.jpg");;
}

#navBar {
    background-color: rgba(67, 184, 219, 0.795);
    height: 10vh;
}

#logo {
    margin-top: .4%;
    height: 8.5vh;
    width: 5vw;
    border-radius: 50%;
    border: 3px solid pink;
}

#homeLinks1,#homeLinks2,#homeLinks3,#homeLinks4 {
    font-weight: bold;
    margin-right: 1%;
    margin-top: 1.5%;
    float: right;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 10px;
    border: none;
    width: 6vw;
    height: 4vh;
    text-align: center;
}

#homeLinks1 {
    background-color: rgb(192, 122, 192);
}

#homeLinks2 {
    background-color: rgb(81, 62, 165);
}

#homeLinks3 {
    background-color: rgb(64, 145, 99);
}

#homeLinks4 {
    background-color: rgb(196, 70, 70);
}

#homeLinks1:hover
{
    box-shadow:
    1px 1px rgb(248, 200, 111),
    3px 3px rgb(248, 200, 111),
    5px 5px rgb(248, 200, 111);
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
}

#homeLinks2:hover
{
    box-shadow:
    1px 1px rgb(248, 200, 111),
    3px 3px rgb(248, 200, 111),
    5px 5px rgb(248, 200, 111);
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
}

#homeLinks3:hover
{
    box-shadow:
    1px 1px rgb(248, 200, 111),
    3px 3px rgb(248, 200, 111),
    5px 5px rgb(248, 200, 111);
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
}

#homeLinks4:hover
{
    box-shadow:
    1px 1px rgb(248, 200, 111),
    3px 3px rgb(248, 200, 111),
    5px 5px rgb(248, 200, 111);
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
}

#container1 {
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    border: 3px rgb(67, 184, 219) solid;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 15px;
    background-color: rgba(255, 255, 255, .15);
}

#indexJumbo {
    margin: 7%;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-right: 0;
    padding-left: 0;
    background-color: rgba(99, 188, 230, 0.932);
    border-radius: 10px;
}

#arborHeadLine {
    color: white;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

#jumboLine {
    color: darkgreen;
}

#dayCareImg {
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    display: block;
    height: 40vh;
}

#homeDetails {
    color: white;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: x-large;
    text-align: center;
}

.container2Col{
    padding-left: 2%;
    padding-right: 2%;
}

.container2Home {
    background-color: rgba(150, 161, 221, 0.959);
    border: 2px rgb(101, 118, 211) solid;
    padding: 7%;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

#title1 {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
}

#title2 {
    color: black;
}

#content {
    color: black;
}

.container3Home {
    background-color: rgba(232, 255, 179, 0.952);
    border: 2px rgb(142, 179, 8) solid;
    padding: 7%;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

#container4 {
    background: linear-gradient(90deg, rgba(99, 168, 187, 0.856) 0%, rgba(111, 121, 197, 0.856) 73%);
    border-radius: 5px;
    border: 3px rgba(53, 53, 53, 0.856) solid;
}

#learnPic {
    height: 25vh;
    width: 15vw;
    margin: 2%;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

#imageHeader2 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    font-family: 'Cabin Sketch';
    color: white
}

#programImg {
    height: 25vh;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    display: block;
}

#aboutUsCont1 {
    margin-top: 5%;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 15px;
    border: 3px rgb(245, 80, 113) solid;
    background-color: rgba(255, 255, 255, .15);
}

#aboutUsImg {
    height: 40vh;
    margin: auto;
    display: block;
}

#curImg {
    height: 40vh;
    justify-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#staffImg {
    height: 55vh;
    margin-top: 3%;
    margin-right: auto;
    margin-left: auto;
}

#outDoorImg {
    height: 55vh;
    margin-top: 3%;
    margin-right: auto;
    margin-left: auto;
    
}

#aboutUsCont2 {
    background-color: rgba(230, 132, 152, 0.945);
    border-radius: 10px;
    margin: 7%;
    padding: 2%;
}


#title3 {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    color: whitesmoke;
    text-align: center;
}

#contactArea1 {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    justify-content: center;
    display: block;
    margin-top: 5%;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 15px;
    border: 3px rgba(137, 199, 250, 0.925) solid;
    background-color: rgba(255, 255, 255, .15);
}

#contactArea2 {
    background-color: rgba(34, 101, 156, 0.938);
    border-radius: 10px;
    margin: 5%;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 7%;
}

#contactImg {
    border-radius: 35px;
    margin: 10%;
    box-shadow: 10px 10px 0px #00e6e6,
                 20px 20px 0px #01cccc,
                 30px 30px 0px #00bdbd;
}

#containerJumbo {
    margin-top: 8%;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 15px;
    border: 3px rgb(255, 255, 110) solid;
    background-color: rgba(255, 255, 255, .15);
}

#formJumbo {
    background-color: rgba(252, 252, 238, 0.973);
    margin: 7%;
    border-radius: 10px;
}

#detailsForm {
    font-family: 'Cabin Sketch';
    display: inline-block;
    text-align: center;
}

#registerCont {
    background-color: rgba(187, 187, 187, 0.308);
}

#footer {
    background-color: rgba(67, 184, 219, 0.795);
    height: 7vh;
    margin-top: 5%;
    padding-top: 1%;
    text-align: center;
    color: rgb(212, 212, 212);
}

#footer2 {
    background-color: rgba(67, 184, 219, 0.795);
    margin-top: 7%;
    height: 7vh;
    padding-top: 1%;
    text-align: center;
    color: rgb(212, 212, 212);
}






@media (max-width: 1025px) {

    html,
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

#homeLinks1, #homeLinks2, #homeLinks3, #homeLinks4 {
    font-size: small;
    width: 7vw;
    margin-top: 3.5%;
}

#logo {
    margin-top: 1%;
    height: 8.5vh;
    width: 12vw;
}

#programImg {
    height: 15vh;
}

#learnPic {
    height: 15vh;
    width: 18vw;
}

#title3 {
    font-size: 2.5rem;
}

#aboutUsCont2 {
    width: 80vw;
}

#aboutUsImg {
    height: 30vh;
}

#staffImg {
    height: 37vh;
}

#outDoorImg {
    height: 25vh
}

#curImg {
    height: 35vh;
}

}

@media (max-width: 769px) {

    
    html,
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #homeLinks1, #homeLinks2, #homeLinks3, #homeLinks4 {
        width: 9vw;
    }

    #programImg {
        height: 25vh;
    }

    #title1{
        font-size: 2.5rem;
    }

    #mission {
        font-size: 1.3rem;
    }

    #title3 {
        font-size: 2.5rem;
    }
    
    #aboutUsCont2 {
        width: 80vw;
    }
    
    #aboutUsImg {
        height: 30vh;
    }
    
    #staffImg {
        height: 37vh;
    }

    #outDoorImg {
        height: 25vh
    }
    
    #curImg {
        height: 35vh;
    }

    #googleForm {
        width: 65vw;
    }
}

@media (max-width: 415px) {

    html,
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #homeLinks1, #homeLinks2, #homeLinks3, #homeLinks4 {
        width: 14vw;
        font-size: x-small;
        margin-top: 5%;
    }
    
    #arborHeadLine {
        font-size: 1.5rem;
    }
    
    #logo {
        margin-top: 1%;
        height: 8.5vh;
        width: 17vw;
    } 

    #dayCareImg {
        height: 20vh;
    }

    #homeDetails {
        font-size: x-small;
        text-align: inherit;
    }

    #programImg {
        height: 25vh;
    }

    #title1 {
        font-size: 1.5rem;
    }

    #content {
        font-size: small;
    }

    #imageHeader {
        font-size: 1.5rem;
    }

    #imageHeader2 {
        font-size: 1rem;
    }
    
    #learnPic {
        height: 10vh;
        width: 18vw;
    }

    #mission {
        font-size: 1.3rem;
    }

    #title3 {
        font-size: 2.5rem;
    }
    
    #aboutUsCont2 {
        width: 80vw;
    }
    
    #aboutUsImg {
        height: 18vh;
    }
    
    #staffImg {
        height: 22vh;
    }
    
    #outDoorImg {
        height: 25vh
    }
    
    #curImg {
        height: 22vh;
    }

    #contactImg {
        height: 20vh;
    }

    #googleForm {
        width: 65vw;
    }
}

@media (max-width: 376px) {

    html,
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #homeLinks1, #homeLinks2, #homeLinks3, #homeLinks4 {
        width: 14vw;
        font-size: x-small;
        margin-top: 5%;
    }
    
    #arborHeadLine {
        font-size: 1.5rem;
    }
    
    #logo {
        margin-top: 1%;
        height: 8.5vh;
        width: 17vw;
    } 

    #dayCareImg {
        height: 20vh;
    }

    #homeDetails {
        font-size: x-small;
        text-align: inherit;
    }

    #programImg {
        height: 25vh;
    }

    #title1 {
        font-size: 1.5rem;
    }

    #content {
        font-size: small;
    }

    #imageHeader {
        font-size: 1.5rem;
    }

    #imageHeader2 {
        font-size: 1rem;
    }
    
    #learnPic {
        height: 10vh;
        width: 18vw;
    }

    #mission {
        font-size: 1.3rem;
    }

    #title3 {
        font-size: 2.5rem;
    }
    
    #aboutUsCont2 {
        width: 80vw;
    }
    
    #aboutUsImg {
        height: 18vh;
    }
    
    #staffImg {
        height: 22vh;
    }

    #outDoorImg {
        height: 20vh
    }
    
    #curImg {
        height: 22vh;
    }

    #contactImg {
        height: 20vh;
    }

    #googleForm {
        width: 65vw;
    }
}

@media (max-width: 361px) {
    
    html,
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #homeLinks1, #homeLinks2, #homeLinks3, #homeLinks4 {
        width: 14vw;
        font-size: x-small;
        margin-top: 5%;
    }
    
    #arborHeadLine {
        font-size: 1.5rem;
    }
    
    #logo {
        margin-top: 1%;
        height: 8.5vh;
        width: 17vw;
    } 

    #dayCareImg {
        height: 20vh;
    }

    #homeDetails {
        font-size: x-small;
        text-align: inherit;
    }

    #programImg {
        height: 25vh;
    }

    #title1 {
        font-size: 1.5rem;
    }

    #content {
        font-size: small;
    }

    #imageHeader {
        font-size: 1.5rem;
    }

    #imageHeader2 {
        font-size: 1rem;
    }
    
    #learnPic {
        height: 10vh;
        width: 18vw;
    }

    #mission {
        font-size: 1.3rem;
    }

    #title3 {
        font-size: 2.5rem;
    }
    
    #aboutUsCont2 {
        width: 80vw;
    }
    
    #aboutUsImg {
        height: 18vh;
    }
    
    #staffImg {
        height: 22vh;
    }

    #outDoorImg {
        height: 25vh
    }
    
    #curImg {
        height: 22vh;
    }

    #contactImg {
        height: 20vh;
    }

    #googleForm {
        width: 65vw;
    }
}

@media (max-width: 321px) {

    html,
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #homeLinks1, #homeLinks2, #homeLinks3, #homeLinks4 {
        width: 14vw;
        font-size: x-small;
        margin-top: 5%;
    }
    
    #arborHeadLine {
        font-size: 1.5rem;
    }
    
    #logo {
        margin-top: 1%;
        height: 8.5vh;
        width: 17vw;
    } 

    #dayCareImg {
        height: 20vh;
    }

    #homeDetails {
        font-size: x-small;
        text-align: inherit;
    }

    #programImg {
        height: 25vh;
    }

    #title1 {
        font-size: 1.5rem;
    }

    #content {
        font-size: small;
    }

    #imageHeader {
        font-size: 1.5rem;
    }

    #imageHeader2 {
        font-size: 1rem;
    }
    
    #learnPic {
        height: 10vh;
        width: 18vw;
    }

    #mission {
        font-size: 1.3rem;
    }

    #title3 {
        font-size: 2.5rem;
    }
    
    #aboutUsCont2 {
        width: 80vw;
    }
    
    #aboutUsImg {
        height: 18vh;
    }
    
    #staffImg {
        height: 22vh;
    }

    #outDoorImg {
        height: 25vh
    }
    
    #curImg {
        height: 22vh;
    }

    #contactImg {
        height: 20vh;
    }

    #googleForm {
        width: 65vw;
    }
}