@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
  --primaryColor: #003699;
  --darkColor: #333333;
  --lightColor: #f4f4f4;
  --loseColor: #dc3545;
  --winColor: #28a745;
  --modalDuration: 1s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  background: #fff;
  color: #333;
}

.container {
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  padding: 0 2rem;
  text-align: center;
}

.restart-btn {
  display: none;
  background: var(--lightColor);
  color: #333;
  padding: 0.4rem 1.3rem;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  border: none;
  margin-bottom: 1rem;
}

.restart-btn:hover{
    background: var(--primaryColor);
    color: #fff;
}

.header {
    text-align: center;
    margin: 1rem 0;
}
.header h1{
    margin-bottom: 1rem;
}

.score{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    font-size: 1.2rem;
}

.score p:first-child{
    background: var(--primaryColor);
    color: #fff;
}

.score p:last-child{
    background: var(--darkColor);
    color: #fff;
}

.choices{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
    margin-top: 3rem;
    text-align: center;
}

.choice{
    cursor: pointer;
}

.text-win{
    color: var(--winColor);
}

.text-lose{
    color: var(--loseColor);
}

.choice:hover{
    color: var(--primaryColor);
}


@media(max-width: 700px)
{
    .choice{
        font-size: 110px;
    }
}

@media(max-width: 500px)
{
    .choice{
        font-size: 80px;
    }
}