* {
    box-sizing: border-box;
}
/* common tags */
html {
    font-family: 
    'Open Sans', 
    'Gill Sans',
    'Verdana', 
    'FF', 
    'Exo', 
    sans-serif;
    letter-spacing: 1px;
    scroll-behavior: smooth;
}
body {
    --this-gap: 40px;
    width: 100%;
    height: 100vh;
    background-image: 
        linear-gradient(to top right, rgba(0,0,0,0.75), rgba(0,0,0,0.2)),
        var(--background-image);
    background-attachment: fixed;
    /* background-size: auto 100%; */
    /* background-position: center; */
    background-size: cover;
    background-repeat: no-repeat;
}
h1 {font-size: var(--h1);}
h2 {font-size: var(--h2);}
h3 {font-size: var(--h3);}
h4 {font-size: var(--h4);}
h5 {font-size: var(--h5);}
h6 {font-size: var(--h6);}
/* headers */
.header {
    --this-gap: 30px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
}
.header::before,
.header::after {
    content: '';
    border-width: var(--this-gap);
    border-style: solid;
    border-color: transparent;
}
.header::before 
{
    border-top: none;
    border-right: none;
    border-left: var(--this-gap) solid var(--back-clr-three);
}
.header::after {
    border-top: none;
    border-right: var(--this-gap) solid var(--back-clr-three);
    border-left: none;
}
.header__content {
    display: flex;
    flex-direction: column;
    gap: var(--this-gap);
    justify-content: center;
    border-bottom: var(--this-gap) solid transparent;
    width: 100%;
    padding: calc(var(--this-gap) + 10px);
    background-color: var(--main-clr-three);
    background-clip: padding-box;
}
.header__title {
    letter-spacing: 2px;
    font-weight: 900;
    text-align: center;
}
.header__description {
    font-size: var(--h4);
    text-align: center;
    line-height: 150%;
}
.header__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: var(--h5);
    text-align: center;
}
.header__list > b:first-of-type {
    font-weight: 900;
}
.header__list  a {
    color: black;
}
/* navigation */
.navigation {
    --nav-clr-one: var(--main-clr-two);
    --nav-clr-two: var(--main-clr-two);
    --this-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--this-gap);
    padding: 5px;
    font-size: var(--h5);
}
.navigation__ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--this-gap)/2);
    border-top: 2px solid rgba(0,0,0,0.25);
    padding-left: 10px;
    background-color: var(--nav-clr-one);
}
.navigation__li {
    --step: 1px;
    align-self: stretch;
    background-color: var(--nav-clr-two);
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(0,0,0,0.25) 0px,
            rgba(0,0,0,0.25) var(--step),
            rgba(0,0,0,0.5) var(--step),
            rgba(0,0,0,0.5) calc(var(--step)*2)
        )
    ;
    transition: background-color 0.3s;
}
.navigation__a {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
.navigation__li:hover .navigation__a {
    color: var(--hover-clr);
}
.navigation__li:active {
    background-color: var(--active-clr);
}
/* TEMPORARY FORBIDDEN 
(until statistics section is finidhed) */
.navigation__ul:last-of-type .navigation__a {
    pointer-events: none; 
}
/* main */
.main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--this-gap);
    margin-top: calc(0px - var(--this-gap));
    padding: 0px var(--this-gap);
    width: 100%;
}
/* sections */
.section {
    --this-gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.section__text {
    display: flex;
    flex-direction: column;
    padding: var(--this-gap) 0px ;
}
.section__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--this-gap);
    /* decor */
    padding: 0px var(--this-gap);
    border-left: var(--this-gap) solid var(--main-clr-one);
    border-right: var(--this-gap) solid var(--main-clr-one);
    border-bottom: var(--this-gap) solid transparent;
    background-color: var(--main-clr-two);
    background-clip: padding-box;
    /* white stripe */

}
.section__title {
    border-bottom: 2px solid rgba(0,0,0,0.5);
    padding-bottom: calc(var(--this-gap)/2);
}
.section__description {
    padding-top: calc(var(--this-gap)/2);
}
.section__icon {
    display: flex;
    align-self:stretch;
    /* width: var(--this-gap); */
    width: 80px;
    height: auto;
    background-color: white;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    filter: 
        grayscale(100%)
        opacity(25%) 
        /* brightness(150%)  */
        contrast(150%);
}
.section__buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-left: auto;
    padding: 5px;
    background-color: var(--back-clr-three);
}
.section__buttons > a{
    text-decoration: none;
}
.section__button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    text-decoration: none;
    color: black !important;
    background-color: var(--main-clr-three);
    cursor: pointer;
}
.section__button--pushed {
    filter: brightness(50%);
}
.section__content {
    --this-gap: 20px;
    padding: 0px var(--this-gap);
    padding-bottom: calc(var(--this-gap) + var(--this-gap)/2);
    transition: 0.5s ease-out;
    overflow: hidden;
}
.section__content--closed {
    height: 0px;
    padding-bottom: 0px;
}
.section:last-child 
.footer__content {
    clip-path: 
        polygon(
            0px 0px, 100% 0px,
            calc(100% - var(--this-gap)) 100%,
            var(--this-gap) 100%
        )
    ;
}
.section__footer {
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: calc(0px - var(--this-gap)/1.5);
}
.section__footer::before {
    content: '';
    border-left: var(--this-gap) solid transparent;
    border-right: var(--this-gap) solid transparent;
    border-bottom: var(--this-gap) solid var(--main-clr-one);
}
/* section content section */
.section__articles {
    --this-gap: 10px;
    gap: var(--this-gap);
    display: flex;
    flex-direction: column;
}
/* footers */
.footer {
    --ftr-gap: 20px;
    --ftr-clr: var(--back-clr-three);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--ftr-gap);
    border: var(--ftr-gap) solid var(--main-clr-one);
    border-top-color: transparent;
    border-bottom:none;
    width: 100%;
    padding: 20px;
    font-size: var(--h6);
    background-color: var(--ftr-clr);
    background-clip: padding-box;
}
/* footer nav */
.footer .navigation {
    --nav-clr-one: var(--back-clr-two);
    --nav-clr-two: var(--back-clr-three);
}
.section__footer.footer {
    --ftr-gap: 20px;
    --ftr-clr: var(--back-clr-three);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: none;
    width: 100%;
    background-color: unset;
}
.section__footer {
    --ftr-clr: transparent;
    flex-direction: column;
    gap: 0px;
    padding: 0px 3px; /* little correction */
}
.footer__ul {
    display: flex;
    flex-direction: column;
}
.section__footer .footer__content {
    display: flex;
    gap: var(--this-gap);
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 0px calc(var(--this-gap)*2);
    text-align: right;
    color: rgba(0,0,0,0.75);
    background-color: var(--back-clr-three);
}
.footer__button {
    padding: 0px 5px;
    width: calc(var(--this-gap)*3 + 10px);
    height: auto;
    padding-top: 6px;
    font-weight: 700;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-decoration: none;
    background-color: var(--back-clr-two);
    transition-property: color, background-color;
    transition-duration: 0.3s;
}
.footer__button:hover {
    color: var(--hover-clr);
}
.footer__button:active {
    color: var(--active-clr);
    background-color: var(--hover-clr);
}
.footer__a {
    color:inherit;
}
/* app div */
#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--this-gap);
    margin: 0 auto;
    max-width: 1100px; 
}