:root {
--main-green : #7FFF00;
--side-green : #7FFF00;
}

* {
margin : 0;
padding : 0;
box-sizing : border-box;
font-family : 'Montserrat', sans-serif;
outline : none;
overflow-x : hidden;
border : none;
line-height : 1.3;
scroll-behavior : smooth;
}

html {
font-size : 20px;
}

body {
width : 100%;
min-height : 100vh;
background-color : #fff;
}

.logo {
position : fixed;
z-index : 100;
top : 25px;
left : 25px;
}

.desktop-logo {
display : none;
}

.mobile-logo {
display : block;
}

.mobile-logo, .desktop-logo {
height : 65px;
width : auto;
overflow : hidden;
}

.mobile-logo img, .desktop-logo img {
height : 100%;
}

.logo-background {
position : fixed;
top : 15px;
display : none;
z-index : 90;
height : 85px;
background-color : rgb(0, 0, 0, 0.1);
width : 420px;
border-radius : 0 75px 75px 0;
transform : translateX(-100%);
transition : 500ms;
}

@media only screen and (min-width: 1000px) {
  .desktop-logo {
  display : block;
  }
  .mobile-logo {
  display : none;
  }
  .logo-background {
  display : block;
  }
  }
  @media only screen and (min-width: 1500px) {
  .logo {
  top : 35px;
  }
  .mobile-logo, .desktop-logo {
  height : 85px;
  }
  .logo-background {
  top : 20px;
  height : 115px;
  width : 530px;
  }
}

.landing-page {
height : 100vh;
width : 100%;
position : relative;
}

.landing-page-image {
height : 100vh;
width : 100%;
background-image : url(media/compressed/myrkytyspiste_003.jpg);
background-position : center;
background-size : cover;
background-repeat : no-repeat;
filter : brightness(80%);
}

.fof-image {
filter : grayscale(1) brightness(80%);
}

.slogan {
position : absolute;
inset : 0;
margin : 0 auto;
top : 30vh;
text-align : center;
color : var(--side-green);
width : 90%;
}

.fof-title {
font-size : 5rem;
}

.landing-page-button {
position : absolute;
left : 50%;
bottom : 10vh;
transform : translateX(-50%);
padding : 10px;
}

h1 {
font-size : 2rem;
font-weight : 800;
margin-bottom : 10px;
}

h2, h3, .slogan p {
font-size : 1rem;
font-weight : 800;
margin-bottom : 25px;
color : #000;
}

p, li, label, span {
font-size : 0.85rem;
}

.slogan h2 {
color : var(--side-green);
}

.slogan p {
color : var(--side-green) !important ;
}

span {
color : #8000FF;
display : inline-block !important ;
margin-left : 5px !important ;
}

h1, h2, h3, a, p, img, li, ul, input, label, span, textarea {
overflow : hidden;
}

.button {
display : inline-block;
font-size : 0.85rem;
padding : 15px 35px;
background-color : #7FFF00;
border-radius : 100px;
box-shadow : 0 3px 5px rgb(0, 0, 0, 0.25);
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .25);
cursor : pointer;
text-align : center;
outline : none;
font-weight : 800;
width : fit-content;
transition-property : transform, box-shadow;
transition-duration : 150ms;
white-space : nowrap;
margin : 10px;
}

.button:hover, .button:focus {
transform : translateY(3px);
box-shadow : 0 0 5px rgb(0, 0, 0, 0.25), 0 3px 5px rgb(0, 0, 0, 0.25) inset;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .25), inset 0 3px 5px rgba(0, 0, 0, .25);
}

.button:active {
background-color : #6cd900;
}

a {
text-decoration : none;
color : #000;
display : inline-block;
}

.story {
width : 100%;
display : flex;
flex-direction : column;
flex-wrap : wrap;
gap : 100px;
padding-bottom : 50px;
}

.story-image {
width : 100%;
height : auto;
}

