/* ==================================
  BASICS
================================== */

:root {
    /* Brand colors */
    --color-green-100: #004C66;
    --color-green-80: #2F99AE;
    --color-green-60: #65CBD7;
    --color-green-30: #ACE4F0;
    --color-green-15: #DAF8FD;
    --color-green-5: #EDF8FB;
    
    /*--color-green-100: #005B4A;
    --color-green-80: #2F8978;
    --color-green-60: #65C2B1;
    --color-green-30: #ACE6DB;
    --color-green-15: #D4F8F1;
    --color-green-5: #EDFCF9;*/
    
    --color-focus: #042A2B;
    --color-errors: #FF0800;
    --color-errors-ele: rgba(255,8,0,0.05);

    /* Fonts */
    --font-sans: "Open Sans",'Helvetica Neue',Helvetica,Arial,sans-serif;
    --font-display: "Lexend Deca",sans-serif;

    /* Page configuration */
    --width-page-max: 1200px;
    --spacing-page-padding: 1.5rem;

    /* Breakpoints */
    --breakpoint-page: 1200px;
    --breakpoint-tablet: 890px;
    --breakpoint-mobile: 520px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    list-style: none;
    outline: 0;
}

html {
    background-color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: 400 1em/100% var(--font-sans);
    font-optical-sizing: auto;
    color: black;
}
html, body {
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.transitions,
a, button, svg, svg path, img,
input, select, textarea,
.content_center, .grow-fx, .page_header {
    transition: all 0.3s ease-out;
}

a {
    color: var(--color-green-100);
    text-decoration: underline;
}
a:hover {
    color: var(--color-green-80);
    text-decoration: none;
}
a:active {
    color: var(--color-green-60);
    text-decoration: none;
}

strong {
    font-weight: 700;
}

button, a {
    cursor: pointer;
}

.grow-fx:active {
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.grow-fx.left:active {
    transform: scale(1.2) rotate(-2deg);
}
.grow-fx.right:active {
    transform: scale(1.2) rotate(2deg);
}

.focus:focus {
    outline: dashed 2px var(--color-focus);
    outline-offset: 2px;
}
.focus-link:focus {
    outline: dashed 2px var(--color-focus);
    outline-offset: 2px;
    border-radius: 0.3rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.content_center {
    margin: 0 auto;
    max-width: var(--width-page-max);
    min-width: 280px;
}
@media (max-width: 1200px) {
    .content_center {
        padding: 0 var(--spacing-page-padding);
        min-width: 260px;
    }
}

.no-wrap {
    display: inline-block;
    white-space: nowrap;
}

.page_main {
    flex: 1;
    transition: all 0.8s ease-out;
    opacity: 1;

    &.hidden_content {
        opacity: 0;
    }
}