:root {

        --spy-access: #000000;
        --spy-dark: #012741;
        --spy-primary: #032843;
        --spy-secondary: #f57c24;
        --spy-bg: #FcFcfa;
        --spy-accent: #1189ca;
        --spy-blue: #1189ca;
        --spy-orange: #f6921e;
        --spy-green: #e4d341;
        --spy-envelope: #d1b48c;
    }

    .spy-bg-orange {
        background-color: var(--spy-orange);
        background-image: url("https://www.slcolibrary.org/file/1442/spy-bg-orange.png");
        background-position: top right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .spy-bg-orange::before {
        content: '';
        background-color: var(--spy-orange);
        height: 100px;
        width: 100%;
        margin-top: -50px;
        display: block;
        transform: rotate(-2deg);
        z-index: -2;
        position: absolute;
    }

    .spy-bg-blue {
        background: var(--spy-blue);
        background-image: url("https://www.slcolibrary.org/spy-camp/images/folder-spy-2.svg");
        background-position: center left;
        background-repeat: no-repeat;
        background-size: 300px;
        z-index: 0;
    }

    .spy-bg-green {
        background: var(--spy-green);
    }

    .spy-accent {
        color: var(--spy-accent);
    }

    .spy-orange {
        color: var(--spy-orange);
    }

    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--spy-orange);
        --bs-btn-border-color: var(--spy-orange);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--spy-orange-hover);
        --bs-btn-hover-border-color: var(--spy-orange-hover);
        --bs-btn-focus-shadow-rgb: 38, 87, 145;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--spy-orange-hover);
        --bs-btn-active-border-color: var(--spy-orange);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--spy-envelope);
        --bs-btn-disabled-border-color: #d1b48c;
    }

    .btn-primary {
        border-radius: 0;
        background-color: var(--spy-dark);
        border: 2px solid var(--spy-dark);
        color: white;
    }

    .btn-primary.disabled {
        color: var(--spy-envelope);
        background-color: transparent;
        border-color: var(--spy-envelope);
    }

    .btn-primary:hover {
        color: black;
        background-color: var(--spy-green);
        border-color: var(--spy-green);
        box-shadow: 0 0 6px 0 var(--spy-dark);
    }

    .decode-link {
        background: #000;
        color: white;
        padding: 1rem;
        text-decoration: none;
        display: inline-block;
    }

    .decode-link:hover {
        color: white;
    }

    .redacted {
        text-decoration: underline rgba(0, 30, 80, 1);
    }

    .card {
        border-radius: 0;
        background: transparent;
        border-color: black;
    }

    .card.spy-card {
        background: var(--spy-bg);
        border-width: 4px;
        border-style: solid;
        border-color: var(--spy-dark);
        position: relative;
    }

    .card.spy-card .card-body {
        background: white;
        position: relative;
        z-index: 2;
    }

    .card.spy-card::before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 20px;
        left: 20px;
        border-radius: inherit;
        background-image: repeating-linear-gradient(45deg,
                var(--spy-dark),
                var(--spy-dark) 2px,
                transparent 2px,
                transparent 6px);
    }


    .eyes-only-stamp {
        border: 2px solid var(--spy-dark);
        color: var(--spy-dark);
        padding: 4px;
        display: flex;
        flex-direction: column;
        text-align: center;
        max-width: 80px;
        margin: 0 auto;
    }

    .eyes-only-stamp p {
        font-size: 16px;
        margin: 0;
        border-top: 1px solid var(--spy-dark);
    }

    .card.spy-card,
    .card.spy-card::before,
    .eyes-only-stamp,
    .eyes-only-stamp p {
        transition: all 500ms ease;
        transition-delay: 1000ms;
    }

    .spy-heading {
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-left: 0;
        border-right: 0;
        color: rgba(0, 0, 0, 0.4);
        text-align: center;
        text-transform: uppercase;
    }

    .top-secret-stamp {
        border: 2px solid rgba(250, 63, 51, 0.4);
        transform: rotate(-4deg);
        color: rgba(250, 63, 51, 0.4);
        padding: 0 2rem;
        text-align: center;
        overflow: hidden;
    }

    .top-secret-stamp span {
        font-size: 1.5rem;
    }

    .classified-doc {
        position: relative;
        margin: 4rem auto;
        z-index: 1;
    }

    .classified-doc .page {
        background: #fffefd;
        box-shadow: 0px 0px 12px -4px black;
        position: relative;
        padding: 2rem;
    }

    @media screen and (min-width: 720px) {
        .classified-doc .page {
            padding: 3rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .classified-doc .page {
            padding: 4rem;
        }
    }

    .classified-doc .page::before,
    .classified-doc .page::after {
        content: "";
        position: absolute;
        bottom: 20px;
        width: 50%;
        height: 20px;
        box-shadow: 0px 9px 10px 8px rgba(0, 0, 0, 0.7);
        z-index: -1;
    }

    .classified-doc .page::before {
        transform: skew(0deg, -3deg);
        left: 20px;
    }

    .classified-doc .page::after {
        transform: skew(0deg, 3deg);
        right: 20px;
    }


    .classified-doc .envelope {
        content: '';
        background: radial-gradient(circle at top, antiquewhite, wheat);
        border-radius: 4px;
        box-shadow: 0px 8px 10px -6px black;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        transform: translateY(1rem);
    }

    .spy-container .logo {
        transform: rotate(5deg);
    }

    @media screen and (min-width: 992px) {
        .spy-container .logo-row {
            transform: rotate(-5deg)
        }
    }

    .spy-container .hero .h-date,
    .spy-container .hero .h-age {
        color: var(--spy-dark);
        padding: 0;
        margin: 0;
    }

    .spy-polaroid {
        background: #f5f5f4;
        padding: 1rem;
        border: 0;
        transform: rotate(-2deg);
        box-shadow: 0px 2px 4px -2px black;
        position: relative;
    }
	.spy-polaroid img.card-top {
    	padding: 2rem;
        box-shadow: inset 0px 0px 8px -4px black;
        }
        
    .spy-polaroid .card-top-container {position: relative;background: #fafafa;}    
    
   .spy-polaroid .card-top-container::before{
    	content: '';
    	position: absolute;
    	background: linear-gradient(180deg, transparent, #ffffff14 10%, #ffffff3d 80%, transparent);
    	width: 100px;
    	height: 100%;
    	top: 0;
    	left: 40%;
    	transform: skew(20deg, 0deg);
	}
    .spy-polaroid .card-top-container::after{
    	content: '';
    	position: absolute;
    	background: linear-gradient(180deg, transparent, #ffffff14 10%, #ffffff3d 80%, transparent);
    	width: 10px;
    	height: 100%;
    	top: 0;
    	left: 20%;
    	transform: skew(20deg, 0deg);
	}

    .paperclip {
        display: block;
        top: 1.5rem;
        left: 1.5rem;
        height: 3rem;
        width: 1.5rem;
        border: 3px groove #DDDDDD;
        border-radius: 0 0 3rem 3rem;
        border-top: none;
        position: absolute;
        -webkit-backface-visibility: hidden;
        z-index: 10;
    }

    .paperclip::before,
    .paperclip::after {
        content: '';
        position: absolute;
        border: 3px groove #DDDDDD;
    }

    .paperclip::before {
        top: -1.5rem;
        left: -3px;
        height: 2rem;
        width: 1rem;
        border-radius: 0 3rem 3rem 0;
        border-top: none;
        border-right: none;
        border-bottom: none;
    }

    .paperclip::after {
        top: -2rem;
        left: -3px;
        height: 0.5rem;
        width: 1rem;
        border-radius: 3rem 3rem 0 0;
        border-bottom: none;
    }



    .spy-view * {
        pointer-events: none;
        z-index: 100;
    }


    .camera-container {
        display: none;
    }

    @media screen and (min-width:720px) {
        .camera-container {
            display: flex;
        }
    }

    .camera-container,
    .camera-container * {
        pointer-events: none;
    }

    .camera-container {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        justify-content: center;
        align-items: center;
    }

    .camera-ui {
        display: grid;
        grid-template-columns: 1fr 17fr 1fr;
        grid-template-rows: 1fr 17fr 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "tl tc tr"
            "ml mc mr"
            "bl bc br";
    }

    .tl {
        grid-area: tl;
    }

    .ml {
        grid-area: ml;
    }

    .bl {
        grid-area: bl;
    }

    .tc {
        grid-area: tc;
    }

    .mc {
        grid-area: mc;
    }

    .bc {
        grid-area: bc;
    }

    .tr {
        grid-area: tr;
    }

    .mr {
        grid-area: mr;
    }

    .br {
        grid-area: br;
    }

    .camera-corner {
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-width: 0 0 0 0;
        width: 5vw;
        height: 5vh;
    }

    .tl,
    .ml,
    .bl {
        left: 0;
    }

    .tr div,
    .mr div,
    .br div {
        justify-self: end;
    }

    .tl .camera-corner {
        border-width: 4px 0 0 4px;
    }

    .tr .camera-corner {
        border-width: 4px 4px 0 0;
    }

    .bl .camera-corner {
        border-width: 0 0 4px 4px;
    }

    .br .camera-corner {
        border-width: 0 4px 4px 0;
    }

    .camera-ui .battery {
        position: absolute;
        top: 2rem;
        right: 2rem;
        width: 40px;
        display: flex;
        align-items: center;
        height: 20px;
    }

    .camera-ui .battery div:first-child {
        width: 10%;
        height: 50%;
        background: rgba(0, 0, 0, 0.5);
    }

    .camera-ui .battery div:nth-child(2) {
        width: 40%;
        height: 100%;
        border: 4px solid rgba(0, 0, 0, 0.5);
    }

    .camera-ui .battery div:nth-child(3) {
        width: 50%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .camera-ui .rec {
        position: absolute;
        color: rgba(255, 255, 255, 0.8);
        font-size: 20px;
        font-weight: 700;
        font-family: sans-serif;
        background: rgba(0, 0, 0, 0.2);
        padding: 10px;
        display: flex;
        align-items: top;
        top: 2rem;
        left: 2rem;
    }

    .camera-ui .rec .text {
        margin: 0;
        padding: 0;
    }

    .camera-ui .rec .dot {
        margin-right: 10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #f15922;
        -webkit-animation: blink 1.25s step-start infinite;
        animation: blink 1.25s step-start infinite;
    }

    @-webkit-keyframes blink {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .camera-ui .exposure {
        border: 2px solid black;
        border-width: 2px 0;
        background-color: none;
        background-image: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.3) 30%);
        background-size: 4px 10px;
        height: 40%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 1rem;
    }

    .camera-ui .range {
        border: 2px solid black;
        border-width: 2px 0;
        position: absolute;
        background-color: none;
        /* For browsers that do not support gradients */
        background-image: linear-gradient(rgba(0, 0, 0, 0.3) 5%, transparent 6%, transparent 94%, rgba(0, 0, 0, 0.3) 95%);
        background-size: 20px 20px;
        height: 40%;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 1rem;
    }

    .camera-ui .range .range2 {
        border: 0;
        background-color: none;
        /* For browsers that do not support gradients */
        background-image: linear-gradient(transparent 0%, transparent 44%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.3) 55%, transparent 56%);
        background-size: 20px 20px;
        width: 50%;
        height: 100%;
    }

    .camera-ui .time {
        position: absolute;
        display: inline-block;
        padding: 0.5rem 1rem;
        background: rgba(0, 0, 0, 0.5);
        left: 50%;
        bottom: 0;
        transform: translateX(-50%)
    }

    .camera-ui .time .timer {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 700;
        font-family: sans-serif;
        font-size: 2rem;
        letter-spacing: 5px;
    }

    .lax {
        position: absolute;
    }

    /* END CAMERA VIEW FINDER */


    .flash {
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0);
        z-index: 1000;
    }

    .flash.snap {
        animation-name: flash-anim;
        animation-duration: 500ms;
    }

    @keyframes flash-anim {
        from {
            background-color: rgba(255, 255, 255, 0.5);
        }

        to {
            background-color: rgba(255, 255, 255, 0)
        }
    }


    /* CAMERA VIEW FINDER */

    .viewfinder {
        pointer-events: none;
        position: fixed;
        z-index: 1000;
    }


    .viewfinder {
        display: block;
        width: 40px;
        height: 40px;
        background: transparent;
        pointer-events: none;
        z-index: 111;
        /*transition: all 50ms ease-out;*/
        animation: moveCursor1 .5s infinite alternate;
    }

    .viewfinder div:before,
    .viewfinder div:after {
        content: "";
        position: absolute;
        width: 24%;
        height: 24%;
        border: solid rgba(0, 0, 0, 0.5);
        border-width: 0px 0px 0px 0px;
        /*filter: blur(0.5px);*/
    }

    .viewfinder div:first-child:before {
        border-width: 2px 0px 0px 2px;
        border-radius: 20% 0 0 0;
    }

    .viewfinder div:first-child:after {
        right: 0px;
        border-width: 2px 2px 0px 0px;
        border-radius: 0 20% 0 0;
    }

    .viewfinder div:last-child:before {
        bottom: 0px;
        border-width: 0px 0px 2px 2px;
        border-radius: 0 0 0 20%;
    }

    .viewfinder div:last-child:after {
        right: 0px;
        bottom: 0px;
        border-width: 0px 2px 2px 0px;
        border-radius: 0 0 20% 0;
    }

    .viewfinder.snap {
        background: transparent;
        animation: moveCursor2 .5s forwards;
    }


    @keyframes moveCursor1 {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(.8);
        }
    }

    @keyframes moveCursor2 {
        0% {
            transform: scale(1);
        }

        20% {
            transform: scale(3);
        }

        100% {
            transform: scale(1);
        }
    }