html {
    width: 100%;
    height: 100%;
}
.container-1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: repeat(4, 1fr);

}
.header-challenge {
    grid-column: 2/3;
    grid-row: 1/1;
}
.input-challenge-1{
    align-self: center;
    justify-self: center;
    grid-row: 2/3;
    grid-column: 2/3;
}
.age-result {
    padding: 10px 20px;
    margin: 10px;
    border: 1px solid black;
    grid-column: 2/3;
    grid-row: 3/3;
    place-self: center;
}
.button-border {
    grid-gap: 10px;
    align-self: center;
    justify-self: center;
    grid-column: 2/3;
    grid-row: 4/5;
}
/* cats */
#cats-container,
#rps-body,
#buttons-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.cat-image {
    width: 240px;
    height: 200px;
    margin: 20px;
    box-shadow: 11px 10px 13px -6px rgba(0,0,0,0.75);
}
.header-challenge {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.break {
    flex-basis: 100%;
    height: 0;
  }

/* rock paper scissors */
#rps-body {
    margin-bottom: 100px;
}

#rps-body img {
    margin-top: 50px;
    width: 200px;
    height: 200px;
}
.rps-element:hover {
    box-shadow: 2px 2px 37px 22px rgb(243, 6, 6);
    cursor: pointer;
}
#rps-score {
    align-self: center;
    font-size: 5rem;
    display: none;
}
.winner {
    color: green;
}

.loser {
    color: red;
}

.tied {
    color: yellow;
}