@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);
}


body {
  background-image: url("https://slugger.neocities.org/graphics/backgrounds/home-background.png");
  background-size: 70px 70px;
  color: white;
  cursor: url("https://slugger.neocities.org/graphics/cursors/cursor-small.png"), auto;
}

.contain {
  width: 900px;
  height: 540px;
  display:grid;
  grid-template-areas: "header . ." "header nav ." "oc about about" "oc main main";
  grid-template-columns: 250px 150px 200px 200px;
  grid-template-rows: 40px 40px 150px 200px;
  justify-content: center;
}

.contain div {
  border: 2px solid white;
  background-image: linear-gradient(#000000, #161616);
}

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

.contain .main-content {
  grid-area: main;
  padding: 5px;
}

.contain .about-me {
  grid-area: about;
}

.contain .navigator {
  padding: 2px;
  grid-area: nav;
  img {
    width: 30px;
    height: 30px;
  }
}

.contain .oc {
  grid-area: oc;
  img {
    object-fit: fill;
  }
}

h1 {
    font-family: chicago-punk;
  }
  
 p1 {
    font-family: pixel_grunge;
  }