body{
  font:20px/1.1em arial, sans-serif;
  margin: 0;
  background: none;
  display: grid;
}

h1 {
  color:white;
  text-align: center;
  font-family: 'Love Ya Like A Sister', cursive;
  line-height:1em;
}



.btn{
  position: fixed;
  top: 10%;
  left: 85%;
  height: 100px;
  width: 100px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.btn:hover #imagebefore, 
.btn:hover #imageafter {
  animation: none;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#imagebefore{
animation: rotation 6s infinite linear;
}

#imageafter{
animation: rotation 6s infinite linear;
display:none;
}

#input-button:checked ~ .btn #imagebefore{
display:none;
}

#input-button:checked ~ .btn #imageafter{
display:block;
}

/* box1 : 03h01-07h00 */
.box1 {
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 2050px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, 500px);
  background: linear-gradient(to bottom, #000000 0%, #0c1411 100%);
}


#imgaf2{
  width:300px;
  height:auto;
  grid-column-start: 7; grid-column-end: 9;
  grid-row-start: 2; grid-row-end: 3;
  align-self: end;
}


#imgaf0{
  width:600px;
  height:auto;
  grid-column-start: 2; grid-column-end: 5;
  grid-row-start: 4; grid-row-end: 5;
}

/* box2 : 07h01-8h00 */
.box2{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #0c1411 0%, #353444 100%);
}

#imgaf18{
  width: 350px;
  height:auto;
  grid-column-start: 6; grid-column-end: 7;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}


/* box3 : 8h01-9h00 */
.box3{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #353444 0%, #845545 100%);
}

#imgaf5{
  width:100px;
  height:auto;
  grid-column-start: 1; grid-column-end: 2;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf51{
  width:70px;
  height:auto;
  grid-column-start: 2; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf52{
  width:100px;
  height:auto;
  grid-column-start: 3; grid-column-end: 4;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf53{
  width:90px;
  height:auto;
  grid-column-start: 4; grid-column-end: 5;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf54{
  width:24px;
  height:auto;
  grid-column-start: 5; grid-column-end: 6;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf55{
  width:150px;
  height:auto;
  grid-column-start: 6; grid-column-end: 7;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf56{
  width:50px;
  height:auto;
  grid-column-start: 7; grid-column-end: 8;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf57{
  width:70px;
  height:auto;
  grid-column-start: 8; grid-column-end: 9;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}
#imgaf58{
  width:30px;
  height:auto;
  grid-column-start: 9; grid-column-end: 10;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
}


/* box4 : 9h01-10h00 */
.box4{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #845545 0%, #b4bcb4 100%);
}

#imgaf6{
  width:400px;
  height:auto;
  object-fit: contain;
  grid-column-start: 5; grid-column-end: 6;
  grid-row-start: 1; grid-row-end: 2;
  align-self: center;
 }


/* box5 : 10h01-11h00 */
.box5{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #b4bcb4 0%, #99ccff 100%);
}

#imgaf3{
  width:400px;
  height:auto;
  object-fit: contain;
  grid-column-start: 2; grid-column-end: 3;
  grid-row-start: 1; grid-row-end: 2;
 }


/* box6 : 11h01-14h00 */
.box6{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 1550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 500px);
  background: linear-gradient(to bottom, #99ccff 0%, #99e7ff 100%);
}

#imgaf16{
  width:150px;
  height:auto;
  object-fit: contain;
  grid-column-start: 8; grid-column-end: 9;
  grid-row-start: 1; grid-row-end: 2;
 }

 #imgaf15{
  width:auto;
  height:450px;
  object-fit: contain;
  grid-column-start: 2; grid-column-end: 8;
  grid-row-start: 1; grid-row-end: 2;
  align-self: end;
 }


#imgaf1{
  width:200px;
  height:auto;
  object-fit: contain;
  grid-column-start: 7; grid-column-end: 8;
  grid-row-start: 2; grid-row-end: 4;
  align-self: center;
 }
 
 #imgbf1{
 display: none;
 }

/* box7 : 14h01-15h00 */
.box7{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #99e7ff 0%, #ffffbf 100%);
}

#imgaf14{
  width:200px;
  height:auto;
  object-fit: contain;
  grid-column-start: 4; grid-column-end: 5;
  grid-row-start: 1; grid-row-end: 2;
 }


/* box8 : 15h01-16h00 */
.box8{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #ffffbf 0%,  #ffcdb2 100%);
}

#imgaf4 {
  width:auto;
  height:500px;
  grid-column-start: 2; grid-column-end: 10;
  grid-row-start: 1; grid-row-end: 2;
}

/* box9 : 16h01-17h00 */
.box9{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 500px;
  background: linear-gradient(to bottom, #ffcdb2 0%,#586580  100%);
}

#imgaf17 {
  width:400px;
  height:auto;
  grid-column-start: 5; grid-column-end: 8;
  grid-row-start: 0; grid-row-end: 1;
  align-self: center;
}

/* box10 : 17h01-20h00  */
.box10{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 1550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 500px);
  background: linear-gradient(to bottom, #586580  0%, #232329 100%);
}

#imgaf13 {
  width:300px;
  height:auto;
  grid-column-start: 2; grid-column-end: 3;
  grid-row-start: 0; grid-row-end: 1;
  align-self: end;
}

#imgaf8{
  width:110px;
  height:auto;
  object-fit: contain;
  grid-column-start: 8; grid-column-end: 9;
  grid-row-start: 0; grid-row-end: 2;
  align-self: center;
 }

 #imgaf12{
  width:500px;
  height:auto;
  object-fit: contain;
  grid-column-start: 3; grid-column-end: 4;
  grid-row-start: 2; grid-row-end: 3;
  align-self: end;
 }


/* box11 : 20h01-24h00  */
.box11{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 2050px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, 500px);
  background: linear-gradient(to bottom, #232329 0%,#0c1411 100%);
}

#imgaf9 {
  width:auto;
  height:500px;
  grid-column-start: 5; grid-column-end: 10;
  grid-row-start: 2; grid-row-end: 3;
}

#imgaf11{
  width:130px;
  height:auto;
  object-fit: contain;
  grid-column-start: 2; grid-column-end: 3;
  grid-row-start: 4; grid-row-end: 5;
 }


/* box12 : 24h01-3h00  */
.box12{
  display: grid;
  padding: 20px 50px 0px 50px;
  height: 1550px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 500px);
  background: linear-gradient(to bottom, #0c1411 0%, #000000 100%);
}

#imgaf7{
  width:200px;
  height:auto;
  object-fit: contain;
  grid-column-start: 6; grid-column-end: 7;
  grid-row-start: 1; grid-row-end: 2;
 }