@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  height: 5px;
  scroll-behavior: smooth;
}

::-webkit-scrollbar-track-piece {
  background-color: #3d3d3d26;
}

::-webkit-scrollbar-thumb {
  background: #5a5a5a;
}

::-webkit-scrollbar-thumb:hover {
  background: #585858a7;
}

body {
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  background: url(../img/ashford-marx-CiRtsI7A9xU-unsplash.jpg) fixed center;
  background-size: cover;
  scroll-behavior: smooth;
}

body .lightmode {
  color: #ffffff;
  background: #6b8e23;
}

body .darkmode {
  color: #ffffff;
  background: #3d3d3d;
}

body #main_container_website {
  overflow-x: auto;
  min-height: 100vh;
  background: transparent;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (20%)[5];
      grid-template-columns: repeat(5, 20%);
  -ms-grid-rows: 10vh max-content 10vh 90vh max-content max-content;
      grid-template-rows: 10vh -webkit-max-content 10vh 90vh -webkit-max-content -webkit-max-content;
      grid-template-rows: 10vh max-content 10vh 90vh max-content max-content;
      grid-template-areas: "header header header header header"
 "nav nav nav nav nav"
 "aside aside aside aside aside"
 "article article article article article"
 "main main main main main"
 "footer footer footer footer footer";
}

body #main_container_website header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: header;
  position: relative;
}

body #main_container_website header h1 {
  position: absolute;
  height: 1vh;
  top: 2.5vh;
  left: 2.5vh;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 0.75;
  letter-spacing: -1px;
  color: #ffffff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body #main_container_website header h1 a:link,
body #main_container_website header h1 a:visited {
  width: 9vh;
  height: 9vh;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #ffffff;
}

body #main_container_website header h1:hover {
  -webkit-transform: scaleX(1.1) scaleY(0.9);
          transform: scaleX(1.1) scaleY(0.9);
}

body #main_container_website header h1:active {
  -webkit-transform: scaleX(1.5) scaleY(0);
          transform: scaleX(1.5) scaleY(0);
}

body #main_container_website nav {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: nav;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body #main_container_website nav ul {
  margin: 1rem 0rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  list-style-type: none;
}

body #main_container_website nav ul li a:link,
body #main_container_website nav ul li a:visited {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #ffffff;
  background-color: transparent;
}

body #main_container_website nav ul li a:hover {
  color: #ffffff7a;
}

body #main_container_website nav ul li a:active {
  color: #ffffff49;
}

body #main_container_website nav ul li #active_site {
  -webkit-text-decoration: underline #ffffff 2px;
          text-decoration: underline #ffffff 2px;
  text-underline-offset: 2vh;
}

body #main_container_website nav ul li #active_site:hover {
  -webkit-text-decoration: underline #ffffff7a;
          text-decoration: underline #ffffff7a;
}

body #main_container_website nav ul li #actinve_site:active {
  -webkit-text-decoration: underline #ffffff49;
          text-decoration: underline #ffffff49;
}

body #main_container_website main.lightmode {
  background-color: #ffffff;
  color: #000000;
}

body #main_container_website main.darkmode {
  background-color: #3d3d3d;
  color: #ffffff;
}

body #main_container_website main.darkmode #container_searchfunction #searchInput {
  color: #ffffff;
}

body #main_container_website main.darkmode .website-list li a {
  color: #ffffff;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: solid #6e6e6e 1px;
}

body #main_container_website main {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: main;
  padding: 1rem;
  color: #ffffff;
}

body #main_container_website main .main_container_text_and_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 5rem;
  gap: 5rem;
}

body #main_container_website main .main_container_text_and_img .main_container_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 80%;
  line-height: 2.5em;
  font-size: 1.1rem;
}

body #main_container_website main .main_container_text_and_img .main_container_text canvas {
  width: 150px;
  height: 100px;
  border: 1px inset #6b8e23;
  border-radius: 0.4rem;
  background: url(../img/malte.png);
}

body #main_container_website main .main_container_text_and_img .main_container_text button {
  border: none;
  background-color: #6b8e23;
  color: #ffffff;
  margin: 0.5rem;
  padding: 0.25rem;
  border-radius: 0.4rem;
}

body #main_container_website main .main_container_text_and_img .main_container_text button:hover {
  cursor: pointer;
}

body #main_container_website main .main_container_text_and_img img {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 0.2rem;
  width: 80%;
  -webkit-box-shadow: rgba(0, 0, 0, 0.95) 0px 25px 20px -20px;
          box-shadow: rgba(0, 0, 0, 0.95) 0px 25px 20px -20px;
}

