/* Start of the page */
/* Website colors pallet*/

/*
White: #f4f4f4;
Beige: #E2E3E1;
Cream: #fcf8b9;
Lilac: #d8b1ff;
Aqua green: #cbffed;
Pink: #ffbee8;
*/

/* Margin-padding set */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "Wonderland";
    src: url("/assets/fonts/wonderland-font.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
  }

/* Mobile resolution */
@media (max-width: 600px) {
    header {
        height: 6em;
        width: 100%;
    }
}

/* Tablet resolution */
@media (min-width: 601px) and (max-width: 991px) {
    header {
        height: 8em;
        width: 100%;
    }
}

/* PC resolution */
@media (min-width: 992px) {

    :root{
        --header-h: 6em;
        --menu-h: 50px;
    }

    header {
        height: 6em;
        width: 100%;
    }

    /* Classes properties and animations */
    /* Header */
    header{
        width:100%;
        display:flex;
        flex-direction:column;
        padding:0;
        height: auto;
      }
      
      .header-top{
        height: var(--header-h);
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding: 0 24px;      /* tu padding original */
      }
    /* Branch */
    .branch {
        display: block;
        flex: 0 0 auto;
        height: 100%;
        width: 50%;
    }
    .branch a {
        display: block;
        position: relative;
        height: 100%;
        width: 110.38px;
    }
    .branch img {
        display: block;
        position: absolute;
        height: 80%;
        width: auto;
        inset: 0;
        padding: 10% 0 0 5%;
        transition: opacity .5s ease;
    }

    /* Animations */
    .img-hover { opacity: 0;}
    .branch a:hover .img-hover { opacity: 1; transform: scale(1.08); }
    .branch a:hover .img-normal{ opacity: 0; }




    /* Menu */
    .menu {
        width: 100%
    }
    nav.menu {
        background-color: #d8b1ff;
        border: 30px solid #d8b1ff;
        display: flex;
        flex: 0 0 var(--menu-h);
        position: relative;
        height: var(--menu-h);
        width: 100%;
    }
    nav.menu a {
        color: black;
        font-size: larger;
        font-weight: bold;
        text-decoration: none;
        white-space: nowrap;
    }
    nav.menu a, nav.menu a:link, nav.menu a:visited{
        text-decoration: none !important;
        text-decoration-line: none !important;
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        background: transparent !important;
        background-image: none !important;
        background-repeat: no-repeat !important;
        background-size: 0 0 !important;
        outline: none !important;
    }
    .menu li{
        border: 0 !important;
        box-shadow: none !important;
        background-image: none !important;
      }
    .menu ul {
        align-items: center;
        display: flex;
        justify-content: center;
        list-style: none;
        height: 100%;
        width: 100%;
        gap: 10%;
        margin: 0;
        padding: 0;
    }
    .navigation-menu a.active{
        -webkit-text-stroke: 0.8px currentColor;
    }
    .navigation-menu a.active::after{
        content:"";
        position:absolute;
        left:0;
        bottom:-4px;
        width:100%;
        height:2px;
        background:#d8b1ff;
      }

    /* Animations */
    .navigation-menu{ will-change: transform; }
    .navigation-menu:hover{ transform: translateZ(0) scale(1.05); }
  



    /* Finder */
    .finder-div {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        position: relative;
        height: 80%;
        width: 19%;
        padding: 10px;
    }
    .finder-tool {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 70%;
        width: 100%;
        gap: 4px;
        max-width: 320px;
        margin-top: 5px;
    }
    .label-finder {
        border-radius: 10px;
        font-size: 16px;
        transition: width .3s ease, opacity .2s ease, padding .3s ease, border .3s ease;
        outline: none;
        height: 38px;
        width: 0;
        border: 0;
        opacity: 0;
        padding: 0;
    }
    .button-finder {
        align-items: center;
        background: white;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        height: 40px;
        width: 40px;
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .spyglass {
        object-fit: contain;
        filter: invert(1);
        height: 80%;
        width: 80%;
    }

    /* Animations */
    .button-finder:hover { background: linear-gradient(135deg, #ffbee8, #fcf8b9, #cbffed); box-shadow: 0 6px 14px rgba(0,0,0,.3); transform: scale(1.05); }
    .finder-div.active .label-finder { width: clamp(160px, 20vw, 280px); opacity: 1; padding: 0 10px; border: 1px solid #ccc; }




    /* Profile info */
    .icon-box{
        align-items: center;
        display: flex;
        flex: 1;
        justify-content: center;
        position: relative;
      }
    .icons {
        flex: 1;
        object-fit: fill;
        transition: filter .3s ease;
        height: 35%;
        width: 100%;
    }
    .profile-icon-1 {
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        filter: invert(1);
        object-fit: fill;
        height: 100%;
    }
    .profile-icon-2 {
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        object-fit: fill;
        height: 80%;
    }
    .profile-info {
        display: flex;
        height: 100%;
        width: 5%;
    }
    .profile-menu {
        background: white;
        border: 1px black solid;
        border-radius: 10px;
        box-shadow: 0 10px 20px rgba(0,0,0,.15);
        list-style: none;
        min-width: 180px;
        opacity: 0;
        padding: 10px 0;
        pointer-events: none;
        position: absolute;
        top: 75px;
        transform: translateY(10px);
        transition: opacity .2s ease, transform .2s ease;
        z-index: 999;
    }
    .profile-menu a{
        color: black;
        text-decoration: none;
        padding: 3px 10%;
    }

    /* Animations */
    .profile-icon-1:hover { transform: scale(1.05); }
    .profile-icon-2:hover { transform: scale(1.05); }
    .icon-box.active .profile-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .profile-menu a:hover{ background: rgba(0,0,0,.06); }




    /* Body */
    body {
        font-family: "Wonderland", 'Courier New', Courier, monospace;
    }



    /* Carousel */
    .carousel{
        background-color: #d8b1ff;
        display: flex;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        max-width: 100%;
        height: calc(100vh - var(--header-h) - var(--menu-h));
    }
    .carousel__viewport{ 
        overflow: hidden; 
        touch-action: pan-y; 
    }
    .carousel__track{
        display: flex; 
        transition: transform .45s ease;
        will-change: transform;
    }
    .carousel__slide{
        background: #d8b1ff;
        min-width:100%;
    }
    .carousel__slide img{
        display:block;
        object-fit:cover; 
        height:100%; 
        width:100%; 
    }
    .carousel__btn{
        background: rgba(0,0,0,.45); 
        border:0; 
        border-radius:999px;
        color:#fff; 
        cursor:pointer; 
        display:grid; 
        font-size:28px;
        place-items:center;
        position:absolute; 
        transform:translateY(-50%);
        height:88px; 
        width:44px; 
        top:50%; 
    }
    .carousel__btn:hover{ background: rgba(216,117,255,.9); }
    .prev{ left:10px; } 
    .next{ right:10px; }
    .carousel__dots{
        display:flex; 
        gap:28px; 
        justify-content:center;
        position:absolute; 
        bottom:10px;
        left:0; 
        right:0; 
    }
    .carousel__dot {
        background:transparent;
        cursor: pointer;
        display:block;
        overflow:hidden;
        border:0;
        height: 80px;
        width: 30px;
        padding:0;
        line-height:0;
        color: #ccc;
        }
    .carousel__dot[aria-current="true"] {
        transform: scale(1.25);
    }
    .carousel__dot svg{
        width:100%;
        height:100%;
        display:block;
      }

    .b-cream { color:#fcf8b9; }
    .b-lilac { color:#d8b1ff; }
    .b-aqua  { color:#cbffed; }
    .b-white { color:#918f8f; }
    .b-beige { color:#E2E3E1; }
    .b-pink  { color:#ffbee8; }
}