camera-controller .hidden {
    display: none;
}

camera-controller .cam-button {
    width: 10vw;
    height: 10vw;
    filter: brightness(0) invert(1);
}

camera-controller .snap-button {
    border-radius: 100%;
    width: 12vw;
    height: 12vw;
    background: rgba(255, 255, 255, 0.4);
}

camera-controller .snap-button:active {
    transform: scale(0.9);
    transition: all 100ms;
}

.camera-modal .modal-wrapper {
    width: 100%;
    height: 100%;
}

camera-controller video {
    background-color: black;
    width: 100%;
    height: 100%;
}

camera-controller .relative {
    position: relative;
    width: 100%;
    height: 100%;
}

camera-controller .absolute {
    position: absolute;
    bottom: 20px;
}

camera-controller .right100 {
    right: calc(25px + 10vw);
}

camera-controller .right20 {
    right: 20px;
}

camera-controller .left {
    left: 20px;
}

camera-controller .left100 {
    left: calc(25px + 10vw);
}

camera-controller .center {
    left: 50%;
    margin-left: calc(-12vw * 0.5);
}

camera-controller .picture {
    object-fit: contain;
    width: 100%;
    height: 100%;
    background-color: black;
}

camera-controller .footer {
    position: fixed;
    bottom: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: right;
    padding: 20px 0 20px 0;
}

camera-controller .footer ion-icon {
    color: white;
    font-size: 60px;
}

/* @media (orientation: landscape) {
    camera-controller .cam-button {
        width: 80px;
        height: 80px;
    }

    camera-controller .center {
        margin-left: -40px;
    }
} */