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


body {
    background: url(media/page-background.png);
    /* background-image: url("https://www.transparenttextures.com/patterns/diagmonds-light.png"); */
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    color: #fff;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: white;
}

/* Logo on background of page */
#page-logo {
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 4;
    height: 100px;
}


/* Flip sign that appears on mobile devices */
.flip-sign-mobile {
    position: absolute;
    top: 10px;
    right: 0px;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 5px 15px 5px 20px;
    color: rgb(255, 255, 255);
    font-weight: 200;
    background-color: #1e1e1e;
    border-radius:  5px 0 0 5px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.39);
    
}


/* Flip div */
.flip-div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    /* cursor: url(media/front-card/cursor.svg), auto; */
    background-color: rgba(255, 255, 255, 0);
}










/* Card Styling */

.card {
    height: 30vw;
    width: 55vw;
    position: absolute;
    z-index: 5;
    border-radius: 0px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.397);
    transition: box-shadow .5s ease;
    transform-style: preserve-3d;
    color: white;
}

.card:hover {
    box-shadow: 25px 25px 45px rgba(0, 0, 0, 0.404);
    transition: box-shadow .5s ease;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    transform-origin: center;

}






/* Front of card styling */

.card-front {

    /* If background image */

    /* background-image: url(media/card/background-front.svg);
    background-size: cover; */

    color: black;
    transform-style: preserve-3d;
}

/* The cover over a background image that includes all info. If no background image, use height and width 100% */
.front-cover {
    position: absolute;
    /* background-image: url(media/front-card/background-front.svg);
    background-size: cover; */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #1E4063;
    
}

#uriarteborder {
    position: absolute;
    /* only for uriartelaw */
    border: 1px solid rgb(218, 218, 218);
    border-radius: 3px;
    left: 25px;
    top: 20px;
    height: calc(100% - 40px);
    width: calc(100% - 50px);
}

/* Main logo */
#front-logo {
    position: absolute;
    
    /* positioning */
    bottom: 6%;
    right: 5%;

    /* size */
    height: 18%;
}

/* Secondary text */
#front-text {
    position: absolute;

    /* positioning */
    top: 40%;
    left: 22%;

    /* size */
    height: 22%;
}

/* Qr code */
#front-qr {
    position: absolute;
    cursor: pointer;
    z-index: 1;

    /* positioning */
    top: 12%;
    right: 7.5%;

    /* size */
    height: 14%;

    border-radius: 2%;
    transition: 1s ease-in-out;

}

/* Qr code once clicked */
#front-qr.active {
    transition: 1s ease-in-out;
    height: min(40vh, 65vw);
    box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.445);
}



@media screen and (max-width: 750px) {

    /* Logo on background of page */
    #page-logo {
        right: unset;
        left: 40px;
        height: 80px;
    }

    .card {
        width: 35vh;
        height: 60vh;
    }

    /* .front-cover {
        position: absolute;
        background-image: url(media/front-card/background-mobile.svg);
        background-size: cover;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    } */

    #uriarteborder {
        position: absolute;
        /* only for uriartelaw */
        border: 1px solid rgb(218, 218, 218);
        border-radius: 3px;
        left: 6%;
        top: 4%;
        height: calc(92%);
        width: calc(88%);
    }

    /* Front text */
    #front-text {
        position: absolute;
    
        /* positioning */
        top: 45%;
        left: 14%;
    
        /* size */
        height: 9%;

        /* transform: rotate(-90deg); */
    }

    /* Qr code */
    #front-qr {

        /* positioning */
        top: unset;
        bottom: 7%;
        right: 11%;

        /* size */
        height: 9%;
    }
}