/* amatic-sc-regular - latin */
 @font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/amatic-sc-v27-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

* {
    margin: 0px;
    padding: 0px;
}

   #main {
        position: relative;
        /* border: 1px solid blue; */
        width: 100vw;
    }

    #title-lesson-plan {
        border: none;
    }

    #lessons-back-link {
        color: red;
    }


    #play-again {
        position: absolute;
        top: 16vh;
        left: 84vw;
        padding: 10px;
        font-size: 1.4em;
        font-family: 'Amatic SC';
        color: aqua;
        background-color: black;
        border: 1px solid aqua;
        border-radius: 8px;
        transition: transform 1s ease-in-out;
        opacity: 0;
    }

    #play-again:hover {
        transform: scale(1.2)

    }



    #camera-7d-container {
        position: relative;
    }


    #camera-7d-top {
        position: absolute;
        width: 38vw;
        top: 0vh;
        left: 10vw;
        z-index: 1;
       
    }

     #camera-7d-top-blue {
        position: absolute;
        width: 38vw;
        top: 0vh;
        left: 10vw;
        opacity: 0;
        z-index: 2

    }

    #camera-7d-back {
        position: absolute;
        width: 35vw;
        top: 0vh;
        left: 47vw;
        z-index: 3;
    }

    #camera-7d-back-blue {
        position: absolute;
        width:35vw;
        top: 0vh;
        left: 47vw;
        z-index: 4;
        opacity: 0;
    }



    #aperture-graphic {
        position: absolute;
        top: 120vh;
        left: 52vw;
        opacity: 0;
    }

    #shutter-graphic {
        position: absolute;
        top: 110vh;
        left: 14vw;
       
    }

    #functions {
        margin-top: 1600px;
        border: 1px solid aqua;

    }

   #shutter-tip-1 {
        position: absolute;
        top: 17vh;
        left: 22vw;
        opacity: 0;
   }

   #aperture-tip-1 {
        position: absolute;
        top: 28vh;
        left: 85vw;
        opacity: 0;
   }


   .tips {
    font-size: 1.6em;
   }

   #arrow-shutter,
   #arrow-aperture,
   #arrow-aperture-2 {
    opacity: 0;
   }

   #aperture-callout-text {
    position: relative;
    top: 0vh;
    left: 0vw;
   }


   .callout{
        position: relative;
        top: 16vh;
        left: 44vw;
        display: inline-block;
       
        color: aqua;
        font-size: 1.3rem;
        z-index: 99;

        /* move label near the detail */
        transform: translate(var(--x), var(--y));
}

/* the pointer line */
    .callout::after{
        content:"";
        position:absolute;
        top: 3vh;
        left: 3vw;
        width: var(--len);
        height: 2px;
        background: currentColor;
        transform-origin: left center;
        transform: rotate(var(--angle));
        opacity: .8;
        z-index: 199;
        }