.picture-container{
    width: 100%;
    gap: 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.gallery-media-wrapper{
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.gallery-media-wrapper-button-container{
    width: calc(100% - (10px * 2));
    position: absolute;
    inset: auto auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.gallery-media-wrapper-buttons{
    background: var(--fill-1);
    color: var(--light-grey);
    border-radius:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    height:50px;
    box-shadow: var(--box-shadow);
}
.gallerypic{
    width: 100%;
    height: auto;
}
.galleryvid{
    height: auto;
    width: 100%;
}
footer{
    bottom: 15px;
}
.copyright{
    position: fixed;
    font-size: 9px;
    bottom: 10px;
    font-family: var(--main-font);
    color: white;
    mix-blend-mode: difference;
    background-blend-mode: difference;
}

.gallery-download-button-container{
    bottom: 0;
    padding: 10px;
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.gallery-download-button-container-fade {
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: .5;
    pointer-events: none;
    height: calc(50px + 10px + 10px);
    background: linear-gradient(to top, black, transparent);
}

.gallery-menu-fade {
    position: fixed;
    top: 0;
    opacity: .5;
    width: 100%;
    height: calc(50px + 10px + 10px);
    background: linear-gradient(to bottom, black, transparent);
}

.gallery-download-button {
    width: 100%;
    flex-grow: 1;
}

.gallery-download-button > span {
    min-width: 100%;
    text-align: center;
}

.selectionFrame{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

@keyframes loading {
    0%{
        transform: rotate(0);
        rotate: 0;
    }
    100%{
        transform: rotate(360deg);
        rotate: 360deg;
    }
}
.choiceConfirmation{
    position: fixed;
    bottom: 35px;
    height: 45px;
    background: white;
    border-radius: 100px;
    max-width:100%;
    display:flex;
    align-items: center;
    transition: opacity .2s ease-in-out;
    box-shadow: var(--box-shadow);
    max-width: 500px;
}
.choiceConfirmationText{
    flex-grow: 1;
    color:black;
    padding: 0 20px;
    font-weight: 600;
}
.choiceConfirmationButton{
    border-radius: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    background: limegreen;
    color:white;
    box-shadow: var(--box-shadow);
}
.choiceClearButton{
    border-radius: 100%;
    height: 100%;
    background: lightgrey;
    aspect-ratio: 1/1;
    color:white;
}

.choiceButtonContainer{
    bottom: 0;
    padding: 0 10px 20px 10px;
    display: flex;
    width: 100%;
    gap: 10px;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.choiceButtons{
    width: 45px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    color: white;
    pointer-events: all;
    box-shadow: var(--box-shadow);
}
.choiceButtons[data-state="yes"]{
    background: rgba(255,255,255,.1);
    border:4px solid white;
    backdrop-filter: blur(2px);
}
.choiceButtons[data-state="no"]{background-color: limegreen;}

[data-selected='yes']{
    border: 10px solid limegreen;
}
[data-selected='maybe']{
    border: 10px solid orange;
}

.scroll-down-prompt{
    position: fixed;
    bottom:0;
    width:100%;
    height:100%;
    pointer-events:none;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding-bottom: 50px;
    transition: opacity .2s ease-in-out;
    background: linear-gradient(to bottom, transparent 80%, rgba(0,0,0,.0));
}
.scroll-down-prompt > .icon{
    width: 27px;
    pointer-events:all;
    aspect-ratio:1/1;
    rotate: 90deg;
}
.scroll-down-prompt[data-invisible]{
    opacity:0;
    pointer-events:none;
}
.scroll-down-prompt[data-invisible] > .icon{
    pointer-events:none;
}
.scroll-down-prompt svg{
    height: 100%;
    aspect-ratio:1/1;
    overflow: visible;
}
.scroll-down-prompt path{
    overflow: visible;
    -webkit-filter: drop-shadow(0 0 200px black);
    filter: drop-shadow(0 0 200px black);
}