/* ---------------------------------------------------- */
/* hello welcome to hell of cascading style!!!!! */
/* ---------------------------------------------------- */

/* this is a font! (make sure the font file path is correct. */
@font-face {
  font-family: "Comics";
  src: url("fonts/ComicNeue-Regular.ttf") format("truetype");
  font-display: swap; /* load faster, show system font first */
}

/* this is html! it sets some default scroll and layout rules. */
html {
  scroll-behavior: smooth; /* smooth scrolling for all anchor jumps */
}

/* this is body! the big wrapper of everything you see. */
body {
  font-family: "Comics", Arial, sans-serif;
  margin: 15px auto;          /* centered on screen */
  max-width: 900px;           /* old web feels but still responsive */
  background-color: #4b0000;  /* dark red background */
  color: #ffdddd;             
  padding: 0;
}

/* this is header family, all the big title texts. */
h1, h2, h3 {
  font-family: "Comics", cursive;
  color: #ffeb3b;                  
  text-align: center;
  text-shadow: 1px 1px 2px #300;   /
}

/* this is link stuff! or just anchor*/
a {
  color: #ffcc00;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

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

a:visited {
  color: #cc9900; /* a little darker after you’ve clicked it. */
}

/* this is navigation! the top menu bar thingy. */
nav {
  background-color: #550000;
  padding: 10px;
  text-align: center;
}

/* spacing for links inside the nav, because cramped menus suck. */
nav {
  background-color: #550000;
  padding: 10px;
  display: inline-block; /* makes it shrink to fit content */
  text-align: center;
  margin: 0 auto; /* centers it horizontally */
}


/* this is a grid stuff! it’s the layout skeleton. */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 5px;
  background-color: #720202;
  padding: 5px;
  
}

/* an grid area!*/
.container > div {
  background-color: rgba(77, 0, 0, 0.8);
  padding: 5px;
}

/* this is the header area or rather a banner*/
.container > div.header {
  grid-area: header;
  text-align: center;
}

/* just to make sure images dont stretch or hwatever lol*/
.container > div.header .logo-image {
  display: flex; /*modern layout */
  justify-content: center;     /* center horizontally */
  align-items: flex-end;         /* end vertically */
  gap: 5px;                   /* spacing between images */
background: linear-gradient(#202020, #101010); /* self explantory. */
  border: 5px solid grey; /* self explantory. */
  width:auto;
}
/*.container > div.header .logo-text{
    width: 15%;
    padding: auto;
    background-color: gray;
    border: 10px solid white;
    color: red; /* self explantory. 
}
    */
/* make sure images don’t overflow or stretch */
.container > div.header img {
  width: auto;
  height: auto;
}

.button {
  background-color: #cf0000;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.container > div.menu {
  grid-area: menu;
  width: auto;
}

.container > div.content {
  grid-area: content;
  width: auto;
}

.container > div.footer {
  grid-area: footer;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.8;
}
/* this is a responsiveness patch, which im still learning, hope this works though! if not, please remove this completely if you like.
@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "header"
      "menu"
      "content"
      "footer";
    grid-template-columns: 1fr;
  }

  body {
    max-width: 100%;
    margin: 0;
    padding: 10px;
  }

  nav {
    font-size: 0.95em;
  }
} */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0 4px;
}

.column img {
    width: 100px;
  margin-top: 8px;
  vertical-align: middle;
}
/*FIN */