@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Marcellus&display=swap');

body{
    background-color: #E8D9D6;
    color:#372b24
}
.main-container {
    display: flex;
}
.main-content {
    font-family: "Lilita One", sans-serif;
    
    width:50%;
    margin-top: 150px;
    margin-left:120px

}
h1{
    font-size: 100px;
}
p{
    font-family: "Marcellus", serif;
    font-size: 25px;
}
button{
    background-color: #372b24;
    color:white;
    font-size: 20px;
    border: solid 2px #372b24;
    border-radius: 40px;

    width:200px;
    height: 60px;
}
.cup_img{
    position: absolute;
    top:20px;
    left:120px;

    width:200px;
    height: 250px;

    animation-name: cup-animation;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-fill-mode: both;
}
.main-image {
    width: 50%;
}
.coffee_img {
    position: absolute;
    z-index: 2;
    right:150px
}
.shape_img {
    position: absolute;
    z-index: 0;
    top:0;
    right:0;

    width:698px;
    height: 659px;
}
.flower_img {
    position: absolute;
    z-index: 3;
    top:290px;
    right:300px;

    width:149px;
    height: 184px;
}
.leftVector_img {
    position: absolute;
    z-index: 1;
    right:380px;
    top:250px;

    width: 290px;
    height: 300px;
}
.rightVector_img {
    position: absolute;
    z-index: 1;
    right:80px;
    top:205px;

    width: 290px;
    height: 310px;
}
.table_container {
    display: flex;
    justify-content: center;
    text-align: center;
    
    font-size: 20px;
    margin-top: 120px;
    gap:80px


}
.item_table-container {
    display: flex;
    background-color: rgba(255, 255, 255, 0.546);
    border:solid rgba(255, 255, 255, 0.546) 2px;
    border-radius: 200px;
}
.text {
    text-align: left;
    margin-left: 15px;
}
#left-item:hover {
    background-image: linear-gradient(90deg, rgb(165, 202, 152), rgb(34, 159, 34), rgb(50, 72, 19));
}
#left-item .textP:hover:hover{
    font-size: 30px;
}
#mid-item:hover{
    background-image: linear-gradient(250deg, rgb(187, 42, 149), rgb(200, 82, 72), rgb(202, 192, 131));
}
#mid-item .textP:hover:hover{
    font-size: 30px;
}
#right-item:hover{
    background-image: linear-gradient(250deg, rgb(79, 98, 206), rgb(127, 174, 200), rgb(121, 169, 183));
}
#right-item .textP:hover:hover{
    font-size: 30px;
}


@keyframes cup-animation {
    
    0%{
        margin-left: -200px;
        opacity: 0;
    }
    10%{
        margin-left: 80px;
        opacity: 1;
        top:350px
    }
    20%{
        margin-left: 20px;
        margin-top: 200px;
        opacity: 1;
    }
    40%{
        margin-left: 200px;
        margin-top: 600px;
        opacity: 1;
    }
    60%{
        margin-left: 600px;
        margin-top: 600px;
        opacity: 1;
    }
    80%{
        margin-left: 1100px;
        margin-top: 700px;
    }
}


@media(min-width:1100px) and (max-width:1300px){
    .main-content{
        margin-top: 10px;
        width: 400px;
        margin-left: 50px;
    }
    .table_container{
        flex-direction: column;
    }
    .cup_img{
        left:250px;
        top:140px;
        width:150px;
        height: 180px;

    }
    @keyframes cup-animation {
    
        0%{
            margin-left: 0px;
            margin-top:10px;
            opacity: 0;
        }
        10%{
            margin-left: 0px;
            opacity: 1;
            margin-top:30px
        }
        20%{
            margin-left: 0px;
            margin-top: 400px;
            opacity: 1;
        }
        40%{
            margin-left: 20px;
            margin-top: 600px;
            opacity: 1;
        }
        60%{
            margin-left: 20px;
            margin-top: 900px;
            opacity: 1;
        }
        80%{
            margin-left: 20px;
            margin-top: 1200px;
        }
        
    }
}



@media(max-width:400px){
    .main-content{
        margin-top: 350px;
        width: 400px;
        margin-left: 10px;
        text-align: right;
    }
    h1{
        font-size: 52px;

    }
    p{
        font-size: 20px;
        text-align: left;
    }
    button{
        height: 40px;
    }
    .table_container{
        flex-direction: column;
        margin-top: 50px;
        gap:20px;
        font-size:10px
    }
    .cup_img{
        width:160px;
        height: 250px;
    }
    .textP{
        font-size: 15px;
    }
    .item-img{
        height: 140px;
    }
    .cup_img{
        left:250px;
        top:140px;
        width:150px;
        height: 180px;
    }
    .coffee_img {
        right:80px;
        top:60px;
        width: 240px;
        height: 280px;
    }
    .shape_img {
        top:0;
        right:0;
    
        width:360px;
        height: 360px;
    }
    .flower_img {
        top:180px;
        right:160px;
    
        width:90px;
        height:90px;
    }
    .leftVector_img {
        right:200px;
        top:120px;
    
        width: 150px;
        height: 180px;
    }
    .rightVector_img {
        right:50px;
        top:105px;
    
        width: 150px;
        height: 180px;
    }
    #left-item .textP:hover:hover{
        font-size: 20px;
    }
    #right-item .textP:hover:hover{
        font-size: 20px;
    }
    #mid-item .textP:hover:hover{
        font-size: 20px;
    }
    @keyframes cup-animation {
        0%{
            margin-left: -1000px;
            margin-top: 400px;
            opacity: 0;
        }
        10%{
            margin-left: -800px;
            opacity: 1;
        }
        20%{
            margin-top: 450px;
            margin-left: -60px;
        }
        40%{
            margin-top: 600px;
        }
        60%{
            margin-top: 800px;
        }
        80%{
            margin-top: 950px;
        }
        100%{
            margin-top: 300px;
        }
    }
}


@media(min-width:401px) and (max-width:1099px){
    .main-content{
        margin-top: 50px;
        width: 400px;
        margin-left: 10px;
        text-align: left;
    }
    h1{
        font-size: 52px;

    }
    p{
        font-size: 20px;
        text-align: left;
    }
    button{
        height: 40px;
    }
    .table_container{
        flex-direction: column;
        margin-top: 50px;
        gap:20px;
        font-size:10px
    }
    .cup_img{
        width:160px;
        height: 250px;
    }
    .textP{
        font-size: 15px;
    }
    .item-img{
        height: 140px;
    }
    .cup_img{
        left:250px;
        top:140px;
        width:150px;
        height: 180px;
    }
    .coffee_img {
        right:40px;
        top:60px;
        width: 230px;
        height: 280px;
    }
    .shape_img {
        top:0;
        right:-20px;
    
        width:340px;
        height: 360px;
    }
    .flower_img {
        top:180px;
        right:120px;
    
        width:90px;
        height:90px;
    }
    .leftVector_img {
        right:180px;
        top:120px;
    
        width: 120px;
        height: 180px;
    }
    .rightVector_img {
        right:10px;
        top:105px;
    
        width: 140px;
        height: 180px;
    }
    @keyframes cup-animation {
        0%{
            margin-left: -1000px;
            margin-top: 100px;
            opacity: 0;
        }
        10%{
            margin-left: -800px;
            opacity: 1;
            margin-top: 50px;
        }
        20%{
            margin-top: 200px;
            margin-left: -60px;
        }
        40%{
            margin-top: 400px;
        }
        60%{
            margin-top: 600px;
        }
        100%{
            margin-top: 50px;
        }
    }
    
}