#banner{
    background-color: rgb(197, 232, 237); 
    color:cadetblue;
    text-align: center
    ;padding :10px 20px;
    font-size:25px;
    font-family: cursive;
    /* margin: 19px; */
    border: 14cm;
    opacity:0;
    animation: fadein 3s forwards;

}
#main-content{
    width:90%;
    margin:20px

}
.row{
    display:flex;
    margin: 10px;
}
    
.section{
    width:48%;
    background-color:darkslategrey;
    padding:20-px;
    border:2px solid black;
    box-shadow: 2px 2px 8px teal;
    text-align: center;
    font-family:cursive;

    opacity: 0;
    transform: translateY(25px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}
.fade-in{
     opacity: 1 !important;
     transform: translatey(0 ) !important;
    }

#section1{background-color:lightblue;}
#section2{background-color:pink}

#section3{background-color:pink}
#section4{background-color:lightblue}
#style {
    width: 100px;
} 
#styleshoujo{
width:100px;

}

#Hobby{
    width:100px;
}

@keyframes fadein {
  from{opacity:0}
  to {opacity:1}
}
body{
    background-color:rgb(243, 247, 249);
    color:rgb(210, 255, 255);
    transition: background-color 0.5s, color 0.5s;
}

body.dark-mode{
    background-color:rgb(253, 239, 252);
    color:rgb(210, 255, 255);

}

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

}

img:hover{
    transform: scale(1.5)
}

.font-color{
    color: black;
}