/* +++++++++++++++++++++++++++++++++++++++++ */
/*           UNIVERSAL SELECTOR              */
/* +++++++++++++++++++++++++++++++++++++++++ */

/* NEVER FUCKING REMOVE THIS - KMS */
*,
::before,
::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
img {
  box-sizing: content-box;
}
html {
  box-sizing: border-box;
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                VARIABLES                  */
/* +++++++++++++++++++++++++++++++++++++++++ */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors */

  /* outline */
  --background-color: #1d1d1d;

  /* inside */
  --content-background-color: #0d0d0d;
  --menu-background-color: #383838;
  --menu-active-background-color: #575757;
  --menu-color: #bdbdbd;

  /* Text Colors */
  --text-color: #acacac;

  /* Links */
  --link-color: #66b243;
  --link-color-hover: var(--menu-active-background-color);

  /* Borders and Outlines */
  --default-outline: 8px double #2833b6;
  --default-border: 3px solid #4e69bc;

  /* Text: */
  --font: system-ui, sans-serif;
  --heading-font: var(--font);
  --font-size: 20px;

  /* Layout */
  /* Base Backgound Settings */
  --base-background-image: url(img/wallpaper/desgin15-faster.gif);
  --base-background-size: 120px;

  /* Main spacing unit */
  --spacing-unit: 7px;
  /* Double value needed for width/height calculations */
  --double-spacing: calc(2 * var(--spacing-unit));

  /* Internal boxes */
  --border: 6px solid;
  --clr-border: var(--content-background-color);

  /* Typography Variables */
  --line-height-body: 1.4;
  --line-height-heading: 1.2;

  /* Heading sizes */
  --h1-size: 2.5rem;
  --h2-size: 2rem;
  --h3-size: 1.75rem;
  --h4-size: 1.5rem;
  --h5-size: 1.25rem;
  --h6-size: 1rem;

  /* Transition Hover Button Effect */
  --transition-hover: background-color 0.5s ease;

  /* Button Style */
  --border-radius-button: 4px;
  --border-padding-button: 5px 5px;
}

a {
  text-decoration: none;
}

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

li {
  display: inline-block;
}

/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0.5em;
  text-decoration: underline;
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--line-height-heading);
}
h2 {
  font-size: var(--h2-size);
  line-height: var(--line-height-heading);
}
h3 {
  font-size: var(--h3-size);
  line-height: var(--line-height-heading);
}
h4 {
  font-size: var(--h4-size);
  line-height: var(--line-height-heading);
}
h5 {
  font-size: var(--h5-size);
  line-height: var(--line-height-heading);
}
h6 {
  font-size: var(--h6-size);
  line-height: var(--line-height-heading);
}

/* +++++++++++++++++++++++++++++++++++++++++ */
/*                  BODY                     */
/* +++++++++++++++++++++++++++++++++++++++++ */

body {
  /* transform: scale(0.7); */

  /* Exterior box */
  display: flex;
  flex-direction: column;

  /* Style Preference */
  margin-top: 25dvh;
  margin-bottom: 50dvh;

  /* You can change to 1250px if needing another aside */
  max-inline-size: 1250px;

  /* Will adapt to max-inline-size */
  margin-inline: auto;

  /* Background */
  background-image: url(img/wallpaper/16.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;

  font-family: var(--font);
  color: var(--text-color);
  font-size: var(--font-size);
  line-height: var(--line-height-body);
}

.message-box {
  padding: var(--spacing-unit);
  margin: calc(2 * var(--spacing-unit)) 0;
  border: var(--border);
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--text-color);
  font-size: inherit;
  line-height: 1.6;

  /* Optional inner padding for content inside message box */
  /*
  > * {
    padding: var(--spacing-unit);
  }
  */
}