.story-image img {
width : 100%;
height : auto;
display : block;
border-radius: 0;
}

.story-text {
width : 90%;
display : flex;
align-items : center;
justify-content : center;
margin : 0 auto;
}

.story p {
width : 100%;
}

.price-list {
padding : 50px 0;
}

.price-list-circle {
width : 300px;
height : 300px;
display : flex;
align-items : center;
justify-content : center;
background-color : #7FFF00;
border-radius : 100%;
margin : 0 auto;
position : relative;
}

.prices li, .prices h2 {
display : inline-block;
width : fit-content;
}

.prices {
width : 70%;
}

.prices li:nth-child(2) {
margin-bottom : 15px;
}

.contact-logo {
height : 700px;
width : auto;
position : absolute;
right : 0;
top : 50%;
transform : translate(50%,-50%);
z-index : -1;
}

.contact {
display : block;
width : 100%;
overflow : hidden;
position : relative;
padding-top : 50px;
min-height : 700px;
}

.contact-form h2, form .button, .lahetetty, span {
display : block;
width : 90%;
margin : 0 auto;
}

form label {
display : inline-block;
margin-left : 5%;
}

.contact-form h2 {
margin-bottom : 25px;
}

form #send {
color : #000;
margin-bottom : 10px;
}

label, span {
margin-bottom : 2px !important ;
}

input, textarea {
width : 90%;
display : block;
outline : none;
padding : 15px;
margin : 0 auto;
margin-bottom : 15px;
border-radius : 35px;
box-shadow : 0 3px 5px rgb(0, 0, 0, 0.25), 0 3px 5px rgb(0, 0, 0, 0.25) inset;
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .25), inset 0 3px 5px rgba(0, 0, 0, .25);
-webkit-appearance: none;
font-size : 0.85rem;
position : relative;
background-color : #fff;
}

textarea {
resize : none;
height : 250px;
}

@media only screen and (max-width: 350px) {
  html {
  font-size : 16px;
  }
  h1 {
  font-size : 32px;
  }
  .price-list-circle {
  width : 250px;
  height : 250px;
  }
  }
  @media only screen and (min-width: 700px) {
  h1 {
  font-size : 80px;
  }
  html {
  font-size : 25px;
  }
  .price-list-circle {
  width : 350px;
  height : 350px;
  }
}

@media only screen and (min-width: 1000px) {
  .story-image {
  width : 50%;
  }
  .story {
  flex-direction : row;
  gap : 0;
  }
  .story-text {
  width : 50%;
  }
  .story p {
  width : 80%;
  }
  .story div:nth-child(1) {
  order : 2;
  }
  .story div:nth-child(2) {
  order : 1;
  }
  .price-list-circle {
  width : 400px;
  height : 400px;
  }
  input, textarea, .contact-form .button, .lahetetty, span {
  width : 45%;
  margin-left : 5%;
  }
  .contact-logo {
  height : 700px;
  transform : translate(15%,-50%);
  }
}

@media only screen and (min-width: 1500px) {
  html {
  font-size : 35px;
  }
  h1 {
  font-size : 150px;
  }
  .price-list-circle {
  width : 550px;
  height : 550px;
  }
}

.company-footer {
margin : 100px auto;
width : 90%;
display : flex;
flex-direction : row;
justify-content : space-around;
}

.company-footer li {
height : 30px;
display : flex;
align-items : center;
}

.company-footer a:hover, .company-footer a:focus {
text-decoration : underline #000;
}

.footer-logo-link {
height : fit-content;
width : fit-content;
}

.footer-logo {
width : 90%;
max-width : 300px;
}

.copyright {
width : 100%;
text-align : center;
margin : 15px 0;
}

@media only screen and (max-width: 1000px) {
  .company-footer {
  flex-direction : column;
  gap : 100px;
  }
  }
  @media only screen and (min-width: 1500px) {
  .company-footer li {
  height : 50px;
  }
  .footer-logo {
  max-width : 500px;
  }
}