:root {
  --main-box-color: #D81B29;
}

body {
  background-color: #1D3557;
  color: white;
  font-family: 'Roboto Mono', monospace;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

/* GENERAL STUFF */
input[type='radio'] {
  transform: scale(1.2);
}

input[type=submit] {
  margin-top: 50px;
  width: 8em;
  height: 3em;
  font-size: 1.5em;
  background: var(--main-box-color);
  border: 0 none;
  color: white;
  ;
  cursor: pointer;
  -webkit-border-radius: 2em;
  border-radius: 0.5em;
  box-shadow: 5px 7px black;
}

.menuSuggester {
  padding-top: 0.2em;
  margin-left: auto;
  margin-right: auto;
  width: 7em;
  height: 1.5em;
  font-size: 1.7em;
  font-weight: 400;
  text-align: center;
  background: #F1FAEE;
  color: black;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 2em;
  border-radius: 0.5em;
}

.menuHalls {
  padding-top: 0.2em;
  margin-left: 0.4em;
  margin-right: auto;
  width: 4em;
  height: 1.5em;
  font-size: 1.7em;
  font-weight: 400;
  text-align: center;
  background: #F1FAEE;
  color: black;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 2em;
  border-radius: 0.5em;
}

ul {
  list-style-type: none;
  /* Remove bullets */
  padding: 0;
  /* Remove padding */
  margin-right: 1em;
  margin-left: 1em;
  /* Remove margins */
}

li {
  margin: 18px 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Unvisited link  */
a:visited {
  color: inherit;
}

/* Visited link    */
a:hover {
  color: var(--main-box-color);
}

/* Mouse over link */

/* HEADER BOX PADDING */
.headingContainer {
  margin: 3em 5em;

}

header {
  display: flex;
  justify-content: space-between;


}

header {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1000px) {
  header {
    flex-direction: row;
  }
}

header .logo {
  margin-bottom: 1.2em;
}

@media (min-width: 1000px) {
  header .logo {
    margin-bottom: 0;
  }
}

.logo {
  font-size: 2.5em;
  display: flex;
  font-family: 'Roboto Mono';
  word-spacing: 100vw;
  margin: 0;
  padding: 0;
}

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

@media (max-width: 1000px) {
  .menuHalls {
    margin-top: 1em;
  }

}

/* CONTENT CONTAINER */

.contentContainer {
  padding: 0;
  margin: 3em 5em;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}



.contentContainer p {
  font-size: 1.3em;
  font-weight: 400;

}

.box-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 0 0 0;


}

.box-wrapper>* {
  margin-top: 40px;
  margin-right: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


.box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


.box {
  width: 22em;
  border: 3px solid white;
  border-spacing: 0;
  padding: 0;
}

.box .hallpic {
  padding: 0;
  width: 100%;
  height: 16em;
  object-fit: cover;
}

.box h2 {
  text-align: center;
}

/* BUDGET LIMIT BOX */
.budgetLimit {
  width: 22em;
  height: 14em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: center;
}

.budgetLimit p {
  font-style: italic;
}

.budgetLimit h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.budgetLimit label {
  font-size: 1.3em;
}


/* DEGREE LEVEL LIMIT BOX */
.degreeLevel {
  width: 22em;
  height: 12em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: center;
}

.degreeLevel p {
  font-style: italic;
}

.degreeLevel h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.degreeLevel label {
  font-size: 1.3em;
}

/* ENSUITE LIMIT BOX */
.ensuite {
  width: 22em;
  height: 10em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: center;
}

.ensuite p {
  font-style: italic;
}

.ensuite h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.ensuite label {
  font-size: 1.3em;
}



/* CONTRACT LENGTH LIMIT BOX */
.contractLength {
  width: 22em;
  height: 16em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: center;
}

.contractLength p {
  font-style: italic;
}

.contractLength h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.contractLength label {
  font-size: 1.3em;
}

/* LOCATION LIMIT BOX */
.location {
  width: 22em;
  height: 16em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: center;
}

.location p {
  font-style: italic;
}

.location h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.location label {
  font-size: 1.3em;
}

/* SIZE OF ACCOM BOX */
.size {
  width: 22em;
  height: 10em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: center;
}

.size p {
  font-style: italic;
}

.size h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

.size label {
  font-size: 1.3em;
}

/* SUBMIT BUTTON (AFTER SUGGESTING) */
.accomClassName {
  width: 22em;
  height: 24em;
  border: 4px solid var(--main-box-color);

  box-shadow: 13px 15px var(--main-box-color);
  align-items: flex-end;

}

.accomClassName ul {
  font-size: 1.1em;
}

.highlighted-text {
  color: aqua;

}

/* FOOTER CONTAINER */

.footerContainer {
  margin: 3em 2em;
}

footer ul {
  display: flex;
  justify-content: space-between;
}

.github {
  width: 2em;
  height: auto;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 600px) {
  header {
    flex-wrap: wrap;
  }

  .logo {
    font-size: 2em;
  }

  body {
    font-size: 1em;
  }



  .contentContainer {
    margin: 3em 2em;
  }

  .budgetLimit {
    height: 20em;
  }

  .contractLength {
    height: 22em;
  }

  header {
    font-size: 0.8em;
    align-items: center;
  }

  .menuSuggester {
    align-self: center;
  }

  .menuHalls {
    margin-left: auto;
  }

  .menuItems {
    font-size: 1.2em;
    flex-wrap: wrap;

  }


}