body {
    background-color: black;
    background-image: url('IMG_7082.jpg');
    background-size: 100%;
/*    background-attachment: fixed;*/

    font-family: 'Oxanium', cursive;
    font-style:italic;

    overflow-x: hidden;
    overflow-y: scroll;
}

.cloud {
    position: fixed; 
    top: 50vh; 
    left: 50vw; 
    width: 80vw; 
    height: 90vh;
    transform: translate(-50%, -50%); 
    z-index: -1;
    filter: opacity(75%) invert(100%);
}

.corner {
    position: fixed;
    width: 60vmax;
    height: 60vmax;
    filter: opacity(80%) hue-rotate(0deg) brightness(0.2) saturate(50%);
}

#tl {
    top: 0%;
    left: 0%;
}

#tr {
    top: 0%;
    right: 0%;
    transform: rotateY(180deg);
}

#bl {
    bottom: 0%;
    left: 0%;
    transform: rotateX(180deg);
}

#br {
    bottom: 0%;
    right: 0%;
    transform: rotateZ(180deg);
}

p, button {
    font-size: 15px;
    border: 1px solid black;
    border-top-left-radius: 30vmin;
    border-bottom-left-radius: 3vmin;
    border-top-right-radius: 3vmin;
    border-bottom-right-radius: 30vmin;
    background-color: lightgrey;
    /* margin: 2vmax; */
    padding-top: 0.4vmin;
    padding-bottom: 0.4vmin;
    padding-left: 2vmin;
    padding-right: 2vmin;
    display: inline-block;
    position: absolute;
    z-index: 1;
}

a {
    text-decoration: none;
}

p:hover, button:hover {
    filter: invert(100%);
}

.socialLinks {
    font-size: 10px !important; 
    color: lightgrey;
    background-color: black !important;
    border-color: lightgray !important;
    padding-left: 1vmin !important;
    padding-right: 1vmin !important;
    padding-top: 0.2vmin !important;
    padding-bottom: 0.2vmin !important;
}

.selButton{
    cursor: pointer;
    width: 40vmax;
    display: none;
    z-index: 6;
}

.dropButton {
    /* margin: 2vmax; */
    cursor: pointer;
    animation: colorShift 5s linear infinite alternate;
    -webkit-animation: colorShift 5s linear infinite alternate;
}

@keyframes colorShift {
    from { background-color: lightgrey; color: black; }
    to { background-color: black; color: lightgrey; }
}

@-webkit-keyframes colorShift {
    from { background-color: lightgrey; color: black; }
    to { background-color: black; color: lightgrey; }
}

iframe {
    border: 0px;
    border-top-left-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 4vmin;
    overflow-y: scroll;
}


/* how much of album,vidoe,and footage container s redundant here ? */

#albumTitlebox {
    position: absolute;
    display: inline-block;
    z-index: 4;
    transform: rotate(-90deg);
}

#albumTitles {
    position: absolute;
}

.albumContainer {
    display: none;
    background-color: black;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 33vmax;
    height: 33vmax;
    z-index: 3;

    border: 1px solid black;
    border-top-left-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 4vmin;
}

#mixTitlebox {
    position: absolute;
    display: inline-block;
    z-index: 4;
    transform: rotate(-90deg);
}

#mixTitles {
    position: absolute;
}

.mixContainer {
    display: none;
    background-color: black;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 33vmax;
    height: 33vmax;
    z-index: 3;

    border: 1px solid black;
    border-top-left-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 4vmin;
}

#videoTitlebox {
    position: absolute;
    display: inline-block;
    z-index: 4;
    transform: rotate(90deg);
}

#videoTitles {
    position: absolute;
}

.videoContainer {
    display: none;
    background-color: black;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 60vw;
    height: 34vw;
    z-index: 3;

    border: 1px solid black;
    border-top-left-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 4vmin;
}

#footageTitlebox {
    position: absolute;
    display: inline-block;
    z-index: 4;
    transform: rotate(90deg);
}

#footageTitles {
    position: absolute;
}

.footageContainer {
    display: none;
    background-color: black;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 60vw;
    height: 34vw;
    z-index: 3;

    border: 1px solid black;
    border-top-left-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 4vmin;
}

#showsTitlebox {
    position: absolute;
    display: inline-block;
    z-index: 4;
}

.showsContainer {
    display: none;
    background-color: black;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 40vw;
    height: 45vw;
    z-index: 3;

    border: 1px solid black;
    border-top-left-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 4vmin;
}

.content {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.closeWindow {
    display: none;
    position: absolute;
    cursor: pointer;
    background-color: fuchsia;
}

.show {
    display: block;
}

.clutter {
    position: absolute;
    background: none;
    border: none;
    z-index: 3;
    width: 5vmax;
}