*{
    box-sizing: border-box;
    /*border: 1px solid black;  for testing purposes*/
    background-color: #4b3190;
    font-family: Arial, Helvetica, sans-serif;
}

.grid-container{        /*styling the home page*/
    width:90%;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 255px 150px 500px 500px 500px;
}

/*.item{
    outline: 1px solid black;
    
}*/

.a{
    grid-column: 1 / 6;
    grid-row: 1 / 2;
    text-align: center; 
    padding-bottom: -15px;
    background-color: aliceblue;
    .logo{
        max-height: 198px;
        max-width: 200px;
        float: left;
        background-color: aliceblue;
        padding-bottom: 15px;
    }
    .site-title{
        font-size: 75px;
        background-color:#fdbb30;

    }
}

.b{
    grid-column: 1 / 6;
    grid-row: 2 / 3;
    text-align: center; 
    background-color: #fdbb30;
    h1{
        background-color: #fdbb30;
    }
    p{
        background-color: aliceblue;
    }
}

.c{
    grid-column: 1 / 3;
    grid-row: 3 / 4; 
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    background-color: aliceblue;
    padding: 15px;
    padding-bottom: 20px;
    
    /*.qr{
        background-color: aliceblue;
        h2{
            background-color: aliceblue;

        }
    }
    /*.app-info{
        background-color: aliceblue;
        
        h2{
            background-color: aliceblue;

        }
        p{
            background-color: aliceblue;
        }

    }*/
}

.qr{
    grid-column: 1 / 2;
    grid-row: 1;
    text-align: center; 
    background-color: #ffffff00;
    img{
        max-width: 300px;
        max-height: fit-content;
    }
}

.app-info{
    grid-column: 2 / 3;
    grid-row: 1;
    text-align: center; 
    padding-left: 300px;
    background-color: #ffffff00;
    .explanation{
        
        outline: 3px black solid;
        max-width: 600px;
        min-width: 300px;
        h2{
            background-color: #fdbb30;
            padding-top: 10px;
        }
        p{
            font-size:x-large;
            background-color: aliceblue;
        }

    }
    
}

.d{
    grid-column: 3 /7;
    grid-row: 4 / 3;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    background-color:#4b3190;  
    padding-top: 20px; 
    /*.repairContainer{
        background-color:#fdbb30;   

    }
    .classContainer{
        background-color:#fdbb30;   

    }*/
    h3{
        background-color:#fdbb30;   
    }
}
.classes{
    grid-column: 1 / 2;
    grid-row: 1;
    background-color: #fdbb30;

}
.repairs{
    grid-column: 2 / 3;
    grid-row: 1;
    background-color: #fdbb30;

}

/*.classContainer ul{
    padding-bottom: 50px;
}*/

.poat{
    background-color: rgba(127, 255, 212, 0.582);
    outline: 2px solid black;
    height: 60px;
}

.aefOne{
    background-color:rgba(210, 105, 30, 0.699);
    outline: 2px solid black;
    height: 80px;

}

.aefTwo{
    background-color:darkgray;
    outline: 2px solid black;
    height: 80px;

}

.mdtaa{
    background-color:darkseagreen;
    outline: 2px solid black;
    height: 80px;

}

.ascs{
    background-color:rgba(187, 162, 53, 0.808);
    outline: 2px solid black;
    height: 80px;
}

.cas{
    background-color:rgba(199, 81, 126, 0.856);
    outline: 2px solid black;
    height: 60px;
}

.abs{
    background-color:rgb(150, 77, 77);
    outline: 2px solid black;    
    height: 45px;
}

.accs{
    background-color:rgb(10, 129, 145);
    outline: 2px solid black;
    height: 45px;
}

.adad{
    background-color:rgba(16, 141, 83, 0.808);
    outline: 2px solid black;
    height: 60px;
}

.atat{
    background-color:rgba(212, 55, 68, 0.753);
    outline: 2px solid black;
    height: 60px;
}

.repairContainer ul li{
    background-color:aliceblue;
    list-style-type: disc;
    margin-right: 40px;
}

@media only screen and (max-width: 768px) {
    .a{
        text-align: left;
    }
    .app-info {
      padding-left: 0px;
    }
    .poat{
        height: fit-content;
    }
    .aefOne{
        height: fit-content;
    }
    .aefTwo{
        height: fit-content;
    }
    .mdtaa{
        height: fit-content;
    }
    .ascs{
        height: fit-content;
    }
    .cas{
        height: fit-content;
    }
    .abs{
        height: fit-content;
    }
    .accs{
        height:fit-content;
    }
    .adad{
        height: fit-content;
    }
    .atat{
        height: fit-content;
    }
  }

@media only screen and (max-width: 360px) {
    .c{
        grid-column: 1 / 3;
        grid-row: 3 / 5; 
    }
    .d{
        grid-column: 1 / 6;
        grid-row: 5 / 6;
    }

    .qr{
        grid-column: 1 / 3;
        grid-row: 3 / 4; 
        max-width:fit-content;
    }

    .app-info {
        padding-left: 0px;
        grid-column: 1 / 3;
        grid-row: 4 / 5;
        max-width: fit-content;
    }
    .poat{
        min-height: 80px;
    }

    .aefOne{
        min-height: 80px;
    }

    .aefTwo{
        min-height: 80px;
    }

    .mdta{
        min-height: 80px;
    }

    .ascs{
        min-height: 80px;
    }

    .cas{
        min-height: 80px;
    }

    .abs{
        min-height: 80px;
    }

    .accs{
        min-height: 80px;
    }

    .adad{
        min-height: 80px;
    }

    .atat{
        min-height: 80px;
    }

  }