/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-family  : "Areal";
    src          : url('fonts/ABCArealVariable.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400 700;
    font-display : swap;
}

@font-face {
    font-family  : "Attichetta";
    src          : url('fonts/AttoEtichetta-VariableVF.ttf') format('truetype');
    font-style   : normal;
    font-display : swap;
}

:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : hsl(0,0%,100%);

    /* Font Settings */
    --font-family : Areal, Arial, Helvetica, sans-serif;
    --font-size   : 13px;
    --font-height : 15px;
    --font-weight : 400;

    /* Font Styles */
    --font-small : 450 9px/11px var(--font-family);
    --font-base  : 400 var(--font-size)/var(--font-height) var(--font-family);

    /* Grid Settings */
    --grid-columns : repeat(8,1fr);
    --grid-gap     : 0.5rlh;

    /* Layout Settings */
    --side-space : 1rlh;

    /* Set the defaults */
    font-size   : var(--font-size);
    line-height : var(--font-height);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    background  : var(--background);
    color       : var(--text);

    @media (width > 660px) {
        --grid-columns : repeat(12,1fr);
        --side-space   : 2rlh;
    }

    @media (width > 1900px) {

        --font-size   : 14px;
        --font-height : 16px;

        /* Font Styles */
        --font-small : 450 10px/12px var(--font-family);
    }

    @media (width > 2500px) {

        --font-size   : 15px;
        --font-height : 18px;

        /* Font Styles */
        --font-small : 450 12px/14px var(--font-family);
    }

}

html,body {
    width  : 100vw;
    height : 100dvh;
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
    background  : black;
}

/* We now have a custom class to hide all the texts */
.cmd-h :is(.header,.footer,.home-content-wrapper) {
    opacity : 0;
}
}/* Global Settings *//* Content Goes Here *//* UI Elements *//* Website's Header */
.header {
    position              : fixed;
    inset                 : 0 0 auto;
    padding               : 0.5rlh var(--side-space);
    z-index               : 9999;
    display               : grid;
    grid-template-columns : var(--grid-columns);
    gap                   : var(--grid-gap);
    grid-template-areas   : "logo logo logo . button button button button";
    transition-property   : opacity;
}

/* Main Logo, Uses the fancy variable font */
.header-logo {
    font-family : Attichetta;
    font-size   : 68px;
    line-height : 1;
    font-weight : 700;
    color       : rgba(255,255,255,1);
    grid-area   : logo;
}

/* The Mobile Button toggle */
.header-button {
    grid-area  : button;
    align-self : center;
    text-align : left;
    justify-self: start;
}

/* Big Screen Grid Areas */
@media (width > 660px) {
    .header {
        grid-template-areas : "logo logo logo logo logo logo button button button button button button";
    }
    .header-button {
        display : none;
    }
}
/* Main Content Area */
.home-content-wrapper {
    height              : 100%;
    display             : grid;
    grid-template-rows  : 1fr auto 1fr;
    position            : relative;
    z-index             : 5000;
    font                : var(--font-base);
    transition-property : opacity;
}

.home-content-overlay {
    position            : fixed;
    inset               : 0;
    background          : black;
    z-index             : 10;
    opacity             : .2;
    transition-property : opacity;
    pointer-events      : none;
}

.overlay-is-visible .home-content-overlay {
    opacity : 0;
}

.home-content-container {
    grid-row              : 2;
    padding               : var(--side-space);
    display               : grid;
    grid-template-columns : var(--grid-columns);
    gap                   : 5rlh 0.5rlh;
    grid-template-areas   : "about about about about about about about about"
                            "services services services emails emails emails locations locations";
    align-content         : start;
    align-items           : start;
    z-index               : 20;
}

@media (width > 660px) {
    .home-content-container {
        grid-template-areas : "about about about about about about about about . button button button"
                              "services services services emails emails emails locations locations locations locations locations locations";
    }
}

@media (width > 1200px) {
    .home-content-container { grid-template-areas : "about about about about . button button services services emails emails locations"; }
}


.home-section-title,.home-about-since {
    font          : var(--font-small);
    margin-bottom : 0.09rlh;
}

