@charset "UTF-8";
@font-face {
  font-family: "WhyteVariableEDU";
  src: url(../font/ABCWhyte-Light.woff2);
  font-style: normal;
  font-display: swap;
  
}

header, footer {
  z-index: 100; 
  font-size: 20px; 
  font-weight: 500;
}

a#logo {
  position: fixed;
  top: 15px;
  left: 20px;
  /*color: rgb(0,255,255);*/
  z-index: 100000;
  padding: 12px 20px;
  display: inline-block;
  margin: 0px;
  cursor: pointer;
  background: rgba(255, 255, 255, 10%);
  width: auto;
  color: white;
  box-shadow: 0px 0px 10px rgba(100,100,100,1); 
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 9px 10px 8px 10px;
  text-decoration: none !important;
  transition: transform .5s cubic-bezier(0,0,.1,1.01), color .1s linear;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

#index-link {
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 100000;
  text-align: right;
}

#index-link a {
  border-radius: 600px;
  padding: 12px 20px;
  display: inline-block;
  margin: 0px;
  margin-left: 10px;  
  cursor: pointer;
  background: rgba(255, 255, 255, 10%);
  width: auto;
  color: white;
  box-shadow: 0px 0px 10px rgba(100,100,100,1); 
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 9px 10px 8px 10px;
  text-decoration: none !important;
  transition: transform .5s cubic-bezier(0,0,.1,1.01), color .1s linear;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

body {
  background-color: black;
  color: #ffffff;
  font-family:   "WhyteVariableEDU";;
}

.main {
  margin-top: 7rem;
  margin-left: 0.7rem;
  margin-right: 0.7rem;
  font-size: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.8fr;
  grid-gap: 2rem;
  line-height: 120%;
}

.main dt {
  text-decoration: underline;
}

.indent {
  /* margin-left: 1rem; */
  font-size: 0.9rem;
  color: grey;
}

.footer {
  position: fixed;
  bottom: 0.7rem;
  left: 0.7rem;
}

dd,
dt,
.field,
.submit,
.sub_btn {
  animation-name: example;
  -webkit-animation-name: wiggle;
  -ms-animation-name: wiggle;
  animation-duration: 4s;
  -ms-animation-duration: 700ms;
  -webkit-animation-duration: 700ms;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

.field {
  text-decoration: none;
  padding-top: 0.3rem;
  display: grid;
  grid-template-columns: 1fr;
  font-size: 1.2rem;
}

.input {
  padding: 0.4rem;
  padding-left: 0.1rem;
  font-family: 'English';
  font-size: 1.2rem;
  background-color: #ffffff;
  border: 1.8px solid black;
  border-radius: 0px;
  width: 95%;
  height: 2.5rem;
  margin-top: 0px;
}

#text {
  font-size: 1.2rem;
  resize: none;
  height: 15rem;
  font-family: 'English';
}

.submit {
  background-color: transparent;
  border:none;
  font-family: 'English';
  /* margin-top: 1rem; */
  padding: 0.25rem;
  padding-top: 0.35rem;
  font-size: 1.2rem; 
}

.sub_btn{
  margin-top: 0.5rem;
  height: 2rem;
  width: 3.8rem;
  background-color: #ffffff;
  border: 1.8px solid black;
  border-radius: 0px;
}

.message {
  margin-top: 1rem;
}

.alert {
  color: rgb(255, 248, 53);
}

.error {
  margin-top: 1rem;
  color: red;
}

dd a {
  text-decoration: none;
  color: rgb(255, 248, 53);
}

label {
  text-decoration: none;
}

::-webkit-input-placeholder {
  /* Edge */
  color: black;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */

  color: black;
}

::placeholder {

  color: black;
}

