@font-face {
    font-family: 'mello';
    src: url(./assets/Mello-Nr-Black.woff2);
}
@font-face {
    font-family: 'obviously';
    src: url(./assets/ObviouslyDemo-Regular.otf);
}
@font-face {
    font-family: 'eksel';
    src: url(./assets/ekselldisplaytrial-large.otf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}
#page1{
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #8AC6ED;
}
#logo{
    position: absolute;
    position: fixed;
    font-family: 'mello';
    font-size: 16vw;
    color: #3B0017;
    left: 8%;
    top: 2%;
}
#page1 #subheader{
    font-family: 'obviously';
    font-size: 7vw;
    font-weight: 800;
    line-height: 7vw;
    position: absolute;
    bottom: 10%;
    left: 20%;
    color: #3B0017;
}

.button1{
    background-color: #ffdd00;
    color: #4a0e0e;
    font-family: 'obviously';
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
}
#menu{
    width: 10vw;
    height: 5vw;
    font-size: 2vw;
    font-weight: 1000;
    position: absolute;
    top: 3%;
    left: 4%;
    transform: rotate(-10deg);
    position: fixed;
}
#cart{
    width: 6vw;
    height: 4vw;
    font-size: 1.4vw;
    font-weight: 600;
    position: absolute;
    top: 3%;
    right: 8%;
    transform: rotate(10deg);
    position: fixed;
}
.flower-button{
    position: absolute;
    right: 16%;
    top: -1%;
    position: fixed;
    
}
.flower-container{
    position: relative;
    transform: rotate(-10deg);
    
}
#shop{
    position: absolute;
    top: 84%;
    left: 15%;
    height: 2vw;
    width: 5vw;
    font-family: 'obviously';
    font-size: 1.3vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.5vw;
    z-index: 99;
}
.flower{
    width: 7vw;
    height: 3vw;
    background-color: hotpink;
    border-radius: 50px;
    margin-top: 200px;
    position: relative;
}
.flower::before{
    content: "";
    width: 7vw;
    height: 3vw;
    background: hotpink;
    border-radius: 50px;
    display: block;
    transform: rotate(60deg);
    position: absolute;
}
.flower::after{
    content: "";
    width: 7vw;
    height: 3vw;
    background: hotpink;
    border-radius: 50px;
    display: block;
    transform: rotate(-60deg);
    position: absolute;
}

#page2{
    height: 100vh;
    width: 100%;
    background-image: url(https://cobfoods.com/cdn/shop/files/HOME_BED_02_1800x.jpg?v=1713213757);
    background-position: center;
    background-size: cover;
    position: relative;
}
#cylinders-left{
    height: 100vh;
    width: 200%;
    margin-right: 1vw;
    position: absolute;
    top: -0.15%;
    z-index: 999;
}
#cylinders-left::before{
    content: '';
    height: 10vw;
    width: 200%;
    position: absolute;
    -webkit-mask-image: url(./assets/svg-path.svg);
    background-color: #8AC6ED;
    top: 0;
    transform: rotate(.5turn);
}


#page3{
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: #3B0017;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vw;
}
#cylinders-right{
    position: absolute;
    height: 100vh;
    width: 200%;
    margin-right: 1vw;
}
#cylinders-right::after{
    content: '';
    height: 10vw;
    width: 200%;
    position: absolute;
    -webkit-mask-image: url(./assets/arc.svg);
    background-color: #3B0017;
    top: -23%;
    transform: rotate(.5turn);
}
#page3 h3{
    font-family: 'obviously';
    font-size: 2vw;
    text-align: center;
    color: #EE97C0;
}
#faq{
    width: 6vw;
    height: 4vw;
    background-color: #9ACA3F;
    color: #4a0e0e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    font-family: 'obviously';
    font-size: 1.4vw;
    font-weight: 600;
    position: absolute;
    top: 20%;
    right: 40%;
    transform: rotate(-10deg);
}


#page4{
    padding: 5vw;
    min-height: 100vh;
    width: 100%;
    padding-bottom: 13vw;
    background-color: beige;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box{
    height: 35vw;
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    font-family: 'obviously';
    text-align: center;
}

.box {
    position: relative;
    overflow: hidden;
}
.box #image0,#image1, #image3, #image2 {
    height: 80%;
    width: 100%;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    border-radius: 2vw;
    position: relative;
}
.box img {
    height: 90%;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.box:nth-child(3) #image2 img{
    scale: 1.35
}
.box:nth-child(4) #image3 img{
    scale: 1.35;
}


.box h2{
    font-size: 1.2vw;
}
.box h1{
    font-size: 3vw;
    font-weight: 800;
}




#page5{
    height: 70vh;
    width: 100%;
    position: relative;
    background-color: #3B0017;
}
#page5 #cylinders-right{
    top: 1%;
}
#page5 h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 12vw;
    font-family: 'mello';
    text-align: center;
    line-height: 10vw;
    color: #EE97C0;
}


#page6{
    height: 100vh;
    width: 100%;
    background-image: url(./assets/page6.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
#page6 #cylinders-left::before{
    background-color: #3B0017;
}




#page7{
    min-height: 100vh;
    width: 100%;
    background-color: #8AC6ED;
    position: relative;
    padding: 8vw 0;

}
#page7 h1{
    font-size: 4vw;
    font-family: 'obviously';
    font-weight: 800;
    color: #3B0017;
    text-align: center;
}

.cards-container {
    width: 100%;
    height: 400px;
    display: flex;
}
.card {
    flex: 0 0 auto;
    width: 300px;
    height: 100%;
    margin-right: 20px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card p {
    font-size: 18px;
    line-height: 1.5;
}
.card .author {
    font-weight: bold;
    text-align: right;
}
#page8{
    height: 100vh;
    width: 100%;
    background-color: #EF98C1;
    position: relative;
}

#page8 h1{
    text-align: center;
    font-size: 20vw;
    color: #3B0017;
    font-family: 'mello';
}
#page8 #cylinders-right{
    position: absolute;
    top: 78%;
}
#footer-bottom{
    height: 10vw;
    width: 100%;
    position: absolute;
    background-color: #3B0017;
    bottom: 0%;
}
#footer-options-container{
    margin-right: 2vw;
    position: absolute;
    bottom: 5%;
    right: 0%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
}
#footer-inside{
    padding: 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#footer-inside-left, #footer-inside-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
}
#footer-inside a{
    text-decoration: none;
    font-family: 'obviously';
    font-size: 1vw;
    color: #EE97C0;
}
#footer-inside #footer-inside-left a{
    font-size: 2.5vw;
}