/* Much of this is taken directly from https://github.com/Richter248/moduled-site/blob/main/src/styles.css with permission from myself*/

/* ---------------------------------------------------------------
   Styles generated by Lumo (ChatGPT) – 04 Mar 2026
   Tweaked by me
   --------------------------------------------------------------- */

:root {
--carmilla-bg:        #282a36;   /* dark background */
--carmilla-fg:        #f8f8f2;   /* primary foreground (text) */
--carmilla-comment:   #6272a4;   /* muted / comment colour */
--carmilla-cyan:      #8be9fd;   /* cyan accent */
--carmilla-green:     #50fa7b;   /* green accent */
--carmilla-mint:      #1abc9c;   /* other green accent I used for intro header*/
--carmilla-orange:    #ffb86c;   /* orange accent */
--carmilla-pink:      #ff79c6;   /* pink accent */
--carmilla-purple:    #bd93f9;   /* purple accent */
--carmilla-red:       #ff5555;   /* red accent */
--carmilla-yellow:    #f1fa8c;   /* yellow accent */

/* UI helper aliases */
--carmilla-primary:   var(--carmilla-purple);
--carmilla-success:   var(--carmilla-green);
--carmilla-warning:   var(--carmilla-orange);
--carmilla-danger:    var(--carmilla-red);
--carmilla-info:      var(--carmilla-cyan);

/* Text variations */
--carmilla-text-primary:   var(--carmilla-fg);
--carmilla-text-muted:     var(--carmilla-comment);
--carmilla-text-inverse:   #21222c;   /* lighter surface text */

/* Surface colours (cards, inputs, dialogs) */
--carmilla-surface:         #44475a;
--carmilla-surface-hover:   #53566e;

/* New Palette Time: Grove */
--grove-bg:          #ddf2e8; /* Mint Green :) */
--grove-fg:          #45966e; /* Dark Green Primary Foreground and Text */
--grove-yellow:      #edd749; 

--grove-primary:     var(--grove-yellow);

/* Cool Fonts */
@font-face {
    font-family: tf2build;
    src: url('/fonts/tf2build-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

}

/* -------------------------------------------------
   Example card component – pure CSS
   ------------------------------------------------- */
.card {
  background: var(--carmilla-surface);
  color: var(--carmilla-text-primary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: background .2s, box-shadow .2s;
}
.card:hover {
  background: var(--carmilla-surface-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Optional image header */
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Typography */
.card h2 {
  margin: 0 0 .4rem;
  font-size: 1.25rem;
  color: var(--carmilla-text-primary);
}
.card h3 {
  margin: 0 0 .8rem;
  font-size: .95rem;
  color: var(--carmilla-text-muted);
}
.card p {
  margin: 0 0 1.2rem;
  line-height: 1.45;
  color: var(--carmilla-text-primary);
}

/* Buttons */
.card button {
  border: none;
  border-radius: 4px;
  padding: .45rem .9rem;
  cursor: pointer;
  font-size: .9rem;
  transition: opacity .2s;
}
.card button.primary {
  background: var(--carmilla-primary);
  color: var(--carmilla-bg);
}
.card button.primary:hover { opacity: .9; }

.card button.danger {
  background: var(--carmilla-danger);
  color: var(--carmilla-bg);
}
.card button.danger:hover { opacity: .9; }



body {
  background-color: var(--grove-bg);
  background-image: url('/bg_1_mesa_matoran.png');
  color: var(--carmilla-text-primary);
  text-align: center;
  font-family: Ubuntu;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#header_01 {
  font-family: 'tf2build';
  height: 359px;
  width: 1143px;
  background-image: url('/imgs/gloriaBg.jpg');
  margin: auto;
  font-size: 28px;
  align-content: center;
}

menu {
  justify-content: center;
  float: none;
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 1em;
  gap: 2em;
}

#mainbox {
  height: 800px;
  width: 700px;
  background-image: url('/boxbg1.webp');
  border: black 8px ridge;
  margin: auto;
  margin-top: 20px;
}

.menu_bg {
  background-color: #7f708a;
  border: solid thin black;
}