.submit:hover {
  background-color: transparent;
  color: rgb(255, 248, 53);
  cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 31.16 34.34'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1611,1601s-3,2,0,7a17.17,17.17,0,0,1,2.72,9.13A3.16,3.16,0,0,0,1611,1616c-2,0-3,3-3,3s-1,3,4,8,4.25,4.16,4.13,5.58,6.87.42,6.87.42l3.19-3,3.39,3.33,2.42-.34,1-5,3.41-7.29.59-8.71-1-2h-2l-2,2-1.18-3.61L1628,1608l-2.68,1.33L1624,1607h-3l-3,3-2-6-2.22-3Z' transform='translate(-1607 -1599.96)'/%3E%3Cpath d='M1625.29,1617.69a.88.88,0,0,0-.85.85l.06,8a.88.88,0,0,0,.85.85.83.83,0,0,0,.84-.85v-8A.88.88,0,0,0,1625.29,1617.69Z' transform='translate(-1607 -1599.96)'/%3E%3Cpath d='M1620.77,1617.75a.82.82,0,0,0-.84.91v7.84a.88.88,0,0,0,1.75,0l-.06-7.9A.87.87,0,0,0,1620.77,1617.75Z' transform='translate(-1607 -1599.96)'/%3E%3Cpath d='M1638.11,1612.27a4.27,4.27,0,0,0-.68-2.14,2.8,2.8,0,0,0-1.58-1.07,3.49,3.49,0,0,0-3.22.73,6.39,6.39,0,0,0-.57-1.52,4.43,4.43,0,0,0-2.08-1.53,7.8,7.8,0,0,0-2.54.06,3.72,3.72,0,0,0-2,1.3,1.09,1.09,0,0,0-.22-.34,3.52,3.52,0,0,0-2.32-1.58,5.5,5.5,0,0,0-2.54.11,3.52,3.52,0,0,0-1.8,1.47,13.7,13.7,0,0,0-.62-1.75,19.75,19.75,0,0,0-1.7-3.72,5.47,5.47,0,0,0-2.6-2.15,4,4,0,0,0-4.06,1.07,4.28,4.28,0,0,0-.73,3.5,31.66,31.66,0,0,0,1.12,3.45,9,9,0,0,0,.46,1c.22.57.45,1,.67,1.64a6.77,6.77,0,0,0,.4,1.07,14.66,14.66,0,0,1,.68,1.75l.34,1.3a6,6,0,0,0-2.38-.17,4.52,4.52,0,0,0-2.54,1.86c-.67,1.07-.73,2.38-.22,4.69a9.52,9.52,0,0,0,2.59,4.4l.46.51s0,.06,0,.06l1.87,2.08.11.12c.28.28.73.67,1.18,1.07s1,1,1.42,1.36h0a4,4,0,0,1,.23,2.31.73.73,0,0,0,.17.68.79.79,0,0,0,.62.34h1.81c.95,0,1.91,0,2.76,0a19.78,19.78,0,0,0,2.77-.11,3.08,3.08,0,0,0,1.86-1.3,13.36,13.36,0,0,0,1.19-1.69h0v.06c.17.22,1.47,2.65,2.94,2.87a10.51,10.51,0,0,0,3.1,0,.83.83,0,0,0,.62-.4.91.91,0,0,0,.12-.67,6.65,6.65,0,0,1-.28-1.87c0-.22,0-.45,0-.62a6.22,6.22,0,0,1,.17-1.47,15.81,15.81,0,0,1,2.54-3.78l.06,0a13.35,13.35,0,0,0,1.63-3.45,24.48,24.48,0,0,0,.57-4.18c.06-.9.11-1.63.11-2.82v-.45C1638.16,1613.75,1638.16,1613.52,1638.11,1612.27Zm-1.7,2.49c0,1.13,0,1.81-.05,2.71a28.58,28.58,0,0,1-.57,3.84,12,12,0,0,1-1.35,2.88c-.46.56-2.6,3.1-2.88,4.51a9.66,9.66,0,0,0-.23,1.81v.57a5,5,0,0,0,.06,1.35,5.29,5.29,0,0,1-1.64,0c-.34-.06-1.19-1.13-1.69-2a1.69,1.69,0,0,0-1.47-1,1.88,1.88,0,0,0-1.58.9,6.36,6.36,0,0,1-1.81,2.15,50.64,50.64,0,0,1-5.25,0h-.9a1.38,1.38,0,0,0,0-.45,3.15,3.15,0,0,0-.95-2.48l-1.36-1.3-1.24-1.13-1.81-2a5.32,5.32,0,0,0-.56-.62A7.73,7.73,0,0,1,1609,1621c-.45-2.14-.34-2.88,0-3.45a2.66,2.66,0,0,1,1.36-1.07,6.07,6.07,0,0,1,1.46.06l.12.11a1.46,1.46,0,0,1,.73.57,1.32,1.32,0,0,1,.23.33l.22.34c.51.57,1,.4,1.13.29a.87.87,0,0,0,.51-1c0-.11-.06-.23-.06-.39a4.63,4.63,0,0,1-.22-.85c-.17-.73-.4-1.64-.74-2.76-.28-.8-.5-1.42-.73-1.93a7.34,7.34,0,0,1-.34-1l-.73-1.75c-.17-.33-.28-.62-.45-1-.29-.68-.79-2.32-1-3.16a2,2,0,0,1,2.54-2.54,3.75,3.75,0,0,1,1.69,1.41,16.51,16.51,0,0,1,1.58,3.44,28.22,28.22,0,0,1,1.53,5.82.86.86,0,0,0,.85.84.91.91,0,0,0,.9-.79v-.9a9.08,9.08,0,0,1,.22-2.54,1.72,1.72,0,0,1,1-1.07,3.53,3.53,0,0,1,1.69-.12,2.16,2.16,0,0,1,1.19.74,8.66,8.66,0,0,1,.73,3.55v.23a.89.89,0,0,0,.85.85.85.85,0,0,0,.9-.68l.17-1.3a9.68,9.68,0,0,1,.34-2.09,2.18,2.18,0,0,1,1-.68,7.38,7.38,0,0,1,1.92,0,3.14,3.14,0,0,1,1,.73,11.1,11.1,0,0,1,.73,3.45.9.9,0,0,0,.85.84,1,1,0,0,0,.9-.67c0-.06.06-.12.06-.23a5,5,0,0,1,.45-1.24,1.79,1.79,0,0,1,1.81-.63,1.64,1.64,0,0,1,1,1.64Z' transform='translate(-1607 -1599.96)'/%3E%3Cpath d='M1630,1617.69a.87.87,0,0,0-.85.85v8a.83.83,0,0,0,.85.85.8.8,0,0,0,.84-.85v-8A.83.83,0,0,0,1630,1617.69Z' transform='translate(-1607 -1599.96)'/%3E%3C/svg%3E"), pointer;
}


