@font-face {
    font-family: 'summer-title';
    src: url('./simplest.otf');
}

* {
    margin : 0;
    padding : 0;
     box-sizing: border-box;

     --col-hot: #ffa500;
     --col-soft : #f7d390;
}


#title {
    position : absolute;
    top : 25px;

    width : 2559px;
    text-align: center;
    
    font-family: 'summer-title', sans-serif;
    color : var(--col-hot);
    font-size: 50px;

    transition : transform 3s ease;
}

.banner {
    position : relative;
    width : 853px;
    height: 175px;

    border : var(--col-hot) solid 4px;
    border-radius : 15px;
    overflow: hidden;
}

#sun {
    position : absolute;
    right: -50px;
    top : -60px;

    width : 170px;
    aspect-ratio: 1;

    z-index: 10;

    background-image: url('../assets/sun.png');
    background-repeat: no-repeat;
    background-size: contain;
    
    transition: transform 50ms;
}

#hot-wave {
    position: absolute;
    bottom: -35px;
    

    width: 2559px;
    height: 85px;

    background-image: url('../assets/hotWave.png');
    background-repeat: repeat-x;
    background-size: contain;    
}

#soft-wave {
    position: absolute;
    bottom: -40px;
    

    width: 2559px;
    height: 85px;

    background-image: url('../assets/softWave.png');
    background-repeat: repeat-x;
    background-size: contain;    
}

#logo {
    position : absolute;
    top : 0px;
    left : 376px;
    opacity : 0;

    height: 120px;
    aspect-ratio:1;

    background-image: url('../assets/logoE2Ctrans.png');
    background-repeat: no-repeat;
    background-size: contain;

    transition : opacity 2s;

}