@font-face {
  font-family: Bandeins Strange;
  src: url(bandeins-strange-variable.ttf);
}
body {
	font-family: "Space Grotesk";
	font-size: 16px;
	line-height: 1.5;
	
	background-color: #FFFFFF;
	color: #2c7744;
}

.links  {
  font-family: "Bandeins Strange";
  font-size: 32px;
  color: #2c7744;
  text-decoration: none;
  position: fixed;
  top: 70%;
  left: 25%;
  width: 50%;
 
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
 
a {
  color: #2c7744;
  text-decoration: none;
  font-variation-settings: "wght" 100, "wdth" 100; 
  transition: font-variation-settings 0.5s;
}

a:hover {
  font-variation-settings: "wght" 900, "wdth" 200;
}

canvas {
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

form {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 300px;

  background: #FED037;
  color: var(--form-back);
  padding: 24px;

  display: grid;
  grid-gap: 16px 8px;
  grid-template-areas: "label label" "input eth" "button button";
  grid-template-columns: 1fr auto;
  align-items: center;

  animation: fadein 0.4s 0.8s ease-in-out both;
}

form.has-eth { 
  display: grid;
  animation: fadein 0.4s 0.8s ease-in-out both;
}

form label {
  grid-area: label;

  display: block;
  font-size: 18px;
}

form input {
  grid-area: input;

  appearance: none;
  width: 100%;
  border: none;
  padding: 8px;

  font-variation-settings: "wght" 600;
  text-align: right;

  background: var(--form-back);
  color: var(--form-fore);
  border: 1px solid #2c7744;
  transition: border-color 0.2s ease-in-out;
}

form input:focus {
  border: 1px solid #2c7744;
  outline: none;
}

form span {
  grid-area: eth;
}

form button {
  grid-area: button;
  appearance: none;
  border: 1px solid #2c7744;
  background: #2c7744;
  color: #FED037;
  font: inherit;
  padding: 8px;
  font-size: 16px;
}