@charset "utf-8";

:root {
  --widthMax: 1280px;
  --widthUsko: 720px;
  --bgPage: hsl(40 10% 95%);
  --bgPageMediumDark: hsl(40 10% 90%);
  --bgPageDark: hsl(40 10% 75%);
  --bgPageDark2: hsl(40 10% 35%);
  --bgPageDark3: hsl(40 10% 85%);
  --accent: hsl(191, 100%, 39%);
  --accent2: hsl(91 50% 40%);
  --accent3: hsl(43 94% 54%);

  --shadow-color: 40deg 10% 70%;
  --shadow-elevation-low:
    0px 0.3px 0.3px hsl(var(--shadow-color) / 0.34),
    0px 0.5px 0.6px -1.2px hsl(var(--shadow-color) / 0.34),
    0px 1.2px 1.3px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0px 0.3px 0.3px hsl(var(--shadow-color) / 0.36),
    0px 1px 1.1px -0.8px hsl(var(--shadow-color) / 0.36),
    0px 2.5px 2.8px -1.7px hsl(var(--shadow-color) / 0.36),
    0px 6px 6.8px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0px 0.3px 0.3px hsl(var(--shadow-color) / 0.34),
    0px 1.7px 1.9px -0.4px hsl(var(--shadow-color) / 0.34),
    0px 3.3px 3.7px -0.7px hsl(var(--shadow-color) / 0.34),
    0px 5.3px 6px -1.1px hsl(var(--shadow-color) / 0.34),
    0px 8.5px 9.6px -1.4px hsl(var(--shadow-color) / 0.34),
    0px 13.3px 15px -1.8px hsl(var(--shadow-color) / 0.34),
    0px 20.3px 22.8px -2.1px hsl(var(--shadow-color) / 0.34),
    0px 29.9px 33.6px -2.5px hsl(var(--shadow-color) / 0.34);

  --wSpace: 20px;
}

html {
  box-sizing: border-box;
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h1 {
  font-size: 1.7rem;
  font-weight: 400;
}

h2 {
  font-size: 1.5rem;
  color: #007169;
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1.2rem;
  font-weight: 300;
}

p {
  color: black;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 0.9rem;
  text-align: left;
}

.temp {
  height: 100vh;
  width: 100vw;
  display: flex;
}

.temp_image {
  width: 100%;
  height: auto;
  background-color: #e8ad70;
  background-image: url("/images/rocks.webp");
  background-size: cover;
  background-position: center;
  flex: 1 1 50%;
}

.temp_text {
  width: 100%;
  height: auto;
  background-color: white;
  align-items: center;
  display: flex;
  justify-content: center;
  flex: 1 1 50%;
}

.temp_text_box {
  width: 70%;
}

.temp_text_box img {
  width: 100%;
  max-width: 550px;
  height: auto;
  margin-bottom: 60px;
}

.temp_text_box a {
  color: black;
  text-decoration: none;
}

@media only screen and (max-width: 1080px) {
}

@media only screen and (max-width: 780px) {
  .temp_image {
    flex: 1 1 20%;
  }

  .temp_text {
    flex: 1 1 80%;
  }
}
@media only screen and (max-width: 320px) {
}