@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&display=swap');

:root {
  --color: #37415c;;
  --body-background-color: #b9d9ff;
  --link-color: #ffff00;
  --link-hover-color: #ff0000;
  --font-header: 'Antonio', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-body: 'Antonio', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
 body {
       width: 100%;
       padding: 0;
       margin: 0;
    color:#ffffff;
    background-color:#000033;
    letter-spacing: .05em;
    font-family:  var(--font-body)
 }


 a, a:visited {
  color: var(--link-color);
 }
 a:hover {
  color: var(--link-hover-color);
 }

 .container {
  display: grid;
  grid-template-rows: 50px auto;
}
.container-homelink {
  grid-row: 1 / 2;
  text-align: left;
}
.container-game {
  grid-row: 2 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.homelink {
  width: 50px;
  height: 20px;
  margin: 10px 10px 10px 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  border-right: 1px solid #ffff00;
  border-bottom: 1px solid #ffff00;
}
.homelink a{
  text-decoration: none;
}
.homelink a:hover {
  text-decoration: underline;
}
.spacer {
  width: 80%;
  content: '';
}

.card {
  width: 160px;
  height: 120px;
  background-color: rgb(26, 26, 255);
  border-left: solid rgb(19, 19, 160) 10px;
  border-right: solid rgb(11, 11, 91) 10px;
  border-top: solid rgb(61, 61, 200)10px;
  border-bottom: solid rgb(20, 20, 89) 10px;
  text-align: center;
  font-size: 100px;
  margin: 5px;
  padding: 10px;
  line-height: 120px;
}

#game {
  display: flex;
  background-color: rgb(32, 32, 32);
}

.first-button {
  background-color: rgb(24,171,24);
}
.second-button {
  background-color: rgb(190,57,37)
}
.genre-title {
  background-color: rgb(26,26,255);
  text-align: center;
  font-size: 28px;
  margin:5px;
  padding: 5px;
}
.correct-answer {
  background-color: rgb(186,186,24)
}
.wrong-answer {
  background-color: rgb(221,64,56)
}