/* html + body */

html {
  cursor: url("https://slugger.neocities.org/graphics/cursors/cursor-small.png"), auto;
}

body {
  background-image: url("https://slugger.neocities.org/graphics/backgrounds/home-background-animated.gif");
  background-size: 70px 70px;
  color: white;
}

/* apples */

.apple {
  width:600px;
  height:430px;
  position:absolute;
  inset:0;
  place-self:center;
  
}

.gorn {
  position:absolute;
  top:-8px;
  left:217px;
  rotate:0deg;
  animation-iteration-count: infinite; 
  animation-play-state: paused;
  transition: 5s ease-in; 
} 

.gorn:hover {
  animation:buddy-dance 0.4s infinite;
  animation-play-state: running;
}

.ant {
  position:absolute;
  top:-46px;
  left:271px;
  rotate:0deg;
  animation-iteration-count: infinite; 
  animation-play-state: paused;
  transition: 5s ease-in; 
  z-index:-1;
}

.ant:hover {
  animation:buddy-dance 0.4s infinite;
  animation-play-state: running;
}

.sol {
  position:absolute;
  top:-28px;
  left:369px;
  rotate:0deg;
  animation-iteration-count: infinite; 
  animation-play-state: paused;
  transition: 5s ease-in; 
}

.sol:hover {
  animation:buddy-dance 0.4s infinite;
  animation-play-state: running;
}

.jayjels {
  position:absolute;
  top:-29px;
  left:427px;
  rotate:0deg;
  animation-iteration-count: infinite; 
  animation-play-state: paused;
  transition: 5s ease-in; 
  z-index:-1;
}

.jayjels:hover {
  animation:buddy-dance 0.4s infinite;
  animation-play-state: running;
}

/* main elements */

.contain {
  position:absolute;
  inset: 0;
  place-self:center;
  width:600px;
  height:430px;
  display:grid;
  grid-template-areas: "header . . ." "header . . ." "oc main main nav" "oc footer footer nav";
  grid-template-columns: 250px 150px 200px 40px;
  grid-template-rows: 40px 40px 200px 140px;
}
 
.contain div {
  border: 2px solid white;
  background-color: black;
  padding: 7px;
}

.contain .header { 
  grid-area: header;
  padding: 7px;
  img {
    object-fit: fill;
    width: 100%;
    height: 100%;
  }
}

.contain .footer {
  grid-area: footer;
}

.contain .about {
  grid-area: main;
  padding: 6px;
}

.contain .navigator {
  grid-area: nav;
  padding: 6px;
  img {
    width: 25px;
    height: 25px;
  }
  a {
    text-decoration: none;
  }
}

.contain .oc {
  grid-area: oc;
  padding: 7px;
  img {
    object-fit: fill;
    width: 100%;
    height: 100%;
  }
}

.contain .liked-media {
  grid-area: main;
  padding: 7px;
  img {
    width: 50px;
    height: 50px;
  }
}

/* animations */

@keyframes buddy-dance {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 

/* fonts */

@font-face { 
  font-family: chicago-punk;
  src: url(https://slugger.neocities.org/fonts/chicago_punk.woff);
}

@font-face {
  font-family: pixel_grunge;
  src: url(https://slugger.neocities.org/fonts/pixel_grunge.woff);
}

h1 {
    font-family: chicago-punk;
    font-size: 22px;
  }
  
 p1 {
    font-family: pixel_grunge;
    font-size: 12px;
  }