body{
 background-color: #FFEEBF;
 overflow-x: hidden;
 /* height: 10000px; */
 cursor: pointer;
}

p1{
 font-family: "skia";
 position: fixed;
 font-size: 1vw;
 right: 1.2vw;
 top: 0px;
}

#img0{
 width: 26%;
 height: auto;
 position: absolute;
 top: 10px;
 right: 27%;
 mix-blend-mode: multiply;
}

#img1{
 width: 26%;
 height: auto;
 top: 400px;
 right: 27%;
 position: absolute;

 mix-blend-mode: multiply;
}

#img2{
 width: 27%;
 height: auto;
 top: 900px;
 right: 00px;
 position: absolute;

 mix-blend-mode: multiply;
}


#img3{
 width: 26%;
 height: auto;
 top: 1400px;
 right: 27%;
 position: absolute;

 mix-blend-mode: multiply;
}

#img4{
 width:26.1%;
 height: auto;
 top: 1900px;
 right:5px;
 position: absolute;

 mix-blend-mode: multiply;
}

#img5{
 width: 26%;
 height: auto;
 top: 2400px;
 right: 27%;
 position: absolute;

 mix-blend-mode: multiply;
}

#button1{
   border-top-right-radius: 200%;
}

#button5{
   border-bottom-right-radius: 200%;
}
button{
 background-color: #88af8b;
 width: 8vw;
 height: 8vw;
 padding: 20px;
 border: none;
 border-radius: 10%;
 outline: none;
 margin: 20px;
 text-decoration: none;
 text-align: center;
 font-family: "skia";
 font-size: 1.05vw;
 transition: 1s;
}

button:hover{
 transform: scale(1.05);
 box-shadow: 1px 1px 20px white;

}
.button-group{
 width: 100px;
 height: 600px;
  top: 1.4vw;

 position: fixed;
 display: block;
 z-index:+1;
}

h1{
 font-family: "skia";
 text-align: center;
 width: 27%;
 left: 220px;
 font-size: 3.2vw;
 z-index:+1;
 position: relative;

}
.text p{
   font-family: "skia";

   font-size: 1.4vw;
   text-align: center;

   width: 27%;
   left: 220px;

   z-index:+1;
   position: relative;


   transition: 2s;
   user-select: none;
}

.text p:hover{
 transform: scale(1.1);
 color: #632525;
 text-decoration: underline;
}

.bar{
 background-color: #FFEEBF;;
 top: 0px;
 left: -20px;
 width: 15.5vw;
 height: 100%;
 border-top-right-radius: 100%;
 border-bottom-right-radius: 100%;
 position: fixed;
 box-shadow: 1px 1px 15px gray;
}

.window{
 background-color: #88AF8B;
 top: 0px;
 left: 0px;
 /* width: 658px; */
 width: 45%;
 height: 900px;
 position: fixed;
}

.asset{
 /* width: 792px; */
 width: 55%;
 height: auto;
 top: 0px;
 right: 0%;
 position: fixed;
 box-shadow: 1px 1px 10px;
 pointer-events: none;
}
/* ----------------------------------
---------------------------------- */
@media screen and (max-width: 480px)   {
 body {
   overflow-x: hidden;

 }



 h1{
   top:50px;
   left: 45px;
   font-size: 25px;
   margin: 1px;
 }
 .window{
 width: 200px;
 }
 .text p{
   width: 45vw;
   left: 0px;
   font-size: 5vw;
   padding: 0px 5px 5px 5px;
   margin:1px;
 }
 .asset{
   display:none;
 }
 .bar{
   /* background-color: #FFCFA5; */
   top: -40px;
   left: 0px;
   width: 100%;
   height: 100px;
   z-index: 1;
   border-bottom-left-radius: 100%;
   border-bottom-right-radius: 100%;
   position: fixed;
   box-shadow: 1px 1px 15px gray;
 }

 #button1{
   border-radius: 40%;

   border-bottom-left-radius: 200%;
 }


   button{
     /* background-color: #FF9393; */
     width: 40px;
     height: 40px;
     padding: 2px 15px 5px 13px;
     border: none;
     border-radius: 40%;
     outline: none;
     margin: 10px;

     hyphens: auto;

     text-decoration: none;
     text-align: center;
     font-weight: 400;
     font-family: "skia";
     font-size: 30px;
     transform-origin: top;
     transition: 1s;
   }

   .button-detail{
     display: none;
   }

   .button-group{

     width: 100px;
     height: 20px;
     top: -10px;
     left: 32px;

     border: none;
     border-radius: 10%;
     outline: none;

     position: fixed;
     display: flex;
     z-index:+1;
   }

 button:hover{
   transform: scale(1.5);
   box-shadow: 1px 1px 20px white;
 }


 #img0{
   width: 220px;
   height: auto;
   position: absolute;
   top: 10vw;
   right: 0%;
   mix-blend-mode: multiply;
 }

 #img1{
   width: 220px;
   height: auto;
   top: 300px;
   right: 0%;
   position: absolute;

   mix-blend-mode: multiply;
 }

 #img2{
   width:220px;
   height: auto;
   top: 750px;
   right:0px;
   position: absolute;

   mix-blend-mode: multiply;
 }


 #img3{
   width:220px;
   height: auto;
   top: 1600px;
   right: 0%;
   position: absolute;

   mix-blend-mode: multiply;
 }

 #img4{
   width:220px;
   height: auto;
   top: 2150px;
   right: 0%;
   position: absolute;

   mix-blend-mode: multiply;
 }

 #img5{
   width:220px;
   height: auto;
   top: 2700px;
   right: 0%;
   position: absolute;

   mix-blend-mode: multiply;
 }
 }

 @media screen and (max-width: 1045px)and (min-width: 480px){
.text p{
  left: 17%;
  font-weight: bold;
  font-size: 1.3vmin;
}
h1{
  left: 17%;
  font-weight: bolder;
}

.button-group{
  top: 14vw;
  left: -1vw;
}

   }