body{
    overflow-x: hidden;
}
.set{
    background-image: linear-gradient(to bottom, rgb(140, 191, 250), rgb(213, 130, 243));
    height: 949px;
}
#cart{
    position: absolute;
    right: 370px;
    width: 50px;
    cursor: pointer;
}
.shade{
    font-size: 20px;
}
.shade:hover{
    text-shadow: 6px 4px 9px rgb(0, 0, 0);
    cursor: pointer;
}
.pic{
    position: absolute;
    z-index: 1;
    margin-left: 560px;
    margin-top: -790px;
}
.head{
    font-family: "DynaPuff", system-ui;
    font-size: 60px;
    margin-left: -65px;
}
.head:hover{
     text-shadow: 6px 4px 9px rgb(0, 0, 0);
     transition: all;
     transition-duration: 300ms;
}
.btn:hover{
     box-shadow: 6px 4px 9px rgb(0, 0, 0);
     transition: all;
     transition-duration: 500ms;
     border-radius: 15px;
}
#text{
    font-size: 150px;
    color: white;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    position: absolute;
    text-shadow: 16px 14px 30px rgb(0, 0, 0);
    z-index: 0;
    top: 600px;
    left: 560px;
}
.pic:hover{
    position: absolute;
    z-index: 0;
    transition: all;
    transition-duration: 700ms;
}
#text:hover{
    position: absolute;
    z-index: 1;
    top: 500px;
    font-size: 170px;
    left: 540px;
    text-shadow: 7px 9px 19px rgb(0, 0, 0);
    transition: all;
    transition-duration: 700ms;
}
.icons{
    position: absolute;
    top: 300px;
    left: 40px;
}
.icon1{
    position: absolute;
    left: 40px;
}
.icon2{
    position: absolute;
    top: 70px;
    left: 40px;
}
.icon3{
    position: absolute;
    top: 140px;
    left: 40px;
}
.icon4{
    position: absolute;
    top: 210px;
    left: 40px;
}
.icon1:hover{
    fill: rgb(2, 20, 80);
    transition: all;
    transition-duration: 400ms;
}
.icon2:hover{
    fill: rgb(2, 20, 80);
    transition: all;
    transition-duration: 400ms;
}
.icon3:hover{
    stroke: rgb(2, 20, 80);
    transition: all;
    transition-duration: 400ms;
}
.icon4:hover{
    fill: rgb(2, 20, 80);
    transition: all;
    transition-duration: 400ms;
}
.name{
    position: absolute;
    left: 95px;
    top: 5px;
    font-size: 15px;
}
.name1{
    position: absolute;
    left: 95px;
    top: 75px;
}
.name2{
    position: absolute;
    left: 95px;
    top: 145px;
}
.name3{
    position: absolute;
    left: 95px;
    top: 218px;
}
.products{
    position: absolute;
    top: 950px;
    left: 340px;
}
.upper{
    display: flex;
}
.containers p {
    visibility: hidden;
}
#add1{
    visibility: hidden
}
#add2{
    visibility: hidden;
}
#add3{
    visibility: hidden;
}
#add4{
    visibility: hidden;
}
#add5{
    visibility: hidden;
}
.containers{
    border-radius: 10px;
    padding: 10px 40px 10px 40px;
}
.containers:hover{
    border: 3px solid rgb(0, 0, 0);
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgb(158, 201, 250), rgb(229, 162, 254));
    padding: 20px 35px 20px 35px;
    transition: all;
    transition-duration: 500ms;
}
.containers:hover p{
    visibility: visible;
    color: black;
    font-weight: bold;
    text-shadow: 2px 3px 6px gray;
    position: relative;
    left: -55px;
}
.containers:hover #add1{
    visibility: visible;
    position: relative;
    left: 140px;
    top: -28px;
}
.containers:hover #add2{
    visibility: visible;
    position: relative;
    left: 140px;
    top: -28px;
}
.containers:hover #add3{
    visibility: visible;
    position: relative;
    left: 140px;
    top: -28px;
    transition: all;
    transition-duration: 500ms;
}
.containers:hover #add4{
    visibility: visible;
    position: relative;
    left: 140px;
    top: -28px;
}
.containers:hover #add5{
    visibility: visible;
    position: relative;
    left: 140px;
    top: -28px;
}
.start{
    color: rgb(56, 2, 56);
    font-family: cursive;
    font-weight: bold;
    font-size: 50px;
    position: relative;
    top: -40px;
}
.start:hover{
    text-shadow: 6px 3px 9px gray;
}
.para{
    position: relative;
    top: -80px;
}
.ice:hover{
    border: 3px solid rgb(0, 0, 0);
    border-radius: 30px;
    transition: all;
    transition-duration: 100ms;
}
.ice:hover a{
    color: rgb(56, 2, 56);
    text-shadow: 6px 5px 9px gray;
    font-weight: bolder;
}
.special{
    font-family: cursive;
    text-shadow: 6px 5px 9px rgb(66, 22, 22);
    font-weight: bolder;
    font-size: 50px;
}
.royal{
    color: rgb(56, 2, 56);
    text-shadow: 6px 5px 9px gray;
}
.boerderrrr{
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}
#plus{
    width: 100px;
    height: 100px;
    position: relative;
    top: 260px;
    right: 50px;
    border: 3px solid black;
    border-radius: 50%;
}
#plus:hover{
    width: 120px;
    height: 120px;
    transition: all;
    transition-duration: 200ms;
    position: relative;
    top: 260px;
    right: 60px;
}
.des{
    background-color: rgb(229, 195, 153);
    opacity: 0.75;
    padding: 10px 20px 10px 20px;
    position: relative;
    top: 30px;
    right: 10px;
}
.all{
    position: relative;
    right: 40px;
}
#pricing{
    font-size: 18px;
    font-family: cursive;
    background-image: linear-gradient(to bottom, rgb(20, 84, 157), rgb(39, 3, 52));
    color: transparent;
    background-clip: text;
    font-weight: bolder;
    position: relative;
    left: 290px;
}
#pro-price{
    font-size: 15px;
    font-weight: lighter;
    text-shadow: 3px 5px 9px gray;
    position: relative;
    right: -200px;
    visibility: hidden;
}
.ice:hover #pro-price{
    visibility: visible;
}
.bg:hover{
    background-color: rgb(229, 195, 153);
    color: rgb(56, 13, 13);
}
.pre{
    text-shadow: 15px 10px 25px rgb(124, 49, 124);
    color: rgb(219, 212, 212);
}
.cen{
    position: relative;
    left: 540px;
    font-family: cursive;
    font-weight: bolder;
}
.text-set{
    color: rgb(143, 138, 138);
    font-weight: 400;
    font-size: 15px;
    margin-top: 30px;
}
#final{
    margin-left: 100px;
    border: 2px solid plum;
    border-radius: 10px;
    margin-top: 20px;
    padding: 5px 15px 10px 15px;
    color: plum;
    text-shadow: 2px 2px 9px goldenrod;
}
.finset:hover #final{
    margin-left: 80px;
    color: white;
    border: none;
    border-radius: 19px;
    font-weight: bolder;
    background-color: plum;
    box-shadow: 2px 1px 9px rgb(65, 60, 2);
    transition: all;
    transition-duration: 600ms;
}
.drape{
    background-image: url(./A\ realistic\ pink\ bac.png);
    height: 960px; 
    background-repeat: no-repeat;
    background-size: cover;
}
.shake{
    font-family: cursive;
    font-size: 90px;
    text-shadow: 2px 2px 9px rgb(61, 0, 61);
}
.finset:hover{
    border-radius: 30px;
}
.heirloom{
    line-height: 30px;
    font-size: 20px;
    margin-top: 50px;
    font-family: cursive;
}
.heirloom:hover{
    color: black;
    font-family: cursive;
    text-shadow: 2px 1px 9px goldenrod;
    font-size: 22px;
    transition: all;
    transition-duration: 50ms;
}
.auto{
    background-color: rgb(255, 198, 208);
    color: rgb(192, 52, 75);
    border: 1px solid rgb(192, 52, 75);
    font-size: 18px;
    padding: 5px 10px 5px 10px;
}
.last{
    background-color: transparent;
    color: rgb(49, 0, 49);
    font-weight: 600;
    font-size: 20px;
    font-family: cursive;
}
.last:hover span{
    box-shadow: 4px 4px 9px goldenrod;
    transition: all;
    transition-duration: 400ms;
}
.fill{
    background-color: rgb(205, 148, 255);
    font-family: cursive;
}
.chu{
    font-family: "DynaPuff", cursive;
    font-size: 90px;
    font-weight: 400;
    position: relative;
    right: 190px;
    color: white;
    text-shadow: 6px 5px 15px rgb(27, 0, 27);
}
.cap{
    font-size: 20px;
    position: relative;
    right: 40px;
}
.loc{
    position: relative;
    right: 250px;
}
.sup{
    position: relative;
    left: 350px;
}
.sursor{
    cursor: pointer;
}