/* Main style definition */
/* For native components (like body), images and color palettes */

* {
  font-family: Arial;
  color: var(--text);
}

body {
  background-color: var(--crust);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
}

header {
  display: flex;
  background-color: var(--surface0);
  padding: 15px;
  margin: 10px;
  margin-bottom: auto;
  flex-flow: column wrap;
  justify-content: space-between;
  border-radius: 8px;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);

  @media only screen and (min-width: 650px) {
    margin: 3px 6vw 5px;
    flex-flow: row wrap;
  }
}

main {
  margin: 10px;
  flex: 1;
  background-color: var(--mantle);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);

  @media only screen and (min-width: 650px) {
    margin: 3px 6vw 5px;
  }
}

footer {
  display: flex;
  background-color: var(--surface0);
  padding: 15px 3px;
  margin: 10px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: 8px;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);

  @media only screen and (min-width: 650px) {
    margin: 3px 6vw 5px;
  }
}

custom-popup {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
}

form {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  color: var(--mauve);
}

input {
  min-height: 40px;
  max-width: 200px;
  color: var(--text);
  background-color: var(--surface1);
  border: none;
  padding: 5px;
  margin: 5px;
  font-size: 0.9em;
  cursor: text;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

input[type="submit"] {
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: var(--surface2);
}

select {
  min-height: 40px;
  width: 200px;
  color: var(--text);
  background-color: var(--surface1);
  border: none;
  padding: 5px;
  margin: 5px;
  font-size: 0.9em;
  cursor: pointer;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

button {
  min-height: 40px;
  color: var(--text);
  background-color: var(--surface1);
  border: none;
  padding: 5px;
  margin: 5px;
  font-size: 0.9em;
  cursor: pointer;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

button:hover {
  background-color: var(--surface2);
}

/* Container for multiple button containers */
.buttons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Container for multiple buttons */
.button-container {
  display: flex;
  flex-flow: column wrap;
  align-items: end;
  flex-grow: 1;
  flex: 0;
  padding: 5px;
  justify-content: center;
}

.header-button {
  display: flex;
  height: fit-content;
  width: 150px;
  border-radius: 8px;
  align-items: center;
  justify-content: start;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);
}

.header-button > * {
  padding: 8px;
}

/* "catpuccin" palette colors */
/* "macchiato" theme */
.dark-theme {
  --rosewater: #f4dbd6;
  --flamingo: #f0c6c6;
  --pink: #f5bde6;
  --mauve: #c6a0f6;
  --red: #ed8796;
  --maroon: #ee99a0;
  --peach: #f5a97f;
  --yellow: #eed49f;
  --green: #a6da95;
  --teal: #8bd5ca;
  --sky: #91d7e3;
  --sapphire: #7dc4e4;
  --blue: #8aadf4;
  --lavender: #b7bdf8;
  --text: #cad3f5;
  --subtext1: #b8c0e0;
  --subtext0: #a5adcb;
  --overlay2: #939ab7;
  --overlay1: #8087a2;
  --overlay0: #6e738d;
  --surface2: #5b6078;
  --surface1: #494d64;
  --surface0: #363a4f;
  --base: #24273a;
  --mantle: #1e2030;
  --crust: #181926;
}

/* "latte" theme */
.light-theme {
  --rosewater: #dc8a78;
  --flamingo: #dd7878;
  --pink: #ea76cb;
  --mauve: #8839ef;
  --red: #d20f39;
  --maroon: #e64553;
  --peach: #fe640b;
  --yellow: #df8e1d;
  --green: #40a02b;
  --teal: #179299;
  --sky: #04a5e5;
  --sapphire: #209fb5;
  --blue: #1e66f5;
  --lavender: #7287fd;
  --text: #4c4f69;
  --subtext1: #5c5f77;
  --subtext0: #6c6f85;
  --overlay2: #7c7f93;
  --overlay1: #8c8fa1;
  --overlay0: #9ca0b0;
  --surface2: #acb0be;
  --surface1: #bcc0cc;
  --surface0: #ccd0da;
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
}

.img--small {
  padding: 20px;
  width: 10%;
  height: auto;
  object-fit: contain;
}