@font-face {
    font-family: "office";
    src: url("ITC American Typewriter Medium.otf");
    font-display: swap;
}

/* ================= GLOBAL ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"office", serif !important;
}

html,
body{
    min-height:100vh;
    overflow-x:hidden;

    background-image: url("https://media.wifi4office.com/bgpic.png");
}

/* ================= INTRO ================= */

.introduction{

    position:absolute;

    top:25px;
    left:30px;

    padding:14px 28px;

    font-size:clamp(30px,4vw,52px);

    color:#ffffff;

    background:linear-gradient(
        to bottom,
        #5B9BD5 0%,
        #3E7DB5 45%,
        #1F4E79 100%
    );

    border:3px solid #88B6D9;

    border-radius:12px;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.45),
        inset 0 -2px 4px rgba(0,0,0,.18),
        0 6px 15px rgba(0,0,0,.35);

    text-shadow:
        0 1px 2px rgba(0,0,0,.4);

}

/* ================= SEARCH ================= */

#searchbar{

    position:absolute;

    top:clamp(120px,22vh,180px);
    left:clamp(45px,6vw,100px);

    width:min(60vw,700px);

    padding:.9rem 1rem;

    font-size:clamp(16px,2vw,28px);

    color:#2d3439;

    background:linear-gradient(
        to bottom,
        #ffffff 0%,
        #e8edf1 45%,
        #d7dde2 100%
    );

    border:3px solid #b6c1ca;

    border-radius:10px;

    outline:none;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.8),
        inset 0 -2px 3px rgba(0,0,0,.08),
        0 6px 15px rgba(0,0,0,.25);

    transition:all .2s ease;

}
#searchbar:focus{

    border-color:#5B9BD5;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.8),
        0 0 15px rgba(91,155,213,.45),
        0 6px 15px rgba(0,0,0,.25);

}
#searchbar::placeholder{

    color:#6e7882;

    opacity:1;

}
#searchbutton{

    position:absolute;

    top:clamp(212px,33vh,290px);
    left:clamp(45px,6vw,100px);

    width:min(60vw,700px);

    padding:.8rem;

    font-size:clamp(15px,2vw,20px);

    color:#ffffff;

    background:linear-gradient(
        to bottom,
        #5B9BD5 0%,
        #3E7DB5 45%,
        #1F4E79 100%
    );

    border:3px solid #88B6D9;

    border-radius:12px;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.45),
        inset 0 -2px 4px rgba(0,0,0,.18),
        0 6px 15px rgba(0,0,0,.35);

    text-shadow:0 1px 2px rgba(0,0,0,.4);

    cursor:pointer;

    transition:all .2s ease;

}

#searchbutton:hover{

    background:linear-gradient(
        to bottom,
        #6FAFE4 0%,
        #4A89C2 45%,
        #295D8A 100%
    );

    border-color:#A7CAE6;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.55),
        0 0 18px rgba(91,155,213,.55),
        0 8px 18px rgba(0,0,0,.4);

    transform:translateY(-2px);

}

/* ================= CONTACT ================= */

.contacts{

    position:absolute;

    top:clamp(20px,5vh,60px);
    right:clamp(10px,3vw,50px);

    width:min(30vw,550px);

    padding:18px;

    background:linear-gradient(
        to bottom,
        #c7d0d8 0%,
        #adb9c4 45%,
        #8f9eab 100%
    );

    border:3px solid #d8dde1;

    border-radius:12px;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.55),
        inset 0 -2px 4px rgba(0,0,0,.12),
        0 8px 20px rgba(0,0,0,.35);

}

/* ================= INPUTS ================= */

#name,
#email,
#message{

    width:100%;

    padding:10px;

    margin-bottom:10px;

    color:#333;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #e6eaed
    );

    border:2px solid #a5afb8;

    border-radius:6px;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.8),
        inset 0 -1px 2px rgba(0,0,0,.08);

    outline:none;

    transition:.2s;

    font-family:"office";

}
#name:focus,
#email:focus,
#message:focus{

    border-color:#5B9BD5;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.8),
        0 0 10px rgba(91,155,213,.45);

}
#message{

    min-height:100px;

    resize:vertical;

}

/* ================= SEND ================= */

#sendbutton{

    width:100%;

    padding:10px;

    font-size:18px;

    color:#ffffff;

    background:linear-gradient(
        to bottom,
        #5B9BD5 0%,
        #3E7DB5 45%,
        #1F4E79 100%
    );

    border:3px solid #88B6D9;

    border-radius:12px;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.45),
        inset 0 -2px 4px rgba(0,0,0,.18),
        0 6px 15px rgba(0,0,0,.35);

    text-shadow:0 1px 2px rgba(0,0,0,.4);

    cursor:pointer;

    transition:all .2s ease;

}

