style.css

/* HEX CODES:
#013026
#014760
#107e57
#a1ce3f
#cbe58e */

:root {
  --black: #121212;
  /*   --green-500: #013026;
  --green-400: #014760;
  --green-300: #107e57;
  --green-200: #a1ce3f;
  --green-250: #a9fa80;
  --green-100: #cbe58e; */

  --green-500: #0f5298;
  --green-400: #2565ae;
  --green-300: #3c99dc;
  --green-200: #66d3fa;
  --green-250: #d5f3fe;
  --green-100: #f0f8ff;

  --light-gray: hsl(100, 0%, 80%);
  --white: #ebebeb;
  --primary: hsl(60, 10%, 10%);
  --secondary: hsl(60, 100%, 5%);
  --tertiary-color: hsl(60, 70%, 50%);
}
html {
  font-size: calc(0.7rem + 0.390625vw);
}

body {
  background-color: var(--black);
  /*   background-image: url("./green-cosmos.webp"); */
  background-color: var(--black);
  background-blend-mode: overlay;
  background-size: cover;
  color: var(--white);
  font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
    sans-serif;
  font-weight: normal;
}

h1,
h2,
h3 {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif;
  font-weight: normal;
  color: var(--green-100);
  text-align: center;
}

.container {
  /*   min-height: 80vh; */
  width: 95vw;
  margin: 0 auto;
  padding: 0 1vw;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */

  place-items: center center;
  gap: 1vh 1vw;

  /*   background-color: #0009;
  box-shadow: 0px 0px 16px 12px #0009; */

  grid-template-areas:
    "h"
    "m";
}

header {
  grid-area: h;
  z-index: 1;
  text-align: center;
  position: sticky;
  top: 5px;
  /*   background-color: #000a; */
  padding: 0 3px 3px 3px;
  /*   box-shadow: 0px 0px 16px 12px #000a; */
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(5px);
  /*   border: 1px solid rgba(0, 0, 0, 0.3); */
  box-shadow: 0px 0px 16px 12px rgba(0, 0, 0, 0.3);
}

nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-area: n;
  /*   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  gap: 0.5vh 0.5vw;
}

main {
  margin-top: 1vh;
  grid-area: m;
  display: grid;
  grid-template-columns: 1fr;
  /*   place-items: start center; */
  gap: 1vh 1vw;
  grid-template-areas:
    "h2"
    "s";
}
.start-text {
  margin-bottom: 1.2vh;
}

h2 {
  margin-top: 2vh;
  margin-bottom: 1vh;
  grid-area: h2;
}

section {
  grid-area: s;
  display: grid;
  grid-template-columns: 1fr;
  place-items: start center;
  gap: 1vh 1vw;
  /*   grid-template-columns: 1fr; */
  /*  change layout and with of astr images in grid */
  /*   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
}

h1,
h2 {
  text-align: center;
}

h3 {
  margin-top: 1vh;
}

.info-container {
  /*   display: flex;
  gap: 1vh 1vw;
  margin-bottom: 1vh; */
}

.explanation figure {
  float: right;
  margin-left: 1vw;
}

.explanation figcaption {
  max-width: 200px;
}

.explanation figure img,
.explanation figure video {
  max-width: 200px;
  max-height: 130px;
  /*   object-fit: contain; */
}

.explanation figcaption {
  font-size: 0.7rem;
}

.menu-button {
  background-color: var(--green-250);
  color: black;
  border-radius: 5px;
  padding: 0.5vh 0.5vw;
}

.menu-button:hover {
  text-decoration: none;
  background-color: var(--green-300);
  color: var(--green-100);
}

.menu-button:active {
  background-color: var(--green-500);
  color: var(--green-100);
}

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

a:hover {
  color: var(--green-300);
  text-decoration: underline;
}

.explanation figure {
  margin-bottom: 0rem;
}

/* TIP */
figure {
  margin-bottom: 2rem;
}
/*TIP*/
figure img {
  margin: 0 auto;
  object-fit: contain;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.5em;
  max-height: 70vh;
}

.image-startpage {
  max-width: 200px;
  float: right;
  font-size: 0.7rem;
  border: 1px solid var(--green-300);
  border-radius: 25px;
  padding: 1vh 1vh;
}

.sources {
  /*   all: unset; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.sources > * {
  background-color: #01103099;

  border-radius: 10px;
  padding: 10px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vh 1vw;
}
.contact-textarea {
  grid-column-start: 1;
  grid-column-end: 3;
}

.contact-button {
  grid-column-start: 1;
  grid-column-end: 3;
}

.start-page {
  display: grid;

  grid-template-columns: repeat(1, 1fr);
}

article,
footer {
  padding: 1vw 1vh;
  background-color: #01103099;
  border-radius: 10px;
  margin-right: 1vw;
  /*   max-width: 50vw; */
}

footer {
  padding: 5px;
  font-size: 0.8rem;
  margin-bottom: 0.5vh;
}

.disclaimer {
  font-size: 0.8rem;
}

/*Contact start*/
.soc-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.soc-media a:nth-of-type(1):after {
  content: "";
}
.soc-media a:nth-of-type(2):after {
  content: "";
}

@media (min-width: 350px) {
  nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 600px) {
  nav {
    grid-template-columns: repeat(3, 1fr);
  }
  .soc-media {
    display: flex;
    flex-direction: row;
  }
  .start-text {
    max-width: 100vw;
  }
}
/*Contact end*/

@media (min-width: 850px) {
  nav {
    grid-template-columns: repeat(3, 1fr);
  }
  .start-page {
    grid-template-columns: repeat(2, 1fr);
  }
  /*   .container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "h h"
      "m m";
  } */
  section {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  nav {
    grid-template-columns: repeat(6, 1fr);
  }
  /*   .container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "h h h"
      "m m m";
  } */
  section {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1500px) {
  /*   .container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "h h h h"
      "m m m m";
  } */
  section {
    grid-template-columns: repeat(4, 1fr);
    /*     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  }
}

/*START option*/
/*START option*/
@arrowColor: #ffcc00;
@arrow: escape("@{arrowColor}");

input,
textarea,
button {
  font-size: 1rem;
  background-color: #var(--green-200);
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  padding: 1vh 1vw;
  border-radius: 4px;
  border: none;
  color: #000;
  /*   padding: 5px 20px 5px 10px;
  width: 12em;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none; */
}

.contact-button {
  max-width: 20em;
  justify-self: center;
}

select {
  font-size: 1rem;
  background-color: #var(--green-300);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{arrow}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  border-radius: 5px;
  text-align: left;
  border: none;
  color: #000;
  padding: 0.5vh 0.5vw;
  width: 12em;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /*   &::-ms-expand {
    display: none;
  } */
}

select:hover {
  background-color: var(--green-300);
  color: var(--green-100);
  cursor: pointer;
}

select:active {
  background-color: var(--green-500);
  color: var(--green-100);
}
/*END option*/

.news-text {
  border: 1px solid var(--white);
  border-radius: 25px;
  padding: 1vh 1vh;
  margin-bottom: 1vh;
}