*
{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

@font-face {
    font-family: 'Grotesque Bourgeoisie';
    src: url(./Grotesque\ Bourgeoisie.ttf);
}

.link
{
    font-family: "Grotesque Bourgeoisie";
    text-align: center;
    font-size: 150%;
    text-decoration: none;
    color: #cc99cc;
}

.logo
{
    max-height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.logoP
{
    max-height: 30%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: start;
}
.navigation
{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-around;
}
.fondo
{
    background-image: url(./fondo.png);
    background-size: cover;
}

.centrado
{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    flex-basis: auto;
}
.pie
{
    display: flex;
    background-color: #f9ff83;
    height:30vh;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}
.parrafocentrado
{
    text-align: center;
}
.info
{
    max-height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.pie1
{
    display: flex;
    height:30vh;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}
.box
{
    width: 50vw;
    padding: 1vw;
    border-width: 2vw;
    border-style: solid;
    border-color: #f9ff83;
    background-color: #cc99cc;
}
.box1
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.styled-table 
{ 
    border-collapse: collapse; 
    margin: 25px 0; 
    font-size: 1em; 
    font-family: sans-serif; 
    min-width: 450px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); 
    text-align: center;
}
.tr 
{ background-color: #f9ff83; 
    color: #000000; 
    text-align: center; 
}