/* 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   : "onum", "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  : "Ancizar";
    src          : url('fonts/ancizar-serif-latin-400-normal.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

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

    /* Font Settings */
    --font-family : Ancizar, serif;
    --font-size   : clamp(14px, 0.58vi + 11.68px, 32px);
    --font-height : clamp(16px, 0.71vi + 13.16px, 38px);
    --font-weight : 400;

    --font-l : 400 clamp(16px, 0.53vi + 13.33px, 32px)/clamp(18px, 0.47vi + 15.67px, 32px) var(--font-family);
    --font-s : 400 clamp(16px, 0.4vi + 14px, 28px)/clamp(18px, 0.33vi + 16.33px, 28px) var(--font-family);
    
    --font-l : 400 clamp(14px, 0.58vi + 11.68px, 32px)/1.15 var(--font-family);
    --font-s : 400 clamp(14px, 0.58vi + 11.68px, 32px)/1.15 var(--font-family);

    --spacer : 1rlh;


    /* clamp(16px, 0.71vi + 13.16px, 38px) */

    @media (width > 850px) {
        --spacer : 2rlh;
    }

    /* Set the defaults */
    background  : var(--bg);

    font-size   : var(--font-size);
    line-height : var(--font-height);
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    color       : var(--text);
}

html,body {
    width      : 100%;
    height     : 100%;
    height     : 100lvh;
    overflow   : hidden;
    background : var(--secondaryColor);
}

main {
    width           : 100%;
    height          : 100%;
    height          : 100lvh;
    display         : flex;
    justify-content : center;
    align-items     : center;
    background-size: cover;
    background-position: center;
    background-image: var(--deskBackground);
}

@media (orientation : portrait) {
    main {
        background-image: var(--mobileBackground);
    }
}
}/* Global Settings *//* Content Goes Here *//* UI Elements *//* Logo and tagline */
header {
    transform             : translateY(-15%);
    display               : grid;
    grid-template-rows    : auto auto;
    grid-template-columns : 2fr 3fr;
    gap                   : 0.25rlh 0;
    padding               : var(--spacer);
}
header h1 {
    grid-column : 1 / -1;
    grid-row    : 1;
}
header svg {
    height  : 8.5rlh;
    display : block;
}
header div {
    grid-column : 2 / -1;
    grid-row    : 2;
    font        : var(--font-l);
    color       : var(--primaryColor);
    margin-top  : -10%;
}
@media (width < 620px) {
    header {
        width                 : 100%;
        transform             : translateY(-15%);
        display               : grid;
        grid-template-columns : 1fr;
        gap                   : 1rlh;
    }
    header svg {
        height    : unset;
        width     : 100%;
        max-height: 30vh;
    }
    header div {
        grid-column : 1 / -1;
        margin-top  : unset
    }
}
@media (width < 750px) and (height < 400px) {
    header {
        transform: unset;
        gap      : 0.5rlh;
    }

    main {
        align-items: flex-start;
    }

}/* Contacts */
footer {
    position  : absolute;
    bottom    : 0;
    left      : 0;
    width     : 100%;
    max-width : 15rlh;
}
dl {
    font           : var(--font-s);
    color          : var(--primaryColor);
    padding-bottom : min(3rlh,5vh);
}
dt {
    background     : var(--primaryColor);
    color          : var(--secondaryColor);
    text-transform : uppercase;
    padding-left   : var(--spacer);
    width          : 100%;
    margin-bottom  : 0.5rlh;
}
dd {
    display      : flex;
    align-items  : center;
    gap          : 0.5rlh;
    padding-left : var(--spacer);
    padding-top : 0.125rlh; 
}
dd svg {
    width : 0.5em;
}
dd span {
    display                    : inline-block;
    transition-property        : transform;
    transition-timing-function : cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-duration        : .7s;

}
dd:hover span {
    transform : translateX(3rlh);
}/* Reusable Components *//* Content Goes Here */
.img {
    display : block;
    width   : 100%;
}