/* 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-image: url("images/greenbg.png");
  background-color: darkseagreen;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
  font-family: "Courier New";
  cursor:url("images/handnorm.gif"), auto;
}

iframe {
  cursor:url("images/handnorm.gif"), auto;
}
  

a:hover {
  cursor:url("images/linkhand.gif"), auto;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


#main {
    background-color: lightgreen;
    border: 1px solid green;
    color: #333333;
    padding: 20px;
    width: 80%;          /* adjustable */
    max-width: 1200px;   /* prevents over-expansion */
    margin: 30px auto;   /* centres the whole block */
    box-sizing: border-box;
    cursor:url("images/handnorm.gif"), auto;
}

                
  .content-row iframe {
  flex: 1;  
  width: 100%;/* takes remaining space */
  max-width: 100%;
  border: none;
  box-shadow: 4px 4px 0px darkgreen;
  cursor:url("images/handnorm.gif"), auto;
}

#sidebar {
  width: 260px;
  flex-shrink: 0;
  background-color: #e0fff0;
  border: 2px solid green;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 4px 4px 0px darkgreen; /* comic-style shadow */
  cursor:url("images/handnorm.gif"), auto;
}

.header-image {
  display: block;        /* Makes margin auto work */
  margin: 0 auto;        /* Centers horizontally */
  width: auto;          /* Resize width */
  height: 300px;          /* Keeps aspect ratio */
}

.content-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  margin: 20px auto 0 auto;
}

/* main menu */
#main > ul {
  width: 100%;
  max-width: 100%;
  list-style-type: none;
  margin: 0 auto;
  display: block;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;          /* if you need clearfix for floated li */
  background-color: DarkCyan;
  border: 2px solid;
  border-color:green;
  box-shadow: 4px 4px 0px dimgray; /* comic-style shadow */
  cursor:url("images/handnorm.gif"), auto;
}

#main > ul li {
  float: left;
}

#main > ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
}

#main > ul li a:hover {
  background-color: MediumAquaMarine;
}


#footer {
  display: flex;                 /* lay out children in a row */
  align-items: center; 
  width: 80%;          /* adjustable */
  max-width: 1200px;
  margin: 30px auto;
  background-color: MediumSeaGreen;/* vertically align items */
  justify-content: space-between;/* put space between the two blocks */
  gap: 1rem;                     /* optional spacing between them */
  padding: 1rem; 
  border: 1px solid green;
  box-sizing: border-box;/* optional: some breathing room */
  cursor:url("images/handnorm.gif"), auto;
}

#neocities img {
  max-height: 32px;              /* optional: control badge size */
  height: auto;
  width: auto;
}


.side-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 12px 0;
}


.content-row iframe {
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-height: 0;       /* important for flexbox */
  overflow-y: auto;    /* show scrollbar when needed */
  border: none;
  box-shadow: 4px 4px 0px darkgreen;
  cursor:url("images/handnorm.gif"), auto;
}

/* Optional: stack on small screens */
@media (max-width: 500px) {
  #footer {
    flex-direction: column;      /* stack vertically on narrow screens */
    align-items: flex-start;
  }
}


@media (max-width: 800px) {
  .content-row {
    flex-direction: column;
  }
}

#buttons p {
  text-align: center;
}

.container {
  display: flex;
  background-color: CadetBlue;
}

.container div {
  background-color: DarkSeaGreen;
  margin: 10px;
  padding: 20px;
  flex: 1;
}

.container div:first-child {
  flex: 2;
}

#gustbook {
    cursor:url("/images/handnorm.gif"), auto;
}