@import url("https://fonts.googleapis.com/css?family=Poppins");

html,
body {
    margin: 0px;
    height: 100vh;
    width: 100%;
    padding: 0;
    overflow: auto;
    position: fixed;
}

.background-tutorial {
    background-color: hsla(0, 0%, 100%, 0);
    width: 100%;
    height: 100%;
    margin: 0px;
    position: absolute;
}

.scanning-overlay {
    margin-top: 0%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 8px;
    padding-left: 8px;
    mask-composite: subtract;
    -webkit-mask-composite: unset;
    width: 80vw;
    height: 80vw;
    display: block;
}

.logo {
    width: 15%;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.logo-refresh {
    margin-top: 15vh;
}

.logo-wonder {
    margin-top: 5vh;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.image {
    display: block;
    margin: 10% auto 37.5px;
}

.paragraph {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0em;
    text-align: center;
    color: #ffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.paragraph-blue {
    font-family: Poppins;
    margin-right: 54px;
    margin-bottom: 30px;
    margin-left: 54px;
    padding-bottom: 0px;
    color: #169baf;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.footer-container {
    position: absolute;
    width: 100%;
    height: 15px;
    bottom: 0px;
    background-image: linear-gradient(90deg, #80378D 0%, #E7206A 32.98%, #F18624 64.53%, #F7E800 97.5%);
}

.camera-permission-denied {
    background-color: hsl(0, 0%, 100%);
    width: 100%;
    height: 100%;
    margin: 0px;
    position: absolute;
    z-index: 99;
    display: none;
}


#example-scanning-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
}

@media (min-aspect-ratio: 1/1) {
    #example-scanning-overlay .inner {
        width: 50vh;
        height: 50vh;
    }
}

@media (max-aspect-ratio: 1/1) {
    #example-scanning-overlay .inner {
        width: 80vw;
        height: 80vw;
    }
}

#example-scanning-overlay .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#example-scanning-overlay.hidden {
    display: none;
}

#example-scanning-overlay img {
    opacity: 0.6;
    width: 90%;
    align-self: center;
    display: block;
}

#example-scanning-overlay .inner .scanline {
    position: absolute;
    width: 85%;
    height: 10px;
    animation: move 2s linear infinite;
}

@keyframes move {

    0%,
    100% {
        top: 5%
    }

    50% {
        top: calc(90% - 5px)
    }
}