@charset "UTF-8";



html{
background-image: url("../images/yellowback.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Khand', sans-serif;
}

body{
margin: 0;
padding: 0;
}

h1{
font-size: 1.7rem;
text-align: center;
margin: 50px auto 30px;
}

h1 a{
text-decoration: none;
color: #000000;
}

article figure{
height: auto;
width: 60vw;
margin: 0 auto;
text-align: center;
}

article h2{
font-size: 1.3rem;
margin: 0 auto;
line-height: 1;
display: flex;
text-align: center;
}

article h2 a{
text-decoration: none;
color: black;
}

article h2:nth-of-type(1){
padding-left: 65vw;
margin-top: -30px;
}
article h2:nth-of-type(1) img{
transform: rotate(-40deg);
padding-right: 30px;
padding-bottom: 5px;
}
article h2:nth-of-type(2){
padding-left: 27vw;
margin-top: -40px;
}
article h2:nth-of-type(2) img{
transform: rotate(30deg);
padding-left: 20px;
}
article h2:nth-of-type(3){
padding-left: 50vw;
padding-top: 0px;
}
article h2:nth-of-type(3) img{
transform: rotate(-2deg);
}
article h2:nth-of-type(4){
padding-left: 60vw;
padding-top: 0px;
}
article h2:nth-of-type(4) img{
transform: rotate(-10deg);
}
article h2:nth-of-type(5){
padding-left: 40vw;
padding-top: 0px;
}
article h2:nth-of-type(5) img{
transform: rotate(5deg);
margin-top: -10px;
}

article h2 img{
height: 30px;
width: auto;
margin: 0 0 5px 0;
}

article h3{
width: 50vw;
height: auto;
display: flex;
margin: 30px 0 auto;
text-align: left;
}
article h3 img{
width: 90px;
height: auto;
}

.star1:hover {
animation: r1 1s linear 2;
/*animation-iteration-count:3;*/
}

/*
.star:active{
animation-play-state:paused; 
}
*/
 
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}











.dropdown{
  display:none;
}

label,
li img{
margin-top: -5000px;
height: 60vh;
margin-bottom: 5vh; 
}
li:hover,
label:hover{

}
li::before,
label::before{
  content:"";
  display:block;
  position:absolute;
  
/*
  right:5%;
  width:.5em;
  height:.5em;
*/
/*

  transform:rotate(135deg);
*/
}
input[type="checkbox"]{
  display:none;
}
/*
label[for="menu"]{
  display:block;

}
*/
/*
label[for="menu"]::before{
  transform:rotate(225deg);
}
*/
#menu:checked + .dropdown{
  display:block;

}