* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
}

.cabecalho {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.container {
    max-width: 900px;
    margin: auto;
}

.exercicio {
    margin-top: 20px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
}

/* 1 */

.lista-quadrada {
    list-style-type: square;
}

/* 2 */

.lista-romana {
    list-style-type: upper-roman;
}

/* 3 */

.lista-imagem {
    list-style-image: url("estrela.png");
}

/* 4 */

.lista-inside {
    list-style-position: inside;
    padding-left: 0;
}

.lista-inside li {
    border: 1px solid #888;
    padding: 10px;
    margin-bottom: 10px;
}

/* 5 */

.alerta {
    padding: 15px;
    border: 2px solid red;
    border-radius: 8px;
    background-color: #ffe5e5;
}

/* 6 */

.botao {
    display: inline-block;
    padding: 12px 18px;
    border: 3px dashed blue;
    background-color: #eef5ff;
    font-weight: bold;
    text-decoration: none;
    color: black;
}

/* 7 */

.moldura {
    width: 350px;
    height: 160px;
    background-color: #dff5df;
    border-radius: 30px 10px 35px 15px;
    padding: 20px;
}

/* 8 */

.tabela-collapse {
    border-collapse: collapse;
}

.tabela-collapse,
.tabela-collapse th,
.tabela-collapse td {
    border: 1px solid black;
}

.tabela-collapse th,
.tabela-collapse td {
    padding: 10px;
}

/* 9 */

.tabela-separate {
    border-collapse: separate;
    border-spacing: 12px;
}

.tabela-separate,
.tabela-separate th,
.tabela-separate td {
    border: 1px solid black;
}

.tabela-separate th,
.tabela-separate td {
    padding: 10px;
}

/* 10 */

.outline {
    width: 320px;
    padding: 20px;
    background-color: #fff8b6;
    border: 4px solid black;
    outline: 4px solid orange;
}

/* 11 */

.outline-offset {
    padding: 20px;
    border: 4px solid blue;
    outline: 3px solid green;
    outline-offset: 10px;
}

/* 12 */

.sombra {
    width: 350px;
    padding: 20px;
    background-color: white;
    box-shadow: 6px 8px 18px gray;
}

/* 13 */

.sombra-interna {
    padding: 20px;
    background-color: #eee;
    box-shadow: inset 0 0 12px gray;
}

/* 14 */

.aura {
    width: 180px;
    padding: 30px;
    margin: 20px auto;
    text-align: center;
    background-color: white;
    box-shadow: 0 0 12px 10px rgba(0, 180, 0, 0.4);
}

/* 15 */

.centralizado {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: center;
    background-color: #eef3ff;
}

/* 16 */

.menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.menu li {
    display: inline-block;
    margin-right: 5px;
}

.menu a {
    display: inline-block;
    padding: 10px;
    background-color: black;
    color: white;
    text-decoration: none;
}

/* 17 */

.caixa-flexivel {
    width: 100%;
    max-width: 300px;
    min-height: 120px;
    padding: 20px;
    background-color: #eee;
}

/* 18 */

.etapas {
    display: flex;
    gap: 10px;
}

.etapas div {
    padding: 20px;
    min-width: 120px;
    text-align: center;
    border: 1px solid black;
}

.oculto {
    visibility: hidden;
}

/* 19 */

.removido {
    display: none;
}

/* 20 */

.feedbacks {
    display: flex;
    gap: 15px;
}

.feedback {
    padding: 25px;
    background-color: blue;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.opacidade-1 {
    opacity: 1;
}

.opacidade-05 {
    opacity: 0.5;
}

.opacidade-025 {
    opacity: 0.25;
}