/*
 * @font-face {
  font-family: 'CD1';
  src: url('../content/fonts/cd1.otf') format('opentype');
}
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  font-family: monospace, sans-serif;
  background-color: #1e1e1e;
  color: #ffff;
}

/* -- LINK STYLING -- */

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}


a {
  color: #71a8bc;
  text-decoration: none;
  transition: color 1.0s ease, text-decoration 1.0s ease;
}

a:hover {
  color: #7ced66;
  text-decoration: underline;
}


/* -- -- */
.container p {color: #8f8f8f;}
.container h2 {color: #bababa;}


.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "about comics"
    "socials tools";
}

section {
  padding: 1rem;
  overflow-y: auto;
}

/* Assign areas for desktop layout */
.about {
  grid-area: about;
  background-color: #252525;
}

.socials {
  grid-area: socials;
  background-color: #1e1e1e;
}

.comics h2 {color: #cdcdcd;}
.comics {
  grid-area: comics;
  background-color: #353535;
}

.tools {
  grid-area:.tools;
  background-color: #151515;
}

.comic-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.comic img {
  width: 100px;
  height: auto;
  display: block;
}

.cover-thumb {
  width: 100px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 5px #000;
}


/* 📱 Mobile: Stack vertically in a custom order */
@media (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .about { order: 1; }
  .comics { order: 2; }
  .tools { order: 3; }
  .socials { order: 4; }

  .comic-gallery {
    justify-content: center;
  }
}