/* 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." */
   



 * {
  box-sizing: border-box;
}

h1, h2, h3 {
  margin: 0;
}



#header,
#topbar,
#main,
#divgallery,
#footer {
  margin-bottom: 10px;
}


body {
  margin: 0;
  font-family: Anton, sans-serif;
  background-image: url("https://wonderbite.neocities.org/media/blue%20squigly.gif");
}

p, span, a, .date {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.6;
}

#content,
#sidebar,
#divgallery {
  padding: 10px;
}

#content {
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: white;
}



#sidebar p {
  color: black;
}
/* CANVAS */
#canvas {
  max-width: 1200px;
  width: 95%;
  min-height: 1200px;
  margin: 40px auto;
  background: rgba(62, 12, 75, 0.30);
  border: 2px solid #000;
}

  /* HEADER */
#header {
  width: 1150px;
  margin-left: 50px;
  padding: 5px 10px 5px 120px;
  background: black;
  position: relative;
  text-align: center;
}

#header h1 {
  font-size: 60px;
  color: yellow;
}

#header img {
  position: absolute;
  left: -40px;
  top: -40px;
  height: 140px;  
}

/* TOP BAR */
#topbar {
  height: 50px;
  background-image: url("media/celestial.jpg");
}


/* MAIN LAYOUT */
#main{
  display: flex;
  background-image: url("https://wonderbite.neocities.org/media/blue%20stars.jpg");
  margin-top: 10px;
  margin-bottom: 10px;
  
}

#content {
  flex: 7;
  height: 430px;        /* fixed height */
  overflow-y: auto;     /* vertical scroll */
  overflow-x: hidden;   /* prevent sideways scroll */
  padding: 20px;
}

.post {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px dashed #8C7722;
}

.post h3 {
  color: yellow;
  margin-bottom: 5px;
}

.post .date {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
}

.post img {
  max-width: 100%;
  border: 3px solid black;
  margin-top: 10px;
}


/* MAIN LAYOUT */

#divgallery {
  display: flex;           /* horizontal layout */
  align-items: center;     /* vertically center images in thin div */
  gap: 5px;                /* small space between images */
  height: 110px;            /* thin strip */
  background: black;       /* optional background */
  padding: 6px;            /* optional inner spacing */
  overflow-x: auto;        /* scroll if too many images */
}

#divgallery img {
  height: 95px;            /* make all images same height */
  width: auto;             /* keep aspect ratio */
}


/* SIDEBAR */
#sidebar {
  flex: 3;
  min-height: 200px;
  background-image: url("media/clouds.jpg");
  margin: 10px 0 10px 1%;
  padding: 15px;
}
#sidebar h2 {
  font-size: 20px;
  color: blue;
  width: 90%;
  margin: 15px;
}

.tama {
  position: absolute;
  bottom: 100px;
  right: 50px;
}


audio {
  width: 90%;
  margin: 15px;
}

.player {
  background: #8C7722;
  border: 4px #1a6cf0;
  padding: 10px;
  width: 85%;
  margin: 15px auto;

  display: flex;
  align-items: center;
  gap: 10px;
}

.player button {
  background: #1a6cf0;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
}

.player button:hover {
  background: hotpink;
  color: #1a6cf0;
}

.player span {
  color: black;
  font-size: 10px;
}

iframe {
  border: 3px solid black;
  border-radius: 10px;
  display: block;
  margin: 20px auto;
}

#content2 {
  min-height: 380px;
  background-image: url("https://wonderbite.neocities.org/media/celestial.jpg");
  margin-bottom: 10px;
  display: flex;
  gap: 20px;
  padding: 20px;
}

#content2 {
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: blue;
}


.blog-section {
  flex: 1;                 /* 1 part */
  max-width: 33%;
  height: 320px;           /* fixed height */
  overflow-y: auto;        /* scroll inside */
  background: rgba(0,0,0,0.6);
  padding: 15px;
  color: white;
  border: 2px solid #8C7722;
  box-shadow: inset 0 0 10px black;
}

.extra-section {
  flex: 2;                
  background: rgba(255,255,255,0.1);
  padding: 20px;
  color: white;
}



/* FOOTER */
#footer {
  height: 80px;
  background: black;
}

#footer p {
  font-size: 15px;
  color: #8C7722;
  
  
}