body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

h1 {
  color: white
}

@font-face {
  font-family: "CRYSRG";
  src: url("fonts/CRYSRG__.TTF");
 }

#buttons {
  position: fixed;
  font-size: 20px;
  z-index: 10;
  /* display: flex;
  flex-direction: row;
  justify-content: center; */
  align-items: end;
  /* height: 100vh;  */
  right: 5vw;
  bottom: 5vw;
}

#textbox {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90vw;
  height: 20vh;
  z-index: 10;
  background-color: rgb(149, 142, 255);
  box-shadow: #303030;
  display: none;
  border-radius: 50px;

  .hide {
    display: none;
  }

}

.input-field {
  display: block;

  padding: 7vw;
  padding-top: 0px;
  top: 50%;
  width: 85%;
  color:#cdcce0;
  
  border: none;
  box-shadow: none;
  outline: none;
  background: transparent;
  font-family: "CRYSRG";
  font-size: 20px;
}

.input-field input[type="text"] {
  background: transparent;
  border: none;
  box-shadow: none;
  
  color: #fff;
  width: 100%;
  outline: none;
  font-family: "CRYSRG";
 


}



.input-field::placeholder {
  color:#bdc6e4;
}

.input-field:hover {
  cursor:text;
}

.submitbutton {
  border: none;
  outline: none;
  box-shadow: none;
  background: rgb(77, 255, 130);
  border-radius: 5px;
  width: 20vw;
  height: 8vh;
  color:#303030;
  font-family: "CRYSRG";
  font-size: 25px;
}


.submitbutton:hover {

  background: rgb(102, 201, 142);
}

.input-field::selection {
  background: rgb(71, 71, 247);
}

form {
  width: 50%;
}

.show {
  display: block;
}

#addButton {
  background: rgb(149, 142, 255);
  width: 13vw;
  height: 13vw;
  font-size: 10vw;
  border-radius: 10vw;
  border: none;
  color: #ffffff;
}  

#addTextButton {
  background: rgb(149, 142, 255);
  width: 12vw;
  height: 12vw;
  font-size: 8vw;
  border-radius: 10vw;
  border: none;
  color: #ffffff;
  margin-left: 3vw;
}

#addButton:hover {
  background: #bcb9ff;
  color: #303030;
  cursor: pointer;
}

#addTextButton:hover {
  background: #bcb9ff;
  color: #303030;
  cursor: pointer;
}