formatos.css

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    src: url("Roboto/Roboto-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal;
    src: url("Roboto/Roboto-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: normal;
    src: url("Roboto/Roboto-Bold.ttf") format("truetype");
}

body {
    background-color: rgb(230, 150, 124);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Assegura que o layout cubra toda a altura do viewport */
    font-family: "Roboto", sans-serif;
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Certifique-se de que o z-index do header seja alto */
    background-color: rgb(52, 58, 64);
    color: rgb(200, 200, 200);
}
.card {
    position: relative; /* Garante que ela respeite o fluxo normal */
    z-index: 1; /* Menor que o header */
}
menu {
    display: flex;       /* Faz com que os items fiquem horizontalmente alinhados */
    list-style: none;    /* Remove as "bullets" */
    padding: 10px;
    margin: 0;
}
menu li {
    margin-right: 20px;          /* Espaço entre os itens do menu */
    margin-left: 20px;
}
menu li a {
    text-decoration: none;       /* Remove o "underline" dos links */
    color: rgb(200, 200, 200); /* Cor padrão do link */
    display: block;              /* Faz comn que o link preencha o <li> */
}
menu li a:hover {
    color: white;               /* Muda a cor do texto quando o mause passa por cima do link menu */
}
menu li a:active {
    color: white;               /* Cor do texto ao ser clicado */
    font-weight: bold;            /* Peso da fonte ao ser clicado */
}

/* Cor especial para o link da página ativa */
menu li a.active_link {
    color: white;    /* Cor do link da página atual */
    font-weight: bold; /* Peso da fonte do link da página atual */
}
main {
    flex: 1; /* Isto faz com que o elemento <main> element cresça para preencher o espaço disponível */
    padding: 20px;
    justify-content: center;     /* Centraliza o conteúdo horizontalmente */
    align-content: center;       /* Centraliza o conteúdo verticalmente */
    padding-top: 0px;
    margin-top: 72px;
}
footer {
    color: white;
    background-color: black;
}

.logotipo {
    width: 50px;
    height: 50px;
}
.home_p {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
    margin-top: 2px;
    font-size: 1.5rem;
    font-weight: bold;
}
.footer_ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    width: 100%;
    margin: auto;
    font-weight: bold;
}
#home_footer_ul_li_1 {
    border-right: 1px solid white;
    padding-right: 20px;
    font-weight: bold;
}
#home_footer_ul_li_2 {
    padding-left: 20px;
    font-weight: normal;
}

#home_hgroup {
    text-align: center;
}
#home_h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
}
#icon_anchor:unvisited {
    color: white;
}
#icon_anchor:visited {
    color:aqua;
}