@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(5deg);
  }

  25% {
    -webkit-transform: rotate(-5deg);
  }

  50% {
    -webkit-transform: rotate(10deg);
  }

  75% {
    -webkit-transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-ms-keyframes wiggle {
  0% {
    -ms-transform: rotate(1deg);
  }

  25% {
    -ms-transform: rotate(-1deg);
  }

  50% {
    -ms-transform: rotate(1.5deg);
  }

  75% {
    -ms-transform: rotate(-5deg);
  }

  100% {
    -ms-transform: rotate(0deg);
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(5deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@media only screen and (max-width: 750px) {
  .main {
    grid-template-columns: 1fr;
  }

  .input {
    width: 100%;
  }
  .submit {
    text-decoration: none;
    background-color: transparent;
    border:none;
    font-family: 'English';
    /* margin-top: 1rem; */
    color: black;
    padding: 0.25rem;
    padding-top: 0.35rem;
    font-size: 1.2rem; 
  }
  .sub_btn{
    margin-top: 0.5rem;
    height: 2rem;
    width: 4rem;
    background-color: #ffffff;
    border: 1.8px solid black;
    border-radius: 0px;
    margin-bottom: 5rem;
  }
  .alert {
    margin-top: -4.5rem;
    margin-bottom: 3rem;
    color: blue;
  }
}