html,
body {
  margin: 0;
  padding: 0;
  background-color: rgb(118, 118, 255);
}

canvas {
  /* border: 30px groove rgba(255, 251, 38, 0.514); */
  border: 20px groove rgba(238, 235, 73, 0.758);
  margin-top: 100px;
  margin-left: 100px;
  display: block;
  width: 700px !important;
  height: auto !important;
}

.messages-container {
  border: 20px groove rgba(238, 235, 73, 0.758);
  width: 200px;
  height: 180px;
  position: fixed;
  background-color: rgba(250, 235, 215, 0.527);
  top: 100px;
  left: 900px;
  overflow: clip;
}

.info-container {
  border: 20px groove rgba(238, 235, 73, 0.758);
  width: 200px;
  height: 180px;
  position: fixed;
  background-color: rgba(250, 235, 215, 0.527);
  top: 330px;
  left: 900px;
  overflow: auto;
}

.project-videos {
  position: absolute;
  opacity: 40%;
}

.info {
  list-style-type: square;
}

.logo {
  width: 100%;
  max-height: 100%;
}

.form-container {
  border: 10px groove rgba(238, 235, 73, 0.758);
  width: 200px;
  height: auto;
  position: fixed;
  /* display: none; */
  background-color: rgba(250, 235, 215, 0.527);
  top: 530px;
  left: 1100px;
}

button {
  border-radius: 0;
  width: 200px;
}

input {
  width: 190px;
  border-radius: 0;
}

ul {
  list-style: none;
  margin-left: -30px;
}

/* #messages {
  display: none;
} */

/* #form {
  display: none;
}

#input {
  display: none;
} */