:root {
  --font-size: 18pt;
  --input-width: 60%;
}

body {
	background: linear-gradient(-45deg, var(--OxfordBlue), var(--SilverLakeBlue), var(--OxfordBlue));
  background-size: 400% 400%;
	animation: gradient 60s ease infinite;
}

.settings-container {
  display: none;
}

#join {
  margin-top: 5vh;
  background-color: var(--richBlack);
  padding: 15px;
  border: 2px solid var(--richBlack);
  border-radius: 15px
}

#join > h1 {
  text-align: center;
  margin: 10px 0 0 0;
  font-weight: bold;
  font-style: italic;
  color: var(--SilverLakeBlue);
}

#roles {
  color: var(--richBlack);
  background-color: var(--Platinum);
  min-height: 6vh;
  width: calc(var(--input-width) + 5.41%)
}

option:not(#difficulty > option, #tests-selection > option, .languageButton > option) {
  color: var(--richBlack);
}

.form-input-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.form-input-container > input {
  width: var(--input-width);
  color: var(--richBlack)
}

.join-button {
  font-size: 16pt;
}

label {
  font-size: var(--font-size);
  text-align: center;
  margin: 20px 0 10px 0;
}

.join-button-container {
  margin: 4vh 0 2vh 0;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-container {
  position: fixed;
  top: 2vh;
  right: 5vw
}

.settings-container {
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 1;
}

.settings-categories {
  display: block;
}

.test-type {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons-container {
  flex-grow: 0;
  justify-content: space-around;
  min-width: 30%;
}

.wq-container > div {
  display: flex;
  justify-content: space-around;
  width: max(33vw, 350px)
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media screen and (max-width: 1280px) and (min-width: 1024px){
  .buttons-container > .buttons {
    font-size: 24pt;
    padding: 15px;
  }
}