@font-face {
    font-family: Minecraftia;
    src: url("Minecraftia-Regular.ttf");
}

 @font-face {
    font-family: Newspaper;
    src: url("Newspaper.ttf");
}

.home-content {
    background:lightblue;
    color:darkblue;
    border: darkblue 7px solid;
}

 .punk-content {
    font-family: Newspaper, monospace;
    font-size: 40px;
    line-height: 1.5;
    padding: 20px;
}

.kangoroo-content {
    background:white;
    color:black;
    border: black 5px solid;
}

.ocean-content {
    background-image: url("https://robinthepeople.neocities.org/ocean.jpg");
    border-radius: 25px;
    color:white;
    border: lightblue 2px solid;
}

  .game-content {
    font-family: Minecraftia, monospace;
    font-size: 18px;
    line-height: 1.5;
    padding: 20px;
    background-image: url("https://robinthepeople.neocities.org/parchment.jpg");
    border: black 7px solid;
    box-shadow: 7px 7px 12px black;
    position: relative;
}

body {
    background-image: url("https://robinthepeople.neocities.org/pixel.png");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    color: black;
    font-family: Tahoma;
  }
  
 .gallery-page {
     background-image: url("https://robinthepeople.neocities.org/ocean.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.library-page {
     background-image: url("https://robinthepeople.neocities.org/library.png");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}
  
   .kangoroo-page {
     background-image: url("https://robinthepeople.neocities.org/digital.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

  .punk-page {
     background-image: url("https://robinthepeople.neocities.org/spray.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

 .piercings-page {
     background-image: url("https://robinthepeople.neocities.org/wood.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

 .mountain-page {
     background-image: url("https://robinthepeople.neocities.org/mountain.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.minecraft-page {
     background-image: url("https://robinthepeople.neocities.org/minecraft.png");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}
 
.box {
    max-width: 1000px;
    margin: 100px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 350px minmax(0, 1fr)
  }
  
  header {
    border-radius: 25px;
    background:white;
    color: black;
    grid-row: 1 / 2 ;
    grid-column: 1 / 3 ;
    padding: 20px;
  }
  
  nav {
    background:lavender;
    position:relative;
    grid-row: 2 / 3 ;
    grid-column: 1 / 2 ;
    height: max-content;
    padding: 20px;
    li::marker {
      content:none;
    }
  }
  
  main {
    background:white;
    grid-row: 2 / 3 ;
    grid-column: 2 / 3 ;
    height: max-content;
    padding: 20px;
  }
  
  footer {
    border-radius: 25px;
    background:white;
    color: black;
    grid-row: 3 / 4 ;
    grid-column: 1 / 3 ;
    padding: 20px;
    li::marker {
      content:none;
    }
  }
  
  
header, nav, main, footer {
  border: lightblue 2px solid;
}


.draggable {
  position: absolute;
  cursor: grab; /* Shows the little hand icon */
  user-select: none;
  touch-action: none;
  z-index: 1;
}

.draggable:active {
  cursor: grabbing; /* Shows the closed fist when clicking */
}

.slider-container {
  text-align: center;
}

#display-photo {
  border: 2px solid #000;
  display: block;
  margin: 0 auto 10px;
}