body {
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Ubuntu;
  color: white;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.main-content {
  display: grid;
  width: 1000px;
  grid-template-areas:
  "wheel logo"
  "wheel form";
  margin: 200px auto;
}

@media screen and (max-width: 700px) {
  .main-content {
    width: auto;
    margin: 20px auto;
    grid-template-areas:
    "logo"
    "wheel"
    "form";
  }

  .wheel-container {
    margin: 40px auto;
    margin-left: 70px;
  }
}

.wheel-container {
  background-image: url("../images/wheel_back.png");
  background-repeat: no-repeat;
  background-position: -20px -107px;
  background-size: cover;
  width: 560px;
  text-align: center;
  grid-area: wheel;
}

.form-container {
  width: 400px;
  text-align: center;
  grid-area: form;
  margin: 0 auto;
}

.logo-img {
  grid-area: logo;
  margin: auto auto 0;
  /* width: 100%; */
  height: 100px;
}

/* Form */
.form-text {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
}

.form-input {
  width: 362px;
  height: 38px;
  margin: 10px auto;
  text-align: center;
  border-radius: 45px;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  -ms-border-radius: 45px;
  -o-border-radius: 45px;
  font-size: 23px;
  border: none;
}

.form-button {
  font-weight: bold;
  font-size: 20px;
  width: 362px;
  height: 38px;
  border-radius: 45px;
  margin: 10px auto;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  -ms-border-radius: 45px;
  -o-border-radius: 45px;
  background-color: #ffdf00;
  border: none;
  box-shadow: 2px 4px #888888;
}

.form-button:hover {
  cursor: pointer;
}

.not-hover:hover {
  cursor: default;
}