@import url('https://fonts.googleapis.com/css2?family=Rubik+Maze&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&family=Rubik+80s+Fade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

:root {
    /* --main-color: #fc5d3d; */
    --main-color: #efb534;
    --accent-color: #4e4f99;
    --index: calc(1vw + 1vh);
    --text-color: #7a7b83;
}

body {
    font-family: 'Jost', sans-serif;
    user-select: none;
    background: #000;
}

input {
    outline: none;
}
select {
    outline: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Jost', sans-serif;
}

a {
    cursor: pointer;
}

section {
    max-width: 1920px;
    max-height: 1080px;
}

img {
    max-width: 200% !important;
}

.container {
    padding: 0 5%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1920px !important;
}

.logo-wrap{
    transition: all .3s ease-in-out;
    height: fit-content;
}
.logo {
    font-family: 'Rubik Maze', cursive;
    width: 55px;
    height: 55px;
    background: #2d2d2d;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}

/* ---------------- ACCESS PAGE ----------------- */

.guest-card {
    width: calc(var(--index)*8);
    height: calc(var(--index)*11);
    /* width: calc(var(--index)*12);
    height: calc(var(--index)*15); */
}
.guest-logo {
    padding: 5%;
    font-family: 'Rubik Maze', cursive;
    background: #2d2d2d;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: calc(var(--index)*1.8);
    line-height: .8;
}
.guest-logo-title {
    font-size: calc(var(--index)*0.7);
    text-align: start;
}
.guest-logo-text {
    font-size: calc(var(--index)*0.43);
    text-align: start;
}
.guest-user {
    width: calc(var(--index)*2.5);
    color: #919fa2;
}
.card-name {
    font-size: calc(var(--index)*0.5);
}
.visit-date {
    font-size: calc(var(--index)*0.4);
}
.card-access {
    font-size: calc(var(--index)*0.6);
}
.guest {
    font-size: calc(var(--index)*2.1);
    line-height: 1;
    font-weight: 500;
}
.military-text {
    font-family: "Black ops one", sans-serif;
    font-size: calc(var(--index)*5);
    line-height: 1;
}
.close, .open {
    font-weight: 300;
}
.open {
    transform: translate3d(0, 82px, 0) rotate(180deg);
}

.light-indicator {
    animation: indicator 1s infinite ease-in-out;
    background: red;
    opacity: 0;
    box-shadow: 0px 0px 30px rgba(255,0,0,1);
}
.light-indicator.active {
    animation: access .5s forwards ease-in-out;
    background: #00ff00;
    opacity: 0;
    box-shadow: 0px 0px 30px rgb(0, 255, 0);
}
@keyframes indicator {
    50% {
        opacity: 1;
    }
}
@keyframes access {
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .guest-card {
        width: calc(var(--index)*12);
        height: calc(var(--index)*16);
    }
    .guest-logo {
        padding: 5%;
        font-size: calc(var(--index)*2.2);
    }
    .guest-logo-title {
        font-size: calc(var(--index)*1);
    }
    .guest-logo-text {
        font-size: calc(var(--index)*0.62);
    }
    .guest-user {
        width: calc(var(--index)*3);
    }
    .card-name {
        font-size: calc(var(--index)*0.8);
    }
    .visit-date {
        font-size: calc(var(--index)*0.6);
    }
    .card-access {
        font-size: calc(var(--index)*0.8);
    }
    .guest {
        font-size: calc(var(--index)*2.9);
    }
}