style.css

@font-face {
  font-family: LeagueSpartan;
  src: url("LeagueSpartan.otf") format("opentype"); }
@font-face {
  font-family: CooperHewitt;
  src: url("CooperHewitt.otf") format("opentype"); }
* {
  font-family: 'Open Sans', sans-serif; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #F3F2F4; }

#header {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #372d43;
  background: linear-gradient(90deg, #372d43 0%, #084758 100%); }

#header-content {
  width: 600px; }
  #header-content .logo {
    width: 100%;
    color: white;
    font-size: 3em;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase; }
    #header-content .logo div {
      font-family: LeagueSpartan, sans-serif;
      margin: 10px 0; }
    #header-content .logo .sub {
      font-family: CooperHewitt, sans-serif;
      font-size: 0.8em; }
  #header-content .buttons {
    margin-top: 20px;
    text-align: center; }
    #header-content .buttons button {
      padding: 10px 20px;
      margin: 10px;
      background-color: transparent;
      color: white;
      border: 2px solid white;
      border-radius: 10px;
      font-size: 1.2em;
      cursor: pointer;
      transition: background-color 0.15s linear, color 0.15s linear; }
      #header-content .buttons button:hover #header-content .buttons button:not(:hover) {
        background-color: white;
        color: #372d43; }
      #header-content .buttons button:disabled {
        color: grey;
        border: 2px solid grey; }

#main {
  margin: 0 auto;
  max-width: 900px; }
  #main p {
    font-size: 1.3em; }
  #main ul, #main li {
    font-size: 1.1em; }
  #main small {
    font-size: 1em; }
  #main hr {
    margin: 40px 0;
    height: 1px;
    background-color: #c0bbc5;
    border: none; }
  #main .logos img {
    vertical-align: middle;
    width: 45%;
    padding: 20px; }
  #main #taken-place-box {
    margin-top: 20px;
    background-color: #b6a9c6;
    padding: 20px;
    border: 2px solid black; }

@media (max-width: 600px) {
  #header {
    height: 100%;
    padding: 20px 0; }
    #header #header-content img {
      width: 100%; } }
@media (max-width: 900px) {
  #main {
    padding: 0 20px; }
    #main .logos img {
      width: 100%;
      padding: 20px 0; } }

/*# sourceMappingURL=style.css.map */