#banner {
    background-color: rgba(175, 238, 238, 0.945);
    color: rgb(248, 248, 255);
    text-align: center;
    padding: 20px 30px;
    font-size: 18px;
    font-family: Courier New;
    /* margin: 5px 10px; */
    opacity: 0;
    animation: fadein 2s forwards;
}

@keyframes fadein {
    from{opacity:0}
    to {opacity:1;}
}
#main-content{
    width: 95%;
    margin: 22px
}
.row{
    display: flex;
    margin : 1px;
}
.section{
    width: 100%;
    background-color: rgba(0, 255, 255, 0.201);
    padding: 20px;
    border:2px dashed rgba(0, 255, 255, 0.36);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    color:rgb(10, 198, 255);

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

.fade-in{
    opacity: 1 !important;
    transform: translateY(0) !important
}
#section1{background-color: rgba(127, 255, 238, 0.539);}

#main-content{
    width: 95%;
    margin: 22px
}
.row2{
    display: flex;
    margin : 1px;
}
.section{
    width: 70%;
    background-color: rgba(0, 255, 255, 0.201);
    padding: 20px;
    border:2px dashed rgba(0, 255, 255, 0.36);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    color:rgb(10, 198, 255)
} 

#section4{background-color: rgba(127, 255, 238, 0.539);}

#profile{
    width: 20px;
}

#favorite{
    width: 200px;
}

#profile{
    width: 200px;
    text-align: center;
}


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

body.dark-mode{
    background-color: black;
    color:aqua;

}

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