/* base container */
.container-home{
    height:auto;
    width: 90vw;

    margin:auto;
    padding: 10px;

    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(4fr);

}

/*picture*/
.container-pictures{
    height:auto;
    width: 90vw;

    margin:auto;
    padding: 20px;


    display: flex;

    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    gap: 1em;
}

.container-fee{
    height:auto;
    width: 90vw;

    margin:auto;
    padding: 10px;

}

.container-contact{
    height:auto;
    width: 90vw;

    margin:auto;
    padding: 10px;


}



/*course page containers*/
.container {
    height:auto;
    width: 90vw;

    margin:auto;
    padding: 10px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(4, fr);

    gap: 10px;
}
.techCommunication{
    grid-template-areas: 
    "overview objectives modules"
    "overview schedule modules"
    "assessment schedule material"
    "assessment instructor material";
}
.creative{

    grid-template-areas: 
    "overview overview overview"
    "objectives schedule modules"
    "assessment assessment material"
    "instructor instructor instructor";
}
.computerMath{
    grid-template-areas: 
    "overview objectives objectives"
    "overview schedule modules"
    "overview assessment material"
    "overview instructor instructor";

}
.programming{
    grid-template-areas: 
    "overview objectives modules"
    "overview schedule modules"
    "overview schedule modules"
    "material assessment instructor";

}
.webDevelopment{
    grid-template-areas: 
    "overview objectives schedule"
    "overview objectives schedule"
    "modules assessment instructor"
    "material assessment instructor";
}
.dataCommunication{
    grid-template-areas: 
    "overview objectives objectives"
    "overview material modules"
    "schedule material assessment"
    "instructor instructor assessment";
}

/*course info sections*/
.item {
    padding: 4px;
    border-radius: 2%;
    border: 1px solid black;

    background-color: lightblue;

    text-align: center;

    h1{ font-weight: bold; font-size:x-large; color: rgb(1, 29, 58); }   
    h2 {font-size: large; color: rgb(24, 41, 41);}   

}
.item-1
{
grid-area: overview;}
.item-2
{
grid-area: objectives;}
.item-3
{
grid-area: schedule;}
.item-4
{
grid-area: modules;}
.item-5
{
grid-area: assessment;}
.item-6
{
grid-area: material;}
.item-7
{
grid-area: instructor;}




/*constant header & footer*/
.header, .footer{
    background-color: aquamarine;
    color: black;
    padding: 10px;

    text-align: center;
    /*font-family: sans-serif;*/
    font-weight: bold;
}
.header{
    font-size: large;
    word-spacing: 50px;
}
.footer{
    height: 15vh;
    word-spacing: 5px;
    p {font-size:small;}
}




/*home page*/
.card{ 
    max-width: 28vw;
    height: auto;
    
    text-align: center;
    font-size: x-small;


    border: 1px solid black;
    border-radius: 5%;
    background-color: white;
    justify-content: center;

    img{max-width:100%;border-radius:5%; }
    h1{color: rgb(0, 139, 107);}
}
.card:hover{
    box-shadow: 0px 0px 12px 0 grey;
}


.bubble{
    max-width: 25vw;
    img{ max-width: 100%; border-radius:30%; }
}






/*general text*/
a{ text-decoration: none; color: black;}