@font-face {
   font-family: 'WhyteEDU';
   src: url("../font/WhyteVariableEDU.ttf") format("truetype");
}

html, body {
   margin: 0;
   padding-top: 1vw;
   font-family: sans-serif;
   max-height: 100vh;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   border: none;
   box-sizing: border-box;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.sky {
   position: fixed;
   width: 100vw;
   top: 0;
   left: 0;
   height: 50vh;
   background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(49, 157, 236));
}

.sky:hover {
   background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(252, 213, 71));
}

.sun {
   position: fixed;
   background: radial-gradient(rgb(249, 224, 0), rgb(255, 249, 205));
   width: 40vw;
   height: 40vw;
   border-radius: 50%;
   left: 30vw;
   right: 30vw;
   top: calc((100vh - 40vw)/2) -webkit-animation: rise 3s infinite;
   /* Safari 4+ */
   -moz-animation: rise 2s infinite alternate-reverse;
   /* Fx 5+ */
   -o-animation: rise 2s infinite alternate-reverse;
   /* Opera 12+ */
   animation: rise 2s infinite alternate-reverse;
   /* IE 10+, Fx 29+ */
   moz-box-shadow: 1px 20px -20px rgb(255, 249, 205);
   -webkit-box-shadow: 1px 20px -20px rgb(255, 249, 205);
   box-shadow: 1px 20px -20px rgb(255, 249, 205);
}

@keyframes rise {
   0%, 100% {
      bottom: 0;
   }

   100% {
      bottom: 100vh;
   }
}

.grow {
   transition: all 1s ease;
}

.grow:hover {
   transform: scale(2);
}

.land {
   z-index: -1;
   pointer-events: none;
   top: 48vh;
   width: 100vw;
   position: fixed;
   bottom: 0;
   height: 50vh;
   background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(76, 208, 114));
}

.row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}

.column {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   flex: 1;
}

.column-reverse {
   display: flex;
   flex-direction: column-reverse;
   flex-basis: 100%;
   flex: 1;
}

.text-wrap {
   margin: 1vw;
}

.text-left {
   font-family: 'WhyteEDU';
   background-color: grey;
   opacity: 0.5;
   font-variation-settings: "wght"10, "ital"0, "opsz"0;
   border-radius: 0.15rem;
   border: 1px solid #000;
   font-size: 3vw;
   padding: 0.5vw;
   margin: 0.5vw;
}

.text-left:hover {
   cursor: default;
   font-variation-settings: "wght"265, "ital"12, "opsz"10;
}

.text-left a {
   text-decoration: none;
   font-weight: normal;
   color: rgba(76, 208, 114);
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

.text-right {
   font-family: 'WhyteEDU';
   background-color: grey;
   opacity: 0.5;
   font-variation-settings: "wght"100, "ital"0, "opsz"0;
   border-radius: 0.15rem;
   border: 1px solid #000;
   font-size: 3rem;
   padding: 0.5vw;
   margin: 0.5rem;
}

.text-right:hover {
   cursor: default;
   font-variation-settings: "wght"100, "ital"12, "opsz"10;
}

.text-right a {
   text-decoration: none;
   font-weight: normal;
   color: rgb(168, 209, 255);
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

.animate_font {
   transition: font-variation-settings 3s ease-out;
}

.big {
   font-size: 5rem;
}

.med {
   font-size: 3rem;
}

.small {
   font-size: 1.5rem;
}

.mini {
   font-size: 1rem;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: grey;
   opacity: 0.5;
   border: 1px solid #000;
}

.footer p {
   padding: 1vw;
   color: #000;
   font-size: 1vw;
}

@media screen and (max-width:700px) {
   h1 {
      color: blue;
   }
}