body{
  background-image: url('back.jpg');
  background-size:cover;
  background-position:center;
  color:	white;
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
  cursor: url('cursor (1).cur'), auto;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
}

.onebox{
  width:relative;
  height:100px;
  background-image:url('sky.jpg');
  background-position: center;
  background-size:cover ;
  overflow: auto;
  word-break: break-all;
   text-align: center;}

.twobox{
  border-radius: 20px;
  width:100;
  height:relative;
 background:linear-gradient(90deg, rgba(255, 0, 0, 0.468), rgba(255, 166, 0, 0.473), rgba(255, 255, 0, 0.473), rgba(0, 128, 0, 0.473), rgba(0, 0, 255, 0.473), rgba(76, 0, 130, 0.473),rgba(238, 130, 238, 0.473));
   display: flex;
   align-items: center;
   justify-content: center;
   word-break: break-all;
   text-align: center;
   overflow:auto;
}

.threebox{
  width:900px;
  height:relative;
background:linear-gradient(90deg, rgba(255, 0, 0, 0.468), rgba(255, 166, 0, 0.473), rgba(255, 255, 0, 0.473), rgba(0, 128, 0, 0.473), rgba(0, 0, 255, 0.473), rgba(76, 0, 130, 0.473),rgba(238, 130, 238, 0.473));
   overflow: auto;
}

.grid{
height: 100%;
display:grid;

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:1fr 1fr 2fr;

gap:10px  10px;

}

#box1{
grid-column-start: 1;
grid-column-end: 4;
}

#box2{
grid-row-start: 2;
grid-row-end: 4;
}

#box3{
grid-column-start: 2;
grid-column-end: 6;
}

#box4{
grid-row-start: 3;
grid-row-end: 4;
}

#box5{
  grid-row-start: 6;
grid-row-end: 8;
}

.guide{
  position:fixed;
  bottom:-1px;
  z-index: 1;
}

#size:hover{
  transform: scale(1.15);
  transition: 0.5s;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color:
  #04164c;
}

audio{
  width: 175px;
}

.unroll{
  border-radius: 50px;
  background-color: #014c68;
width: 350px;
height: 100px;
overflow:hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

#unroll:hover{
  height: 150px;
  transition: 0.5s;
}