body {
  font-size: 3vh ;
  background-color: #AC7EDE;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align:center;
}

#header {
  text-align:center;
  top: 1vh;
  width: 100%;
  font-size:5vh;
  margin-top:2vh;
  margin-bottom:2vh;
  background-color:#662BA6;
  }

a:link{
  color:#538C6B;
  }
  
a:visited{
  color:#E9DBFF;
  }

.main{
  margin-left:10vw;
  margin-right:10vw;
  }

.parent {
  display: grid;
  justify-content:center;
  grid-template-columns: repeat(4, 10vw);
  grid-template-rows: repeat(3, 10vh);
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 2 / 1 / 3 / 2; }
.div6 { grid-area: 2 / 2 / 3 / 3; }
.div7 { grid-area: 2 / 3 / 3 / 4; }
.div8 { grid-area: 2 / 4 / 3 / 5; }
.div9 { grid-area: 3 / 1 / 4 / 2; }
.div10 { grid-area: 3 / 2 / 4 / 3; }
.div11 { grid-area: 3 / 3 / 4 / 4; }
.div12 { grid-area: 3 / 4 / 4 / 5; }

.utauimg{
  position:fixed;
  height:80vh;
  top:16vh;
  left:10vw;
  }
.utauinfo{
  position:fixed;
  height:80vh;
  width:30vw;
  overflow-y:auto;
  background-color:#662BA6;
  color:white;
  top:16vh;
  right:10vw;
  text-align:left;
  padding-left:2vw;
  padding-right:2vw;
  }
.utauname{
  position:fixed;
  font-size:4vh;
  overflow-y:auto;
  top:10vh;
  left:2vw;
  }
.utauback{
  position:fixed;
  top:90vh;
  left:2vw;
  }