html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: #2C0C61;
  background: radial-gradient(circle, rgba(44,12,97,1) 0%, rgba(2,9,45,1) 100%);
  color: #ffffff;
}

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

#title {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #010203;
  text-align: center;
  margin-bottom: 16px;
}

#title span {
  font-family: "Jersey 25", sans-serif;
  font-size: 64pt;
  font-weight: 400;
  font-style: normal;
  padding: 8px 16px 16px 8px;
  margin: auto auto auto 0;
}


#title img {
  height: 90px;
  margin: 16px 16px 16px auto;
}

#mainPage {
  padding: 16px;
  text-align: center;
  font-size: 18pt;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#mainPage img {
  margin: 32px 32px 12px;
  width: 80%;
  border: 2px #fdfeff solid;
  border-radius: 12px;
}

.legend {
  font-size: 12pt;
  font-style: italic;
}

.btntitle {
  font-size: 16pt;
  font-weight: bold;
}

.buttonsrow {
  text-align: center;
  display: flex;
  flex-direction: row;
  margin: 16px auto 32px;
  width: fit-content;
  user-select: none;
}

#classique {
  padding: 8px;
  border-radius: 12px;
  background-color: #217c7c;
  border: 0;
  box-shadow: 0 0 10px 2px #217c7c;
  margin-right: 8px;
}

#classique:hover {
  background-color: #1b6262;
}

#classique:active {
  background-color: #134848;
}

#hardcore {
  padding: 8px;
  border-radius: 12px;
  background-color: #bb1a1a;
  border: 0;
  box-shadow: 0 0 10px 2px #bb1a1a;
  margin-left: 8px;
}

#hardcore:hover {
  background-color: #7e1212;
}

#hardcore:active {
  background-color: #641010;
}

.btntitle {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

hr {
  margin-left: 5%;
  margin-right: 5%;
}