body {
    background-color: rgb(20, 20, 20);
    color: #ee0979;
    font-family: "open Sans", Helvetica, sans-serif;
}

.wall {
    height: fit-content;
    position: relative;
}

.hide {
    display: none;
}

#slideShow {
    display: block;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

#gotoPrev {
    width: 20vw;
    height: calc(100vh - 4rem);
    position: absolute;
    top: 2rem;
    left: 0;
    cursor: pointer;
}

#prevIcon {
    position: absolute;
    height: 2rem;
    width: 2rem;
    transform: rotate(-45deg);
    left: 2rem;
    top: 50%;
    border-top: 3px solid white;
    border-left: 3px solid white;
}

#gotoNext {
    width: 20vw;
    height: calc(100vh - 6rem);
    position: absolute;
    top: 4rem;
    right: 0;
    cursor: pointer;
}

#nextIcon {
    position: absolute;
    height: 2rem;
    width: 2rem;
    transform: rotate(45deg);
    right: 2rem;
    top: calc(50% - 1rem);
    border-top: 3px solid white;
    border-right: 3px solid white;
}

#prev,
#next {
    display: none;
}

#current {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
}

#slideShow.slideShowHidden {
    display: none;
}

#slideShow button {
    background-color: rgba(0, 0, 0, 0.1);
    ;
    border: none;
    cursor: pointer;
}

#hideSS {
    color: #EEE;
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.2rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
}

#showInfo {
    position: absolute;
    /* background-color: rgba(0, 0, 0, 0.2); */
    border-radius: 1.5rem;
    top: 0;
    left: 0;
    margin: 1.2rem;
}

#showInfo img {
    height: 1.5rem;
    width: 1.5rem;
}

#slideShow>button:hover {
    background-color: rgba(128, 128, 128, .3);
    border-radius: 50%;
}

#slideshow.ssControls {
    z-index: 100;
}

#ssContainer {
    position: relative;
    pointer-events: none;
}

#infoContainer {
    width: 100%;
    height: 100%;
    top: 0;
    font-size: .9rem;
}

#info.hide {
    display: none;
}

#info {
    border-radius: 0.5rem;
    position: absolute;
    top: 3rem;
    left: 3rem;
    z-index: 90;
    background-color: rgba(30, 30, 30, 0.97);
    color: #ff6a00;
    border: 2px solid #ee0979;
    padding: 1em;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 4px;
    grid-template-areas:
        "caption  caption  caption  caption"
        "rating   create   create   create"
        "camera   lens     lens     lens"
        "fLength  fLength  fDist    fDist"
        "iso      fstop    exp      ecomp"
        "keywords keywords keywords keywords"
        "crop     crop     crop     crop"
        "source   source   source   source"
        "copy     copy     copy     copy";
    place-content: center;

    .creationDate {
        grid-area: create;
    }

    .by {
        grid-area: by;
    }

    .copyright::before {
        content: "\00a9\00a0"
    }

    .copyright {
        grid-area: copy;
        font-size: 0.8em;
    }

    .rating {
        grid-area: rating;
    }

    .camera {
        grid-area: camera;
    }

    .lens {
        grid-area: lens;
    }

    .focalLength {
        grid-area: fLength;
    }

    .focalDistance {
        grid-area: fDist;
    }

    .iso::before {
        content: "ISO ";
    }

    .iso {
        grid-area: iso;
    }

    .fstop::before {
        content: "𝒇";
    }

    .fstop {
        grid-area: fstop;
    }

    .exposure::after {
        content: " sec"
    }

    .exposure {
        grid-area: exp;
    }

    .crop {
        grid-area: crop;
        margin: auto;
    }

    .caption {
        grid-area: caption;
        font-weight: bold;
        font-size: 1.2em;
    }

    .keywords {
        grid-area: keywords;
    }

    .source {
        grid-area: source;
    }

    .source::before {
        content: "Source: ";
    }

    .exposureComp {
        grid-area: eComp;
    }
}