/*HELPERS*/
.visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.pseudo {
    position: relative
}

.pseudo::before,
.pseudo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

article *+* {
    margin-top: 1.618em
}

:root {
    font-size: 100%;
    font-size: clamp(100%, 61.8% + 0.618vw, 161.8%);
    line-height: 1.618;
    color: #222;
    --lang-picker: 40px;
    --nav-bar: 50px;
    --nav: calc(var(--lang-picker) + var(--nav-bar))
}

html {
    height: 100%
}

@media(prefers-reduced-motion:no-preference) {
    html {
        scroll-behavior: smooth
    }
}

body {
    font-family: Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
    font-variant-ligatures: common-ligatures;
    margin-top: 0;
    background-color: #fdfcfb
}

main {
    position: relative;
}

article * {
    max-width: 62ch
}

div,
header,
section,
footer,
hr,
iframe,
figcaption,
figure,
figure img {
    max-width: none
}

section {
    position: relative;
}

hr {
    border: none;
    height: 1px;
    background: #ddd
}

/**/

h1,
.h1 {
    font-size: 2.618rem;
    font-size: clamp(261.8%, 1rem + 4.236vw, 423.6%);
    line-height: .95;
    text-align: center;
    margin: 0 auto
}

h2,
.h2 {
    font-size: 1.618rem;
    font-size: clamp(161.8%, 1rem + 2.618vw, 261.8%);
    line-height: 1.125
}

h3,
.h3,
blockquote {
    font-size: 1.382rem;
    font-size: clamp(100%, 1rem + 1.618vw, 161.8%);
    line-height: 1.2
}

.subhead {
    margin-bottom: 2.618rem;
    max-width: 100%;
    font-weight: 400;
    font-style: italic
}

a,
button {
    cursor: pointer
}

main a[class] {
    text-decoration: none
}

main :not(cite, dd, .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, small, .small, span)>a {
    display: block
}

@media(hover:hover) {

    main a,
    main button,
    .diSlimBtn {
        transition: all .5s ease
    }

    main a:hover,
    main button:hover,
    .diSlimBtn:hover,
    main input[type="button"]:hover,
    main input[type="reset"]:hover,
    main input[type="submit"]:hover {
        filter: brightness(1.2)
    }
}

/*ELEMENTS*/
/*Buttons*/
main button,
.button,
.diSlimBtn,
main input[type="button"],
main input[type="reset"],
main input[type="submit"],
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    width: min(100%, 38ch) !important;
    border: none;
    margin-right: auto;
    margin-left: auto;
    padding: 0 1ch;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    line-height: 2.618;
    font-weight: 400;
    border-radius: .618em
}

.primary.button,
.diSlimBtn,
main button,
main input[type="button"],
main input[type="reset"],
main input[type="submit"] {
    color: #fff;
    background: #06f;
    background: linear-gradient(to bottom, #07f 0%, #05e 100%);
    box-shadow: 0 0 1.618em rgba(0, 153, 255, .13), 0 .09em .146em rgba(0, 0, 102, .17), .09em .146em .236em rgba(0, 0, 102, .17), .146em .236em .382em rgba(0, 0, 102, .17), .236em .382em .618em rgba(0, 0, 102, .17), .382em .618em 1em rgba(0, 0, 102, .17)
}

.secondary.button,
main input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: rgba(0, 0, 0, 0);
    color: #06f;
    line-height: calc(2.618em - 4px);
    border: 2px solid #06f;
    padding: em;
    min-width: 26ch;
}

.blur {
    color: #fff !important;
    border-color: #fff !important;
    background-color: rgba(0, 0, 0, .15) !important;
    -webkit-backdrop-filter: blur(13px) !important;
    backdrop-filter: blur(13px) !important;
}

blockquote {
    margin: 2.618em 0;
    font-weight: 300
}

footer blockquote,
footer blockquote cite {
    margin: 0 auto;
    font-weight: 400;
    text-align: center
}

blockquote strong {
    font-weight: 900
}

@supports not (hanging-punctuation: first force-end last) {
    blockquote .quote:first-of-type {
        margin-left: -.63ch
    }
}

blockquote cite {
    display: block;
    font-size: 1rem;
    line-height: 1.618;
    font-style: normal;
    font-weight: 400;
    text-align: right
}

h4,
h5,
h6 {
    font-size: 1rem;
    line-height: 1.382;
}

main a {
    color: #06c;
    font-weight: bold;
    text-decoration: underline
}

article ul {
    list-style: circle
}

article ol li::marker {
    font-weight: 700
}

article li {
    margin-left: 1em;
}

article li+li {
    margin-top: 0
}

article ul[class],
article ul[id] {
    list-style: none
}

article ul[class] li,
article ul[id] li {
    margin-left: 0
}

main dt {
    font-weight: 700
}

main dd+dt {
    margin-top: 1rem
}

p {
    hanging-punctuation: first force-end last
}

address,
sup,
sub,
small,
.small {
    font-size: 61.8%;
    line-height: 1.382;
    max-width: 100ch
}

sub,
sup {
    line-height: 1
}

figcaption,
.small {
    font-size: 75%;
    line-height: 1.382;
    color: #555
}

figcaption {
    margin-top: .618em;
    padding: 0 .236rem
}

figcaption strong {
    text-transform: uppercase
}

address {
    font-style: normal
}

@supports(clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)) {
    footer blockquote::after {
        content: '';
        clip-path: polygon(0 33%, 46% 33%, 46% 0, 54% 0, 54% 33%, 100% 33%, 100% 38%, 54% 38%, 54% 100%, 46% 100%, 46% 38%, 0 38%);
        background: #000;
        display: block;
        width: 1rem;
        height: 1.618rem;
        margin: 2.618rem auto 0;
    }
}

@media(min-width:768px) {
    :root {
        --nav-bar: 72px
    }

    #footer-widgets {
        padding-bottom: 0 !important
    }
}

@media (hover:hover) {
    main a {
        transition: all .4s ease
    }

    main a:hover {
        filter: brightness(1.15)
    }
}