/* 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 {
  background-color: #3a345b;
  color: white;
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  /* Left column: 200px | Middle: fills the rest | Right: 200px */
  grid-template-columns: 200px 1fr 200px; 
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto; /* This centers the site */
  padding: 20px;
}

.box {
  background-color: #f3c8dd;
  border: 2px dashed #4b1535;
  padding: 15px;
  color: #4b1535;
  border-radius: 10px;
  /* This ensures the box doesn't shrink weirdly */
  height: fit-content; 
}

/* 4. THE TITLE (Maya's Website!) */
.site-title {
  grid-column: 1 / 4; /* Makes title stretch across all 3 columns */
  text-align: center;
  font-size: 45px;
  color: pink;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* 5. LINKS (The Intersets list) */
a {
  color: #ffb6c1; /* Soft pink */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: white;
}

/* 6. SPECIAL BOX TWEAKS */
.intersets-wide {
  /* This makes the middle box the focus */
  grid-column: 2 / 3; 
}

/* If you want the "More..." box to look different */
.more-wide {
  border-style: double; 
}
  
  img {
max-width: 100%;
height: auto;
display: block;
margin:10px auto
}

iframe{
  width:100%;
  height: 200px;
  border-radius: 8px;
  border: 2px solid pink;
  display : block;
  margin: 10px 0;
  
  
}

.second-page {
  background-image:
  url("Maomao.jpg");
  background-size: cover;
  background-attachment:fixed;
  margin: 0;
  padding: 0;
}



.menu-container{
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 20px;
}

.menu-box{
background-color: #b9a5d2;
border:2px solid #fff;
border-radius: 15px;
padding:30px;
width:120px;
text-align:center;
font-family: 'Courier New', monospace;
box-shadow: 5px 5px 0px #223662;
}

@KeyFrames float {
  0%  {transform:
  translateY(0px);}
  50%  {transform:
  translateY(-10px);}
  100%  {transform:
  translateY(0px);}
}