style.css

* {
    font-family: sans-serif;
    background-color: black;
}

header {
    margin: 60px;
    color: white;
}

header h1 {
    text-transform: uppercase;
}

header h1, header p {
    text-align: center;
}

#conteudo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}

.card {
    display: inline-block;
    vertical-align: top;
    max-height: 100%;
}

.card img {
    display: block;
}

summary:hover {
  background-color: #000029;
  cursor: pointer;
}

.card details {
    width: 252px;
    height: auto;
    display: inline-block;
}

.card details summary {
    font-size: 18px;
    padding: 10px;
}

.card details p {
    padding: 10px;
}

.alegria {
    color: yellow;
}
.raiva {
    color: red;
}
.tristeza {
    color: lightblue;
}
.medo {
    color: rgb(139, 139, 202);
}
.nojinho {
    color: lightgreen;
}
.ansiedade {
    color: orange;
}
.tedio {
    color: purple;
}
.inveja {
    color: turquoise;
}
.vergonha {
    color: pink;
}