/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  min-height: 220vh;
  background-image: linear-gradient(lightblue, lightgreen);
  background-repeat: no-repeat;
  background-size: cover;
  color: midnightblue;
  font-family: 'Minecraft';
}

.glow {
  text-shadow: 0 0 3px #fff, 0 0 8px #E65790;
}

@font-face {
  font-family: 'Minecraft';
  src: url('fonts/Minecraft.ttf') format('truetype');
}

.gradient-text {
  background: linear-gradient(to right, red, rgb(0, 255, 76),rgb(0, 89, 130),violet);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.arrow-icon {
  position: absolute;
  height: 35px;
  width: 50px;
  background-size: 50%;
  background-image: url('images/arrow.png');
  background-repeat: no-repeat;
  margin-left: 30px;
  margin-bottom: 30px;
}

.arrow-icon2 {
  position: absolute;
  height: 35px;
  width: 50px;
  background-size: 50%;
  background-image: url('images/arrow.png');
  background-repeat: no-repeat;
  margin-left: 13px;
  margin-bottom: 30px;
}

.sitting-character {
  position: absolute;
  height: 600px;
  width: 400px;
  background-size: 100%;
  background-image: url('images/sitting-character.png');
  background-repeat: no-repeat;
  margin-top: 650px;
  margin-left: 100px;
}

.bottom-banner {
  position: absolute;
  height: 600px;
  width: 400px;
  background-size: 100%;
  background-image: url('images/bottom-banner.png');
  background-repeat: no-repeat;
  margin-top: 0px;
  margin-left: 60px;
}

.standing-character {
  position: absolute;
  height: 650px;
  width: 400px;
  background-size: 105%;
  background-image: url('images/standing-character.png');
  background-repeat: no-repeat;
  margin-top: 450px;
  margin-left: 855px;
}

.nav-section {
  background-image: url('images/ui-frame.png');
  background-size: 150%;
  background-position: -50px;
  border: 4px groove #E65790;
  margin: 0;
  font-family: 'Minecraft', sans-serif;
  box-shadow: 2px 2px 0 #f08cc7;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  margin: 8px 0;
  border-top: 2px groove #E65790;
  padding-top: 8px;
}

.nav-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.nav-list a {
  color: midnightblue;
  text-decoration: none;
  font-weight: bold;
  padding-left: 10px;
  display: block;
  position: relative;
}

.nav-list a::before {
  content: "❯"; /* retro arrow */
  position: absolute;
  left: 5px;
  color: midnightblue
}

.background-overlay {
  position: absolute;
  top: 80;
  left: 5;
  height: 1100px;
  width: 1300px;
  margin-left: 20px;
  margin-top: 80px;
  border-radius: 40px 40px 40px 40px;
  border: 4px groove #E65790;
  background-color: rgba(254, 255, 248, 0.7); /* white, semi-transparent */
  z-index: 0;
  -webkit-box-shadow: -4px 5px 15px 5px rgba(121,74,128,0.36); 
  box-shadow: -4px 5px 15px 5px rgba(121,74,128,0.36);
}

.centered-image { 
  display: block; 
  border-radius: 10px;
  margin-top: 60px;
  margin-left: auto; 
  margin-right: auto;
}

.rounded-image {
  display: block;
  border-radius: 40px 40px 0px 0px;
  border: 4px groove #E65790;
}

.title-image {
  display: block;
  margin-left: 50px;
  width: 50%;
  z-index: 2;
}

.title-image2 {
  display: block;
  margin-left: 50px;
  width: 80%;
  z-index: 2;
}

.frameset-wrapper {
  margin-left: 125px; /* push the whole group to the right */
}

.frameset {
  display: flex;
  align-items: flex-start; /* Align top edges of boxes */
  height: 100vh;
  position: relative;
  z-index: 1;
}

.side-frame {
  width: 200px; /* small side frames */
  min-height: 50px;
  box-sizing: border-box;
  background-image: url('images/ui-frame.png');
  background-size: 150%;
  background-position: -50px;
  margin-right: 20px;
  font-family: 'Minecraft', sans-serif;
  border: 4px groove #E65790;
  text-align: center;
  -webkit-box-shadow: -4px 5px 15px 5px rgba(121,74,128,0.36); 
  box-shadow: -4px 5px 15px 5px rgba(121,74,128,0.36);
}

.left-panel {
  border: 4px groove #E65790;
}

.right-panel {
  border: 4px groove #E65790;
}

.main-panel {
  border: 4px groove #E65790;
  background-image: url('images/ui-frame.png');
  background-size: 185%;
  background-position: -80px;
  background-repeat: no-repeat;
  padding: 30px;
  width: 500px;
  height: 600px;
  color: midnightblue;
  text-align: center;
  -webkit-box-shadow: -4px 5px 15px 5px rgba(121,74,128,0.36); 
  box-shadow: -4px 5px 15px 5px rgba(121,74,128,0.36);
}

.text-box {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 35px 15px 15px;
  border-radius: 10px;
  border: 8px solid white;
  width: 1000px; /* or any fixed value */
  margin-top: 100px;
  margin: 30px auto; /* add this when centering a box */
  text-align: center;
  z-index: 1;
}

.fancy-box {
  border: 4px groove #E65790;
  background-image: url('images/ui-frame.png');
  background-size: 180%;
  background-position: -50px;
  background-repeat: no-repeat;
  padding: 35px 15px 15px;
  margin: 40px auto;  
  width: 600px;
  height: 800px;
  font-family: 'Minecraft', sans-serif;
  color: midnightblue;
  text-align: center;
}

.left-text {
  display: block;
  color: midnightblue;
  font-family: 'Minecraft';
  margin-left: 100px;
  text-align: left;
}