body {
    margin: 0;
    font-family: Arial, sans-serif;
}

@font-face {
    font-family: "Magic Retro";
    src:url("https://scouts-log.neocities.org/fonts/Magic%20Retro.ttf") format("truetype");
}

iframe {
  display: block;
}

/* Header */
header {
    height: 128px;
    text-align: center;
    background-image: url("https://scouts-log.neocities.org/graphics/gingham300.png");
    display: flex;              
    flex-direction: column;
    justify-content: flex-end;    
    align-items: center;
} 








/* RGB VALUE, leave commas between, last value is opacity, can only be done if color value is RGB */
h1, h2, h3, h4, h5, h6 {
  color: black;
  font-family: "Magic Retro", sans-serif;
  letter-spacing: 2px;
  margin: 0;     
  padding: 0; 
  letter-spacing: 2px;
}

a:link {
  text-decoration: none;
  color:black;
  font-weight: bold;
}
a:visited{
    text-decoration: none;
  font-weight: bold;
  color: black;
}
a:hover {
  color: rgb(255, 255, 255);
}
a:active {
    color: rgb(255, 255, 255);
}

/* Top Navigation Bar */
.top-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 25px; 
    background-color: rgb(98 182 203);
}


.top-nav a {
    text-decoration: none;
}

/* Layout Wrapper */
.layout {
    display: flex;   /* Sidebar + Content side by side */
    min-height: 70vh;
}

/* Sidebar */
.sidebar {
    width: 170px; 
    padding: 5px;
    background-color:rgb(188, 235, 236);
    text-align: center;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

/* Main Content */
.content {
  flex: 1;
  padding: 20px;
  background-image: url("https://scouts-log.neocities.org/graphics/Twinklebg.gif");
  display: flex;
  flex-direction: column;
  align-items:  center;
  justify-content: flex-start; /* ← TOP instead of center */
}

/* SPECIAL SELECTORS */

p#fancytext {
   font-family: "Magic Retro", sans-serif; 
   letter-spacing: 1px;
}
div#bgtext, p#bgtext {
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 900px;      
  width: 100%;             
  box-sizing: border-box;
  margin: 0 auto;               
  padding: 18px 22px;
  border-radius: 15px;
  text-align: center;      
  
}


/* Footer */
footer {
    text-align: center;
    padding: 10px;
    background-color: rgb(0, 255, 255);
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    gap: 10px; /* space between items */
}

.box {
    background: lightgray;
    padding: 20px;
    text-align: center;
}