@import url(CSSReset.css);
@import url(SCDNavbarCSS.css);


body{
    background-color: aliceblue;
}
#maincontent{
    display: grid;
    width:99vw;
    grid-template-areas: 
    "CP CPI"
    "RCI RC"
    "CF CFI"
    "CDI CD"
    "SP SPI"
    "CI C"
    "CS CSI"
    "SSI SS";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    row-gap: 40px;
    padding:20px;
}

#CP{
    grid-area: CP;
}
#RC{
    grid-area: RC;
}
#CF{
    grid-area: CF;
}
#CD{
    grid-area: CD;
}
#SP{
    grid-area: SP;
}
#C{
    grid-area: C;
}
#CS{
    grid-area: CS;
}
#SS{
    grid-area: SS;
}

#CPI{
    grid-area: CPI;
}
#RCI{
    grid-area: RCI;
}
#CFI{
    grid-area: CFI;
}
#CDI{
    grid-area: CDI;
}
#SPI{
    grid-area: SPI;
}
#CI{
    grid-area: CI;
}
#CSI{
    grid-area: CSI;
}
#SSI{
    grid-area: SSI;
}

.insdiegrid{
   justify-items: center;
   justify-self: center;
   text-align: center;
}
#title{
    font-size: 40px;
    justify-self: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
h2{
    font-size: 25px;
}
.images{
    width:300px;
    height: auto;
}

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

    #maincontent{
    grid-template-areas: 
    "CP"
    "CPI"
    "RC"
    "RCI"
    "CF"
    "CFI"
    "CD"
    "CDI"
    "SP"
    "SPI"
    "C"
    "CI"
    "CS"
    "CSI"
    "SS"
    "SSI";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    row-gap: 20px;
    padding:20px;
}
}