#banner {
    background-color:rgb(125, 201, 201) ;
    color: #F0FFFF;
    text-align: center;
    padding: 10px 15px;
    font-size: 20px;
    font-family:Courier New ;
    margin: 20px 30px;
    width: 85%;
    opacity: 0;
    animation:fadein 3s forwards;
}

@keyframes fadein {
    from{opacity:0}
    to {opacity: 1;}
}

#main-content{
    width:90%;
    margin:20px
}
.row{
    display: flex;
    margin:10px;
}
.section{
     width: 48%;
     /* background-color:beige; */
     padding: 20px;
     border:2px solid rgb(231, 253, 253);
     box-shadow: 2px 2px 8px silver;
     text-align: center;
     font-family: Georgia;

     opacity:0;
     transform: translateY(20px);
     transition: opacity 2s ease-out, transform 2s ease-out;
}

.fade-in{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* #section1{background-color:lightcoral;} */
#section1{background-color:rgb(248, 200, 207)}
#section2{background-color: lemonchiffon;}
#section3{background-color: rgb(174, 245, 174);}
#section4{background-color: rgb(209, 235, 243);}

/* #profile{width:150px}; */

#school{width:150px};


#Grade7{width:150px}

body{
    background-color: aliceblue;
    color: black;
    transition: background-color 0.5s,color 0.5s;
}

body.dark-mode{
    background-color: lightseagreen;
    color:lightskyblue;
}

img{
    transition: transform 0.5s ease-in-out;
}

img:hover{
    transform: scale(1.2);
}