@font-face{
    font-family: 'Roboto';
    src: url("./utils/Roboto-Regular.ttf")
}

:root{
    --black-800: #222;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;    
    font-family: 'Roboto';

}

header{
    display: flex;
    justify-content: center;
    align-items: center;

    background: rgb(161, 161, 167);
    background: linear-gradient(90deg, rgba(210,208,238,1) 1%, rgba(57,72,106,1) 100%, rgba(9,9,121,1) 100%);

    box-shadow: -1px 3px 41px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: -1px 3px 41px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 3px 41px 0px rgba(0,0,0,0.75);

    margin-bottom: 5rem;
}

header > h1{
    padding: 2rem;
    color: var(--black-800)
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%,
}

.mesesPc{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3rem;

    width: 100%;
    max-width: 1200px;

    justify-items: center;
    align-items: flex-start;
}
.mesesPc > div{
    text-align: center;
}
.mes{
    font-size: 1.3rem;
    font-weight: bold;
}
ul{
    margin-top: .5rem;
}
li{
    list-style: none;
    text-align: center;
}