body #main_container_website main .main_container_text_and_img img:hover {
  -webkit-box-shadow: rgba(107, 142, 35, 0.4) 0px 0px 0px 3px, rgba(107, 142, 35, 0.3) 0px 0px 0px 6px, rgba(107, 142, 35, 0.2) 0px 0px 0px 9px, rgba(107, 142, 35, 0.1) 0px 0px 0px 12px, rgba(107, 142, 35, 0.05) 0px 0px 0px 15px;
          box-shadow: rgba(107, 142, 35, 0.4) 0px 0px 0px 3px, rgba(107, 142, 35, 0.3) 0px 0px 0px 6px, rgba(107, 142, 35, 0.2) 0px 0px 0px 9px, rgba(107, 142, 35, 0.1) 0px 0px 0px 12px, rgba(107, 142, 35, 0.05) 0px 0px 0px 15px;
}

body #main_container_website main .main_container_text_and_img .about_us_img {
  border-radius: 50%;
}

body #main_container_website main h2 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 800;
}

body #main_container_website main ul {
  margin: auto;
  list-style-type: none;
  width: 80%;
  height: 50vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body #main_container_website main ul li {
  margin: 1rem;
}

body #main_container_website main ul li a {
  text-decoration: underline;
}

body #main_container_website main #container_searchfunction {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body #main_container_website main #container_searchfunction h2 {
  font-size: 2rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: relative;
}

body #main_container_website main #container_searchfunction h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: -webkit-gradient(linear, left top, right top, from(#6b8e23), to(#8983f7));
  background: linear-gradient(to right, #6b8e23, #8983f7);
  bottom: 0;
  left: 0;
  border-radius: 0.4rem;
}

body #main_container_website main #container_searchfunction #searchInput {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  outline: none;
  font-size: 1rem;
  position: relative;
  text-align: center;
  background: transparent;
}

body #main_container_website main #container_searchfunction .no-results {
  display: none;
  color: #ff0000;
  font-weight: bold;
}

body #main_container_website main .website-list {
  list-style-type: none;
  padding: 0;
  overflow-x: scroll;
}

body #main_container_website main .website-list li a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #000000;
  font-size: 18px;
  -webkit-box-shadow: #ccdbe8 3px 3px 6px 0px, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px;
          box-shadow: #ccdbe8 3px 3px 6px 0px, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px;
}

body #main_container_website main .website-list li a:hover {
  color: #6b8e23;
  -webkit-box-shadow: #ccdbe8 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
          box-shadow: #ccdbe8 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

body #main_container_website aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: aside;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* The switch - the box around the slider */
  /* The slider */
}

body #main_container_website aside .checkbox-wrapper-54 input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

body #main_container_website aside .checkbox-wrapper-54 * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body #main_container_website aside .checkbox-wrapper-54::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body #main_container_website aside .checkbox-wrapper-54::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body #main_container_website aside .checkbox-wrapper-54 .switch {
  --width-of-switch: 3.5em;
  --height-of-switch: 2em;
  --size-of-icon: 1.4em;
  --slider-offset: 0.3em;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
  display: inline-block;
}

body #main_container_website aside .checkbox-wrapper-54 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f5;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 30px;
}

body #main_container_website aside .checkbox-wrapper-54 .slider:before {
  position: absolute;
  content: "";
  height: var(--size-of-icon, 1.4em);
  width: var(--size-of-icon, 1.4em);
  border-radius: 20px;
  left: var(--slider-offset, 0.3em);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

body #main_container_website aside .checkbox-wrapper-54 input:checked + .slider {
  background-color: #303136;
}

body #main_container_website aside .checkbox-wrapper-54 input:checked + .slider:before {
  left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
  background: #303136;
  -webkit-box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
          box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

body #main_container_website article {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: article;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-template-areas: ". . . . "
 ". article_container . . "
 ". article_container . . "
 ". . . . ";
  color: #ffffff;
}

body #main_container_website article #article_container {
  padding: 1rem;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: article_container;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body #main_container_website article #article_container #article_container_text h2 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 900;
  font-size: 3rem;
}

body #main_container_website article #article_container #article_container_text p {
  line-height: 2;
}

body #main_container_website article #article_container a {
  text-decoration: underline;
  float: left;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #ffffff;
}

body #main_container_website article #article_container a:hover {
  color: #ffffff7a;
}

body #main_container_website article #article_container a:active {
  color: #ffffff49;
}

body #main_container_website article #article_container #a_container_article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body #main_container_website article #article_container button {
  background: #ffffff;
  cursor: pointer;
  border: none;
  padding: 0.5rem;
  font-weight: 700;
}

body #main_container_website footer {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: footer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 3rem;
}

body #main_container_website footer #container_numberone_footer {
  width: 50vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 3rem;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

body #main_container_website footer #container_numberone_footer #container_footer h2 {
  margin-bottom: 1rem;
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

body #main_container_website footer #container_numberone_footer #container_footer h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: -webkit-gradient(linear, left top, right top, from(#6b8e23), to(#8983f7));
  background: linear-gradient(to right, #6b8e23, #8983f7);
  bottom: 0;
  left: 0;
  border-radius: 0.4rem;
}

body #main_container_website footer #container_numberone_footer #container_footer a {
  color: #000000;
  text-decoration: underline;
}

body #main_container_website footer #container_numberone_footer form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 1rem 1rem;
}

