/* @formatter:off */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*,*::after,*::before{box-sizing:border-box}
/* @formatter:on */


/**
 *      ⌞ mobile     ⌞ tablet  ⌞ desktop
 *  XS   (default)
 * -----*------------*---------*---------*
 */

/* Mobile */
@media (width < 428) {
    /* Mobile-XS */
}

@media (width >= 768) {
    /* Tablet */
}

@media (width >= 1024) {
    /* Desktop */
}

:root {
    --color-secondary: #10A8B5;
    --color-white : #FFFFFF;
    --color-yellow : #f39c12;
    --color-white-secondary: #D8F9FC;
}

:root {
    --gutter: 16px;
    --container-max-width: 1280px;
    --content-max-width: 750px;
    --column: 4;

    --space-05: 4px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-8: 64px;

    /* Mobile */
    @media (width < 428) {
        --gutter: 8px;
        --column: 2;

        --space-05: 3px;
        --space-1: 6px;
        --space-2: 12px;
        --space-3: 18px;
        --space-4: 24px;
        --space-8: 48px;
    }
    @media (width >= 768) {
        --gutter: 24px;
        --column: 8;
    }
    @media (width >= 1024) {
        --gutter: 32px;
        --column: 12;
    }
}

:root {
    /* Font familly */
    --font-family-heading: Roboto, sans-serif;
    --font-family-body: Roboto, sans-serif;

    /* Font Weight */
    --font-weight-strong: 700;
    --font-weight-normal: 400;

    /* Font Size */
    --font-size-display: 40px;
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body: 16px;
    --font-size-small: 14px;

    /* Line Height */
    --line-height-display: 48px;
    --line-height-h1: 44px;
    --line-height-h2: 36px;
    --line-height-h3: 32px;
    --line-height-h4: 28px;
    --line-height-body: 24px;
    --line-height-small: 20px;

    /* Mobile */
    @media (width < 428) {
        /* Mobile-XS */
    }

    @media (width >= 768) {
        --font-size-display: 56px;
        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --line-height-display: 64px;
        --line-height-h1: 48px;
        --line-height-h2: 40px;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    background: #20BDCA;
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    line-height: var(--line-height-body);
}

.hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    padding-inline: calc(var(--gutter) * 2);
    padding-block: calc(var(--gutter) * 4);
    margin: 0 auto;
    text-align: center;
    color: var(--color-white);
    max-width: var(--container-max-width);

    background: var(--color-secondary);
    background: linear-gradient(135deg, #10A8B5 0%, #2ca9b2 50%, #00a6b2 50%, #2ca9b2 100%);
}
.hero a{
    color: #00a6b2;
    background-color: var(--color-white-secondary);
    padding-inline: 2px;
    border-radius: 2px;
    text-decoration: none;
}

.hero-h1 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    color: #FFF;
}

.hero-h2 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: #A9E1E5;
}
.hero-h4 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    color: #A9E1E5;
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: calc(var(--gutter) * 2);
    padding-block: calc(var(--gutter) * 4);
    margin: 0 auto;
    max-width: var(--container-max-width);
    background: var(--color-white);
}
.section a{
    color: #00a6b2;
    background-color: var(--color-white-secondary);
    padding-inline: 2px;
    border-radius: 2px;
    text-decoration: none;
}

a:hover{
    background: transparent;
    color: var(--color-yellow);
    border-bottom: 1px solid var(--color-yellow);
}

b {
    font-weight: var(--font-weight-strong);
}
.nowrap{
    white-space: nowrap;
}

.avatar{
    max-width: 200px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px #94D8DE solid;
}


.stack-reverse {
    display: flex;
    flex-direction: column-reverse;
}
.section-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: var(--content-max-width);
}


.footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    padding-inline: calc(var(--gutter) * 2);
    padding-block: calc(var(--gutter) * 4);
    margin: 0 auto;
    text-align: center;
    color: var(--color-white);
    max-width: var(--container-max-width);

    background: var(--color-secondary);
    background: linear-gradient(135deg, #10A8B5 0%, #2ca9b2 50%, #00a6b2 50%, #2ca9b2 100%);
}

.footer a{
    color: #00a6b2;
    background-color: var(--color-white-secondary);
    padding-inline: 2px;
    border-radius: 2px;
    text-decoration: none;
}