:root {
    --space: 0.8rem;
    --wsize: 10rem;
    --w6: calc(var(--wsize) * 6);
    --orange-m: #D58243;
    --green-m: #4D8A6A;
    --blue-m: #2F437A;
    --yellow-m: #C7AF4C;
    --red-m: #C1666B;
    --orange: #DA7121;
    --green: #377354;
    --blue: #466AC6;
    --yellow: #dbb622;
    --red: #C03C43;

    --gray-0: #7a7a7a;
    --gray-1: #9a9a9a;
    --gray-2: #bababa;
    --gray-3: #cacaca;
    --gray-4: #dadada;
    --gray-5: #eaeaea;
    --black-0: #0b0b0bff;
    --black-1: #1b1b1bff;
    --black-2: #2b2b2bff;
    --black-3: #3b3b3bff;
    --black-4: #4b4c4dff;
    --black-5: #5b5c5dff;

    --primary: #0A1312;
    --secondary: #E7C632;
    --surface: #DADADA;
    --background: #A8A6A9;
    --error: #CF6A34;

    
    --amarelo: #e6b450; 
    --fundo-preto-0: #0b0e14;
    --fundo-preto-1: #171e2a;
    --cinza-escuro-0: #30343c;
    --cinza-escuro-1: #626874;
    --cinza-claro: #bfbdb6; 

}

* , *:before, *:after{ 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
}

html {
    box-sizing: border-box;
    font: normal normal 400 62.5%/1.333 sans-serif;
    font-family: Helvetica, sans-serif;
    --page-color: #A8A6A9;
    --ink-color: #0A1312;
}

body {
    font-size: 1.6rem;
    background-color: var(--background);
    color: var(--primary);
    width:100%;
    margin: 0;
    margin-top: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
}

.main, .post, .article, 
.header, .footer
{
    width: 100%;
    max-width: 72rem;
    margin: 0;
    padding: 0;
}

.serif {
    font-family: 'Source Serif 4', 'Times New Roman', serif;
}
.sans {
    font-family: 'Source Sans 3', Helvetica, sans-serif;
}
.mono {
    font-family: 'Source Code Pro', Courier, monospace;
}

.window {
    width: 100%;
    display: flex;
    justify-content: center;
}

