.page-wrapper {
   /* min-height: 100vh; */
   width: 100%;
   padding: 20px;
   max-width: 1000px;
   margin: 0 auto;
   padding-top: 10rem;
}
h1 {
   font-family: 'Assistant', sans-serif;
   font-size: 2rem;
}
form div {
   position: relative;
}
form input,
form textarea {
   background: transparent;
   border: none;
   border-bottom: 1px solid grey;
   color: black;
   width: 100%;
   font-family: 'Monsterrat', sans-serif;
   font-size: 1em;
   padding: 8px;
   transition: all 0.5s;
}
.ok-icon::after {
   content: '';
   position: absolute;
   border-left: 4px solid rgb(31, 233, 31);
   border-bottom: 4px solid rgb(31, 233, 31);
   height: 12px;
   width: 18px;
   top: 26px;
   right: 20px;
   margin-top: 0;
   -webkit-transform: rotate(-54deg);
   transform: rotate(-54deg);
   opacity: 0;
   -webkit-transition: opacity 0.5s;
   transition: opacity 0.5s;
}
.ok-icon::before {
   content: '*';
   opacity: 0;
   position: absolute;
   height: 10px;
   width: 10px;
   color: red;
   top: 26px;
   right: 20px;
   font-size: 1.4rem;
}
form input:focus {
   /* background-color: rgb(22, 22, 22); */
   /* color: white; */
   -webkit-transition: background-color 0.5s;
   transition: background-color 0.5s;
}
form input:invalid + .ok-icon::before,
form textarea:invalid + .ok-icon::before {
   opacity: 1;
   -webkit-transition: opacity 0.5s 0.8s;
   transition: opacity 0.5s 0.8s;
}
form input:valid + .ok-icon::after,
form textarea:valid + .ok-icon::after {
   opacity: 1;
   -webkit-transition: opacity 0.5s 0.8s;
   transition: opacity 0.5s 0.8s;
}
/* this hack is taken from https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ originaly made by https://twitter.com/lydiadugger */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus {
   -webkit-text-fill-color: white;
   box-shadow: 0 0 0px 1000px #000 inset;
   transition: background-color 5000s ease-in-out 0s;
}
/* end of hack */
form textarea {
   height: 34px;
   padding-right: 40px;
   -webkit-transition: background-color 0.5s, height 0.5s;
   transition: background-color 0.5s, height 0.5s;
}
form textarea::-webkit-scrollbar {
   display: none;
}
form textarea:focus {
   height: 100px;
   -webkit-transition: background-color 0.5s, height 0.5s;
   transition: background-color 0.5s, height 0.5s;
   /* background-color: rgb(22, 22, 22); */
   color: white;
}
form input:valid {
   background-color: rgb(22, 22, 22);
   color: white;
}
form textarea:valid {
   min-height: 100px;
   background-color: rgb(22, 22, 22);
   color: white;
}
form label {
   visibility: hidden;
}
form button {
   color: white;
   text-transform: uppercase;
   padding: 8px 20px;
   border: none;
   cursor: pointer;
   margin-top: 8px;
   font-family: 'Assistant', sans-serif;
   font-size: 1.12rem;
   background-color: rgb(20, 149, 172);
   margin-top: 40px;
}
form:valid button:hover {
   background-color: rgb(80, 201, 238);
   color: rgb(15, 15, 15);
   -webkit-transition: color 0.5s;
   transition: color 0.5s;
}
form button:disabled {
   background-color: lightgrey;
   cursor: default;
   -webkit-transition: background-color 0.5s;
   transition: background-color 0.5s;
}
form:valid button {
   background-color: rgb(20, 149, 172);
   -webkit-transition: background-color 0.5s, color 0.5s;
   transition: background-color 0.5s, color 0.5s;
}
form:valid button:focus.show-outline {
   border: 3px solid rgb(22, 22, 22);
}
.confirmation {
   padding: 10px;
   border: 1px solid rgb(158, 25, 25);
   background-color: rgb(248, 177, 177);
   margin: 20px 0;
}

.form-btn {
   background-color: #bc2e31;
}

.form-btn:hover {
   transform: scaleZ(1.2);
}