#sendbutton:hover{

    background:linear-gradient(
        to bottom,
        #6FAFE4 0%,
        #4A89C2 45%,
        #295D8A 100%
    );

    border-color:#A7CAE6;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.55),
        0 0 18px rgba(91,155,213,.55),
        0 8px 18px rgba(0,0,0,.4);

    transform:translateY(-2px);

}

/* ================= SEASON BAR ================= */

.boxes{

    position:fixed;

    left:2vw;
    right:2vw;
    bottom:2vh;

    display:flex;

    gap:18px;

    padding:20px;

    overflow-x:auto;
    overflow-y:hidden;

    background:linear-gradient(
        to bottom,
        #cfd7de 0%,
        #aab5bf 45%,
        #8f9eab 100%
    );

    border:3px solid #d8dde1;

    border-radius:14px;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.45),
        inset 0 -2px 4px rgba(0,0,0,.12),
        0 10px 25px rgba(0,0,0,.4);

}

/* ================= BOX ================= */

.box{

    flex:0 0 auto;

    width:clamp(145px,16vw,195px);

    aspect-ratio:2/3;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #e5eaee
    );

    border:2px solid #cfd6dc;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.55),
        0 6px 15px rgba(0,0,0,.35);

    transition:all .25s ease;

}

.box:hover{

    transform:translateY(-8px);

    border-color:#5B9BD5;

    box-shadow:
        0 0 18px rgba(91,155,213,.45),
        0 10px 28px rgba(0,0,0,.45);

}

/* ================= COVERS ================= */

#s1cover{
    background-image: url("https://media.wifi4office.com/boxart1.png");
}

#s2cover{
    background-image: url("https://media.wifi4office.com/boxart2.png");
}

#s3cover{
    background-image: url("https://media.wifi4office.com/boxart3.png");
}

#s4cover{
    background-image: url("https://media.wifi4office.com/boxart4.png");
}

#s5cover{
    background-image: url("https://media.wifi4office.com/boxart5.png");
}

#s6cover{
    background-image: url("https://media.wifi4office.com/boxart6.png");
}

#s7cover{
    background-image: url("https://media.wifi4office.com/boxart7.png");
}

#s8cover{
    background-image: url("https://media.wifi4office.com/boxart8.png");
}

#s9cover{
    background-image: url("https://media.wifi4office.com/boxart9.png");
}

#s1cover,
#s2cover,
#s3cover,
#s4cover,
#s5cover,
#s6cover,
#s7cover,
#s8cover,
#s9cover{

    width:100%;
    height:100%;

    border:none;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    cursor:pointer;
    border-radius:8px;

    box-shadow:
        inset 0 0 2px rgba(255,255,255,.5);

    transition:.25s;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
    width:12px;
    height:12px;
}

::-webkit-scrollbar-track{

    background:linear-gradient(
        to bottom,
        #c8d1d8,
        #9CAAB8
    );

    border-radius:10px;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.5),
        inset 0 -2px 4px rgba(0,0,0,.15);

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        to bottom,
        #6FAFE4 0%,
        #3E7DB5 45%,
        #1F4E79 100%
    );

    border:2px solid #88B6D9;

    border-radius:10px;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.5),
        0 2px 6px rgba(0,0,0,.25);

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(
        to bottom,
        #88BDEB,
        #4A89C2,
        #295D8A
    );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.6),
        0 0 10px rgba(91,155,213,.5);

}

/* ================= SELECTION ================= */

::selection{

    color:white;

    background:#1F4E79;

}
/* ================= PORTRAIT ================= */
@media (orientation: portrait) {

    body {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .introduction,
    .contacts,
    #searchbar,
    #searchbutton,
    .boxes {
        position: static !important;
    }

    /* FORCE ORDER */
    .introduction {
        order: 1;
    }

    .contacts {
        order: 2;
        inline-size: 100%;
    }

    #searchbar {
        order: 3;
        inline-size: 100%;
    }

    #searchbutton {
        order: 4;
        inline-size: 100%;
    }

    .boxes {
        order: 5;
        inline-size: 100%;
        margin-top: 20px;
    }
}


/* ================= MOBILE LANDSCAPE ONLY ================= */
@media (orientation: landscape) and (max-width: 1024px) {

    /* SEARCH */
    #searchbar {
        top: clamp(90px, 16vh, 130px);
        left: clamp(18px, 3.5vw, 55px);
    }

    #searchbutton {
        top: clamp(150px, 22vh, 200px);
        left: clamp(18px, 3.5vw, 55px);
    }

    /* CONTACT */
    .contacts {
        min-height: unset;

        padding: 6px;

        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    #name,
    #email,
    #message {
        margin-bottom: 4px;
        padding: 4px 6px;
    }

    #message {
        min-height: 60px;
    }

    /* BOXES */
    .boxes {
        position: relative;
        margin-top: 65vh;

        width: calc(100% - 20px); /* keeps it inside viewport */
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 10px;
        border-width: 12px;

        box-sizing: border-box;
    }

    .box {
        flex: 0 0 auto;

        width: clamp(85px, 10vw, 130px); /* slightly narrower */
    }
}