.home-about-header {
    display               : grid;
    gap                   : var(--grid-gap);
    grid-template-columns : 1fr 1fr;
}

.home-about { grid-area : about; }
.home-button { grid-area : button; }
.home-services { grid-area : services; }
.home-emails { grid-area : emails; }
.home-locations { grid-area : locations; }

.js-home-button {
    appearance : none;
    border     : none;
    font       : var(--font-small);
    cursor     : pointer;
}

.home-emails,.home-locations {
    display : grid;
    gap : 1rlh;
}

@media (width <= 660px) {
    .home-button { display : none }
}

.tabular {
    font-variant-numeric : tabular-nums;
}

/* Homepage Slider */
.home-slider-wrapper {
    height              : 100%;
    position            : fixed;
    inset               : -1px;
    z-index             : 0;
    transition-duration : 500ms;
    transition-property : filter;
    pointer-events      : none;
}

.home-slider {
    width    : 100%;
    height   : 100%;
    position : relative;
}

/* The Overlay */
.home-slider::after {
    position              : fixed;
    inset                 : 0;
    z-index               : 1;
    background            : var(--background);
    opacity               : 0;
    mix-blend-mode        : color-burn;
    transition-duration   : 500ms;
    transition-property   : opacity;
    background-image      : linear-gradient(to right, #865EFF, #5E62FF , #5ED4FF , #5EFFA1 , #AAFF5E , #F1FF5E , #FFCE5E , #FF825E , #FF5E5E , #FF5E9D , #FF5EF7 , #AF5EFF);
    background-repeat     : no-repeat;
    background-size       : 1200% 100%;
    background-position-x : var(--bg-x-position);
    pointer-events        : none;
    content               : "";
    transition-property   : background-position-x;
    transition-duration   : 1s;
}

.home-slider-slide {
    position            : absolute;
    inset               : 0;
    width               : 100%;
    height              : 100%;
    opacity             : 0;
    display             : block;
    transition-property : opacity , filter;
    transition-duration : 1000ms;
    filter              : blur(10px) grayscale(1);
}


.home-slider-slide.is-visible {
    opacity  : 1;
    filter   : blur(0px) grayscale(0);
    position : static;
}

.home-slider-slide-image {
    display         : block;
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : var(--focus);
}

/* The Colored Overlay */
.home-slider-overlay {
    position              : fixed;
    inset                 : 0;
    z-index               : 1;
    background            : var(--background);
    opacity               : 0;
    mix-blend-mode        : color-burn;
    transition-duration   : 500ms;
    transition-property   : opacity;
    background-image      : linear-gradient(to right, #865EFF, #5E62FF , #5ED4FF , #5EFFA1 , #AAFF5E , #F1FF5E , #FFCE5E , #FF825E , #FF5E5E , #FF5E9D , #FF5EF7 , #AF5EFF);
    background-repeat     : no-repeat;
    background-size       : 1200% 100%;
    background-position-x : var(--bg-x-position);
    pointer-events        : none;
    display: none;

}

.overlay-is-visible .home-slider::after {
    opacity : 1;
}

.overlay-is-visible .home-slider-wrapper {
    filter : blur(100px);
}

/* Website's Footer */
.footer {
    position              : fixed;
    inset                 : auto 0 0;
    padding               : 0.5rlh var(--side-space);
    display               : grid;
    grid-template-columns : var(--grid-columns);
    gap                   : var(--grid-gap);
    grid-template-areas   : "copy copy copy sara sara sara andrea andrea";
    z-index               : 9999;
    transition-property   : opacity;
}

.footer-column {
    font : var(--font-small);
}

.footer-column:nth-child(1) { grid-area : copy; }
.footer-column:nth-child(2) { grid-area : sara; }
.footer-column:nth-child(3) { grid-area : andrea; }

@media (width > 660px) {
    .footer {
        grid-template-areas : "copy copy copy copy copy sara sara sara sara andrea andrea andrea";
    }
    .footer br {
        display : none;
    }
}

/* Reusable Components */

/* Nothing to see here */

/* Default Image Styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}