body #main_container_website footer #container_numberone_footer form h2 {
  margin-bottom: 1rem;
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

body #main_container_website footer #container_numberone_footer form h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: -webkit-gradient(linear, left top, right top, from(#6b8e23), to(#8983f7));
  background: linear-gradient(to right, #6b8e23, #8983f7);
  bottom: 0;
  left: 0;
  border-radius: 0.4rem;
}

body #main_container_website footer #container_numberone_footer form label {
  cursor: pointer;
  font-weight: 400;
}

body #main_container_website footer #container_numberone_footer form input,
body #main_container_website footer #container_numberone_footer form textarea {
  outline: none;
  border: none;
  border-radius: 0.2rem;
  background: #00000017;
  padding: 0.5rem;
  resize: vertical;
  width: 15rem;
}

body #main_container_website footer #container_numberone_footer form input::-webkit-input-placeholder,
body #main_container_website footer #container_numberone_footer form textarea::-webkit-input-placeholder {
  color: #000000;
}

body #main_container_website footer #container_numberone_footer form input:-ms-input-placeholder,
body #main_container_website footer #container_numberone_footer form textarea:-ms-input-placeholder {
  color: #000000;
}

body #main_container_website footer #container_numberone_footer form input::-ms-input-placeholder,
body #main_container_website footer #container_numberone_footer form textarea::-ms-input-placeholder {
  color: #000000;
}

body #main_container_website footer #container_numberone_footer form input::placeholder,
body #main_container_website footer #container_numberone_footer form textarea::placeholder {
  color: #000000;
}

body #main_container_website footer #container_numberone_footer form :last-child {
  color: #000000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-top: 1rem;
  cursor: pointer;
}

body #main_container_website footer #container_numberone_footer form :last-child:hover {
  background: #00000034;
  -webkit-transform: scaleX(1.025) scaleY(0.975);
          transform: scaleX(1.025) scaleY(0.975);
}

body #main_container_website footer #container_numberone_footer form :last-child:active {
  background: #00000046;
  -webkit-transform: scaleX(1.3) scaleY(0.8);
          transform: scaleX(1.3) scaleY(0.8);
}

body #main_container_website footer h3 {
  color: #3d3d3d;
  font-size: 0.8rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body #main_container_website footer.lightmode {
  background-color: #ffffff;
  color: #000000;
}

body #main_container_website footer.darkmode {
  color: #ffffff;
}

body #main_container_website footer.darkmode #container_numberone_footer #container_footer a {
  color: #ffffff;
}

body #main_container_website footer.darkmode #container_numberone_footer form input,
body #main_container_website footer.darkmode #container_numberone_footer form input::-webkit-input-placeholder,
body #main_container_website footer.darkmode #container_numberone_footer form textarea::-webkit-input-placeholder {
  color: #ffffff;
}

body #main_container_website footer.darkmode #container_numberone_footer form input,
body #main_container_website footer.darkmode #container_numberone_footer form input:-ms-input-placeholder,
body #main_container_website footer.darkmode #container_numberone_footer form textarea:-ms-input-placeholder {
  color: #ffffff;
}

body #main_container_website footer.darkmode #container_numberone_footer form input,
body #main_container_website footer.darkmode #container_numberone_footer form input::-ms-input-placeholder,
body #main_container_website footer.darkmode #container_numberone_footer form textarea::-ms-input-placeholder {
  color: #ffffff;
}

body #main_container_website footer.darkmode #container_numberone_footer form input,
body #main_container_website footer.darkmode #container_numberone_footer form input::placeholder,
body #main_container_website footer.darkmode #container_numberone_footer form textarea::placeholder {
  color: #ffffff;
}

body.darkmode {
  -webkit-transition: 1s;
  transition: 1s;
  background: url(../img/chuttersnap.jpg) center;
  background-position-y: -50vh;
  background-size: cover;
  background-blend-mode: color;
  background-color: #00000062;
}

@media only screen and (min-width: 600px) {
  body #main_container_website {
    -ms-grid-rows: 10vh 90vh max-content max-content;
        grid-template-rows: 10vh 90vh -webkit-max-content -webkit-max-content;
        grid-template-rows: 10vh 90vh max-content max-content;
        grid-template-areas: "header header nav nav aside"
 "article article article article article"
 "main main main main main"
 "footer footer footer footer footer";
  }
  body #main_container_website nav ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0rem;
  }
  body #main_container_website main .main_container_text_and_img {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  body #main_container_website main .main_container_text_and_img .main_container_text {
    width: 40%;
  }
  body #main_container_website main .main_container_text_and_img img {
    width: 40%;
  }
  body #main_container_website main .main_container_text_and_img .about_us_img {
    width: 15%;
  }
  body #main_container_website footer #container_numberone_footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  body #main_container_website footer form {
    display: contents;
    -ms-flex-line-pack: initial;
        align-content: initial;
    margin: 0rem 1rem;
  }
}
/*# sourceMappingURL=first_grid_website_home_scss.css.map */