/*
FONTS
font-family: 'Lancelot', cursive;
*/
*,
*::before,
*::after{
   max-width:100%;
   box-sizing:border-box;
   margin:0;
   padding:0;
   font-family: system-ui,sans-serif;
   font-size:14px;
   font-weight:400;
   word-wrap:break-word;
}

body{
   background-color:#202125;
   color:#fff;
}

h1,h2,h3,h4,h5,h6{
   font-family: system-ui,sans-serif;
   font-weight:300;
   letter-spacing:0.05em;
   padding:.25em .5em;
}

.styled-title{
   font-family: 'Lancelot', cursive;
}

h1{
   font-size:40px;
}
h2{
   font-size:28px;
}
h3{
   font-size:24px;
}
h4{
   font-size:23px;
}
h5{
   font-size:20px;
}
h6{
   font-size:17px;
}

a,
a:visited{
   width:max-content;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   text-align:center;
   font-size:16px;
   text-decoration:none;
   color:#faead6;
   padding:1em 2em;
   margin-inline:auto;
   margin-block:1em;
   border:2px solid #faead6;
   background-color:transparent;
   transition:color .125s ease-out,background-color .125s ease-out,border .125s ease-out;
}

a:hover{
   color:#f4d4a9;
   background-color:#0f0f10;
   border:2px solid #f4d4a9;
}

.main-head{
   width:100%;
   display:flex;
   flex-direction:row;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   padding:.5em 1em;
   background-color:#26272c;
}

.main-head-title{
   width:100%;
   text-align:center;
   padding:1em 2em;
}

.main-content{
   width:100%;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   align-items:stretch;
   gap:.5em;
   padding-block:2em calc(2em + 60px);
   padding-inline:2em;
}

.main-sections{
   width:80em;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   align-items:center;
   gap:1em;
   padding:1em;
   margin-inline:auto;
   background-color:#26272c;
}

.main-sections-title{
   width:30em;
   text-align:center;
   margin-inline:auto;
}

.main-articles{
   width:100%;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   align-items:center;
   gap:.5em;
   padding:.25em .5em;
   background-color:#1d1d20;
   position:relative;
}

.main-articles-title{
   grid-area:title;
   width:max-content;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   text-align:center;
   margin-inline:auto;
   font-family:system-ui,sans-serif;
}

video{
   max-height:50vh;
   -webkit-aspect-ratio:16/9;
   -moz-aspect-ratio:16/9;
   -o-aspect-ratio:16/9;
   aspect-ratio:16/9;
}

summary{
   width:calc(100% - 2em);
   text-align:center;
   margin-inline:auto;
   margin-block:.5em 1em;
   cursor:pointer;
}

.main-footer{
   width:100%;
   height:60px;
   display:flex;
   flex-direction:row;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   padding:.5em 1em;
   background-color:#26272c;
   position:fixed;
   bottom:0;
   z-index:10;
}