html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;

}

body {
  overflow-x: hidden;
}

.container {
  display: block;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  background-color: #90C418;
  max-width: 1200px;
  margin:auto;
}

.headder {
  width: 100%;
  height: 100%;
}

.sky {
  position: relative;
  width: 100%;
  height: 35%;
  top: 0px;
  background-color: #98cafb;
  overflow: hidden;
}

.grass {
  display: block;
  position: relative;
  width: 100%;
  height: 65%;
  bottom: 0px;

}

.headder_logo {
    width: 80%;
    max-width: 830px;
    margin: auto;
}

.logo-container{
  width: 100%;
    position: absolute;
    top: 0px;
    height: 60%;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 1200px;

}
.headder_scrolldown {
  position: absolute;
  bottom: 4vh;
  display: block;
  width: 100%;
  display: block;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-weight: bolder;
  color: #006B6F;
  font-size:40px;
  max-width:1200px
}

.headder_scrolldown_arrow {
  width: 40px;
  display: block;
  text-align: center;
  margin: auto;

}

.content_container {
  margin-top: 18px;
  height: 100%;
  width: 100%;
  margin-left: 1vw;
  background-color: white;
}
.cards {
    display: block;
  }
  .card {
    margin: 10px;
    padding:10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    text-align: center;
    width:calc(100% - 50px);
    justify-content: center;
  } 
  .card img {
    max-width: 100%;
  }
  .card .text {
    padding: 0 20px 20px;
    font-size: 20px;
  }
  .card .text > button {
    background: gray;
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
    }

.cloud_1_r{
    position:absolute;
    background-image: url(assets/clouds_1.svg);
    background-size: contain;
    left:-20vw;
    width: 20vw;
    background-repeat: no-repeat;
    height: 10em;
    animation: cloud_right;
    animation-timing-function: linear;
}
.cloud_2_r{
    position:absolute;
    left:-10vw;
    background-image: url(assets/cloud_2.svg);
    background-size: contain;
    width: 10vw;
    background-repeat: no-repeat;
    height: 5em;
    animation: cloud_right;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.cloud_1_l{
    position:absolute;
    background-image: url(assets/clouds_1.svg);
    background-size: contain;
    right:-20vw;
    width: 20vw;
    background-repeat: no-repeat;
    height: 10em;
    animation: cloud_left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.cloud_2_l{
    position:absolute;
    right:-20vw;
    background-image: url(assets/cloud_2.svg);
    background-size: contain;
    width: 10vw;
    background-repeat: no-repeat;
    height: 5em;
    animation: cloud_left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.sun_rise{
    bottom: -50vw;
    width: 80%;
    width: 90vw;
    height: 90vw;
}
.sun_morning{
    left:-20%;
    top: -20vw;
    width: 40vw;
    height: 40vw;
}
.sun_midday{
    top: -45vw;
    width: 80%;
    width: 80vw;
    height: 80vw;
}
.sun_evening{
    left:80%;
    top: -20vw;
    width: 40vw;
    height: 40vw;
}
.sun {

    position: absolute;
    background: radial-gradient(transparent 50%, white), radial-gradient(yellow, transparent 70%);
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
    mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
    border-radius: 50%;
}
.sun::after, .sun::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
    mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
}
.sun::before {
    background: repeating-conic-gradient(from 0deg, yellow 0deg 20deg, transparent 20deg 40deg);
    animation: rotate 720s linear, scale 3s linear infinite;
}
.sun::after {
    background: radial-gradient(yellow, orange 27%, transparent calc(27% + 3px) 100%), radial-gradient(gold, transparent 70%), repeating-conic-gradient(from 0deg, gold 0deg 5deg, transparent 5deg 10deg);
    transform: rotate(15deg);
    animation: rotate 360s linear;
}
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes scale {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(1.2);
    }
    40% {
      transform: scale(0.8);
    }
    60% {
      transform: scale(1.1);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
}