@font-face {
  font-family: retrogression;
  src: url(/fonts/retrogression.ttf);
}

@font-face {
  font-family: baguede;
  src: url(/fonts/baguede.otf);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #e6d9c1;
  background-image: 
    linear-gradient(#ffffff80 1px, transparent 1px),
    linear-gradient(90deg, #ffffff80 1px, transparent 1px);
  background-size: 50px 50px;
}

.hidden {
  display: none;
}

.parent {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.logo { 
  grid-area: 1 / 1 / 4 / 5;
  margin: 20px;
}
.music { 
  cursor: pointer;
  align-content: space-evenly;
  /* background-color: #ff003350; */
  grid-area: 3 / 7 / 7 / 10;
}
.guestbook { 
  cursor: pointer;
  align-content: space-evenly;
  /* background-color: #ff00cc50; */
  grid-area: 5 / 3 / 8 / 6;
}
.media { 
  cursor: pointer;
  align-content: space-evenly;
  /* background-color: #00000050;o */
  grid-area: 7 / 6 / 11 / 9;
}

.titleimg {
  position: absolute;
  top: 0;
}

.titleimg img{
  position: absolute;
}

h2 {
  font-family: retrogression;
  font-size: 100px;
  font-weight: normal;
  margin: 0;
  color: #fff;
  display: inline-block;
  z-index: 50;
  text-shadow: 2px 2px #00000050;
}

p {
  font-family: baguede;
  margin: 0;
  text-align: end;
  color: #fff;
  font-size: 18px;
  margin-top: -10px;
  z-index: 50;
  text-shadow: 2px 2px #00000050;
}

.music:hover h2{
  transform: scale(1.1);
}
.music:hover .appleimg{
  transform: rotate(30deg);
}
.apple_anim{
  animation-name: apple;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}
.music:hover .star2img{
  transform: rotate(30deg);
}
.star2_anim{
  animation-name: star2;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}
.music:hover .guitarimg{
  transform: rotate(-20deg);
}
.guitar_anim{
  animation-name: guitar;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}
.music:hover .beatopiaimg{
  transform: rotate(30deg);
}
.beatopia_anim{
  animation-name: beatopia;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}

.paper_anim{
  animation-name: paper;
  animation-duration: 0.4s;
  animation-delay: 0.4s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}
.paper_anim1{
  animation-name: paper1;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}
.paper_anim2{
  animation-name: paper2;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}
.paper_anim3{
  animation-name: paper3;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: step-end;
  animation-fill-mode: forwards ;
}

@keyframes paper {
  0%   {z-index: 1; transform: rotate(30deg); }
  25%  {z-index: 1; transform: rotate(30deg); position: fixed; top: 40%; left: 60%; transform: rotate(20deg) translate(-50%, -50%);}
  50%  {z-index: 1; transform: rotate(35deg); position: fixed; top: 45%; left: 55%; transform: rotate(10deg) translate(-50%, -50%) scale(1.2); }
  75% {z-index: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-5deg) translate(-50%, -50%) scale(1.3); }
  100% {z-index: 1; opacity: 0; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(0deg) translate(-50%, -50%) scale(1.4); }
}
@keyframes paper1 {
  0%   {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(10deg) translate(-55%, -40%) scale(1.5);}
  25%  {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(20deg) translate(-55%, -40%) scale(1.7);}
  50%  {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(30deg) translate(-60%, -30%) scale(1.8); }
  75% {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(10deg) translate(-55%, -40%) scale(2); }
  100% {z-index: 1; opacity: 0; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(0deg) translate(-50%, -50%) scale(2.2); }
}
@keyframes paper2 {
  0%   {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-10deg) translate(-45%, -50%) scale(2.5);}
  25%  {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-20deg) translate(-45%, -50%) scale(2.9);}
  50%  {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-30deg) translate(-40%, -50%) scale(4); }
  75% {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-10deg) translate(-45%, -50%) scale(5); }
  100% {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(0deg) translate(-40%, -50%) scale(6); }
}
@keyframes paper3 {
  0%   {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-10deg) translate(-45%, -50%) scale(6);}
  25%  {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-20deg) translate(-45%, -50%) scale(6);}
  50%  {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-30deg) translate(-40%, -50%) scale(7); }
  75% {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(-10deg) translate(-45%, -50%) scale(7); }
  100% {z-index: 1; opacity: 1; transform: rotate(45deg); position: fixed; top: 50%; left: 50%; transform: rotate(0deg) translate(-40%, -50%) scale(8); }
}
@keyframes apple {
  0%   {transform: translateX(0px) rotate(28deg);}
  25%  {transform: translateX(-50px) rotate(15deg);}
  50%  {transform: translateX(-100px) rotate(-10deg);}
  75%  {transform: translateX(-150px) rotate(0deg);}
  100% {transform: translateX(-200px) rotate(10deg);}
}
@keyframes star2 {
  0%   {transform: translateY(0px) translateX(0px) rotate(28deg);}
  25%  {transform: translateY(-10px) translateX(20px) rotate(15deg);}
  50%  {transform: translateY(-20px) translateX(30px) rotate(-10deg);}
  75%  {transform: translateY(-30px) translateX(50px) rotate(0deg);}
  100% {transform: translateY(-40px) translateX(75px) rotate(10deg);}
}
@keyframes beatopia {
  0%   {transform: translateX(0px) translateY(0px) rotate(28deg);}
  25%  {transform: translateX(-10px) translateY(10px) rotate(15deg);}
  50%  {transform: translateX(-20px) translateY(20px) rotate(-10deg);}
  75%  {transform: translateX(-30px) translateY(30px) rotate(0deg);}
  100% {transform: translateX(-40px) translateY(40px) rotate(10deg);}
}
@keyframes guitar {
  0%   {transform: translateX(0px) translateY(0px) rotate(40deg);}
  25%  {transform: translateX(10px) translateY(10px) rotate(100deg);}
  50%  {transform: translateX(20px) translateY(20px) rotate(200deg);}
  75%  {transform: translateX(30px) translateY(30px) rotate(298deg);}
  100% {transform: translateX(40px) translateY(40px) rotate(348deg);}
}

.logo:hover .fishimg {
  transform: rotate(30deg);
}
.logo:hover .cloverimg {
  transform: rotate(-10deg);
}

.guestbook:hover h2{
  transform: scale(1.1);
}
.guestbook:hover .casetteimg {
  transform: rotate(30deg);
}
.guestbook:hover .diaryimg {
  transform: rotate(15deg);
}
.guestbook:hover .postimg {
  transform: rotate(-20deg);
}

.media:hover h2{
  transform: scale(1.1);
}
.media:hover .tamaimg {
  transform: rotate(10deg);
}
.media:hover .star1img {
  transform: rotate(-10deg);
}
.media:hover .camimg {
  transform: rotate(-20deg);
}


@media (max-width: 768px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .parent > div {
    grid-area: auto;
    width: 100%;
  }

  .logo {
    margin: 0;
  }

  body {
    overflow-y: auto;
  }
}