.board {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.page {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.footer {
    font-family: 'Source Sans 3';
    border-top: var(--gray-2) solid 0.1rem ;
    padding-top: 1rem;;
    font-size: 1.6rem;
    color: var(--black-2);
    margin-bottom: 2rem;
}

.footer > * {
    margin: 0;
}

.subtitle { font-size: 3rem;}
.lead { font-size: 2.6rem; font-style: italic; font-weight: 500;color:var(--black-0)}
h1 { font-size: 3.4rem }
h2 { font-size: 2.6rem }
h3, blockquote { font-size: 2.2rem }
h4 { font-size: 2.1rem } 
h5 { font-size: 2rem }
h6 { font-size: 1.9rem }
article { font-size: 2.2rem; }


blockquote {
    font-style: italic;
    border-left: #0a131247 solid 0.5rem;
    padding-left: 2rem;
    margin-inline-start: 0;
}

img,
video,
.video,
.img {
    height: auto;
    width: 100%;
}

.audio,
.iframe {
    position: relative;
    padding-bottom: 56.25%;
}
.audio {
    padding-bottom: 30%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: auto;
}
figure {
    margin: 1rem 0;
    padding: 0;
}
figcaption {
    text-align: center;
    color: var(--black-5);
}
figcaption,
small {
    font-style: italic;
    font-size: 1.6rem;
    line-height: 5px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td,
th {
    padding: 0;
}
td:not([align]),
th:not([align]) {
    text-align: left;
}
ol,
ul {
    margin: 0;
    padding-left: calc(var(--space) * 3);
}
a {
    display: inline;
    text-decoration: underline;
    cursor: pointer;
}
a:link {
    color: var(--black-1);
}
a:visited {
    color: var(--black-5);
}
a:hover,
a:active {
    color: var(--green);
}

.link {
    text-decoration: underline;
    cursor: pointer;
    background: -webkit-linear-gradient(120deg, var(--blue), var(--black-0));
    --webkit-background-clip: text;
    --webkit-text-fill-color: transparent;}

.link:link {
    color: var(--black-1);
}
.link:hover {
    color: var(--green);
    text-decoration: underline;
}
.link:visited {
    color: var(--black-1);
}
.link:active {
    color: var(--green);
}
.button {
    background-color: transparent;
    color: var(--black-5);
    text-transform: uppercase;
    font-weight: 600;
    padding: 2.2rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.8rem;
    cursor: pointer;
    transition-duration: 0.5s;
    border: 0.5rem solid;
    border-radius: 1rem;
    border-image-source: linear-gradient(to right, var(--red) 0%, var(--blue) 100%);
    border-image-slice: 5;
}
.button:hover {
    background-image: linear-gradient(to right, var(--red) 0%, var(--blue) 100%);
}
.menu {
    max-width: 72rem;
}
.menu ul {
    width: 100%;
    padding: 0;
}

.menu-item {
    font-family: 'Source Sans 3';
    display: inline;
    line-height: 1;
    font-size: 1.4rem;
    padding-right: 0.5rem;
}
.menu-item-link:link {
    color: var(--black-1);
}
.menu-item-link:hover {
    color: var(--green);
}
.menu-item-link:visited {
    color: var(--black-5);
}
.list {
    width: 100%;
    max-width: 72rem;
    padding: 0;
}
.list-items-articles,
.list-items-videos {
    padding: 0;
    list-style-type: none;
}
.list-items-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.list-item,
.list-item-video {
    font-size: 2.4rem;
    list-style-type: none;
    margin-bottom: 0.8rem;
}
.list-item-video {
    display: flex;
    flex-grow: 1;
    flex-basis: 20rem;
}

.list-item > a:link {
    color: var(--black-2)
}


.list-item > a:hover {
    color: var(--green)
}


.list-item > a:active {
    color: var(--green)
}

.list-item > a:visited {
    color: var(--black-5)
}

@media screen and (max-width: 32rem) {
    .list-item-video {
        flex-basis: 15rem;
    }
}

.list-item-link,
.list-item-link-video {
    display: flex;
    text-decoration: none;
}
.list-item-link-video {
    display: flex;
    flex-direction: column;
}
.list-item-header > *,
.list-item-title {
    margin: 0;
}
.list-item-thumb {
    max-width: 20%;
}
.list-item-thumb-video {
    max-width: 100%;
}
.list-item-header {
    padding-left: 0.8rem;
}

.list-title,
.video-title {
    font-size: 1.8rem;
    color: var(--black-3);
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 30rem) {
    .list-item-thumb {
        max-width: 30%;
    }
}
.list-title:hover,
.video-title:hover {
    color: var(--gray-0);
}
.meta {
    font-size: 1.4rem;
    color: var(--gray-1);
    margin: 0.4rem 0;
    display: flex;
}

.article-title {
    font-size: 4rem;
    word-spacing: 0.05rem;
    line-height: 1.1;
    font-weight: 900;
}

.article-metadata {
    font-family: 'Source Sans 3';
    color: var(--black-2);
    padding-top: 1rem;
    font-size:1.6rem;
    line-height:1.4;
    margin: 2rem 0;
}

.article-metadata > * {
    margin: 0;
}

.article > p {
    line-height: 1.6;
}

math {
    font-size: 2.2rem;
}
sup {
    font-size: 1.2rem;
}
player-x {
    width: 100%;
    height: 40rem;
}

.perfil > ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}
.perfil-item {
    display: inline;
}

.perfil-item > a {
    text-decoration: none;
}

.icon-footer {
    width: 2rem;
    padding: 0 0.2rem
}

mark {
    background-color: var(--yellow-m)
}

.blue {
    background-color: var(--blue-m)
}

.green {
    background-color: var(--green-m)
}

.orange {
    background-color: var(--orange-m)
}

.red {
    background-color: var(--red-m)
}

.logo, .logo:visited, .logo:hover {
    margin: 0;
    padding-right: 2rem;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--black-0);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
    font-family: 'Source Sans 3';
}

.quadro {
    border: 1px solid var(--black-2); 
    padding: 1rem 2rem;
}