/* Backgroud Image */
body {
    background-image: url('/extra/files/img/background.png');
    background-size: auto; /* Ensure the image covers the entire background */
    background-position: center bottom; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    opacity: 1;
}

/* Color Settings */
[data-md-color-scheme="slate"] {
    --md-hue: 211; 
    --md-default-bg-color:               #3a5358;
}

/* Add Fonts */
@font-face {
    font-family: 'Arctik-Mountain' ;
    src:url('/extra/fonts/arctik-mountains.ttf');
  }

  @font-face {
    font-family: 'Arctik-Cryo' ;
    src:url('/extra/fonts/Cryogenixitalic.ttf');
  }

/* Header */
.md-header__button.md-logo {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 96px;
    width: 96px;
  }

.md-header__title {
    flex-grow: 1;
    font-size: 3rem;
    height: 3.5rem;
    line-height: 3.5rem;
    font-family: "Arctik-Mountain";
    color: #e2e6e9;
    text-shadow: 3px 0 #238bda;
  }

  .md-typeset h1 {
    color: rgb(7, 28, 101);
    font-family: "Arctik-Mountain";
    text-shadow: 2px 0 #238bda;
}
  h2 {
    color: rgb(131, 131, 208);
    font-family: "Arctik-Cryo";
    text-shadow: 3px 0 #083353;
  }

/* Extra Text Coloration Settings */

:root > * {
  /* Primary color shades 
  --md-primary-fg-color:               rgb(68, 102, 212);
  --md-primary-fg-color--light:        rgb(56, 105, 239);
  --md-primary-fg-color--dark:         rgb(56, 105, 239);
  --md-primary-bg-color:               rgb(250, 252, 253);
  --md-primary-bg-color--light:        rgb(56, 105, 239);
  */

  /* Accent color shades*/
  --md-accent-fg-color:                rgb(224, 25, 25);
  --md-accent-fg-color--transparent:   hsla(210, 38%, 28%);
  --md-accent-bg-color:                hsla(210, 38%, 28%);
  --md-accent-bg-color--light:         hsla(210, 38%, 28%);
}

/* Extra Text CSS Classes */

.announcement {
    color: red;
    font-weight: bold;
    text-shadow: 3px 0 black;
}

.wg {
    color: red;
    font-weight: bold;
    text-shadow: 2px 0 rgb(207, 206, 206);  
}

.snik {
  color: rgb(202, 202, 18);
  font-weight: bold;
  /*text-shadow: 2px 0 rgb(207, 206, 206);*/  
}