.dm-serif-display-regular {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
}

.dm-serif-display-regular-italic {
    font-family: "DM Serif Display", serif;

    font-weight: 400;
    font-style: italic;
}



html,
body {
    background-color: pink;

}

#homepage {
    /* background-color: rgb(210, 247, 135); */
    background-color: rgb(127, 218, 253);
    background-color: rgb(190, 237, 255);

}

#name {
    position: absolute;
    font-family: "DM Serif Display", serif;
    /* font-family: "Cormorant Garamond", serif; */
    /* font-size: 1.5vw; */
    font-size: 35px;
    letter-spacing: 1.75px;
    /* color: darkblue; */
    color: #082c7c;
    left: 25px;
    top: 8px;
}

#clickpage {
    background-color: rgb(192, 207, 255);
}

#WR_container_wrapper{
    position: absolute;
    right: 25PX;
    bottom: 25px;
    /* width: 50vw; */
    width: 80px;
    height: 80px;
    margin: 0 auto 0 auto;
    z-index: 999;
}

.wr-image {
    width: 80px;
    /* filter: hue-rotate(3.142rad); */
    /* filter: invert(50%) saturate(100%) hue-rotate(-180deg); */
    filter: invert(18%) sepia(50%) saturate(5000%) hue-rotate(585deg) brightness(55%) contrast(99%);
}


#defaultW {
    position: absolute;
    clip-path: polygon (10% 10%, 50% 0%, 50% 100%, 10% 90%, 0% 50%);
}


#defaultR {
    position: absolute;
    clip-path: polygon(50% 0%, 90% 10%, 100% 50%, 90% 90%, 50% 100%);
}


.hoverW {
    opacity: 0;
    filter: invert(18%) sepia(50%) saturate(5000%) hue-rotate(585deg) brightness(55%) contrast(99%);
    width: 80px;
    position: absolute;
    margin: 0 auto;
    pointer-events: none;
}


.hoverR {
    opacity: 0;
    filter: invert(18%) sepia(50%) saturate(5000%) hue-rotate(585deg) brightness(55%) contrast(99%);
    width: 80px;
    position: absolute;
    margin: 0 auto;
    pointer-events: none;
}


#defaultW:hover~.hoverW {
    opacity: 1;
}


#defaultR:hover~.hoverR {
    opacity: 1;
}


#fishpage {
    /* --- diff types of yellow and orange --- */

    /* background-color: rgb(129, 181, 255); */
    /* background-color: rgb(173, 207, 255); */
    /* background-color: rgb(255, 132, 0); */
    /* background-color: rgb(255, 123, 56); */
    /* background-color: rgb(255, 195, 74);
    background-color: rgb(255, 220, 74);
    background-color: rgb(255, 215, 74);
    background-color: rgb(255, 229, 60); */
    /* --- diff types of yellow and orange --- */

    background-color: rgb(255, 223, 60);
}

#backbutton {
    position: fixed;
    z-index: 9999999;
    width: 80px;
    height: 80px;
    left: 23px;
    top: 10px;
    /* background-color: black; */
}

#styledtable {
    margin: 0 auto 0 auto;
    border-spacing: 50px;
}

#styledtable td {
    /* border: 20px solid rgba(203, 10, 10, 0); */
    /* border: 10px solid rgb(203, 10, 10); */
    width: 200px;
    height: 200px;
    text-align: center;
}

.smallimage {
    width: 20vw;
}

/* #blub {
    margin: 0 auto; 
    translate: 50%;
    scale: 1.5;
} */

#whole_wrapper {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 0;

}

.painting {
    /* display: flex;
    justify-content: center;
    align-items: center; 
    position: relative; */
    width: 580px;
    cursor: pointer;
    transition: 1s;
    transition-delay: 5s;
    /* transition-duration: 9s; */
    /* border: 10px solid rgba(0, 0, 0, 0.113);   */
    /* border: 10px solid rgba(202, 37, 163, 0.22);   */
    border: 10px solid rgba(23, 0, 18, 0.155);
}

/* .painting:hover {
    opacity: 0.7;
} */

/* .paintingClicked {
    opacity: 0;
    z-index: 3; 
    margin: 0 auto; 
    justify-content: center;
    align-items: center;
    transform: scale(1.5) translateY(100px);
    pointer-events: none;
} */

/* THIS WORKS !!! */
.painting:active {
    transition-property: width;

    transform: scale(1.40) translateY(90px);
    transition-timing-function: ease-in-out;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    z-index: 1;
}


#painting {
    /* transition-delay: 5s; */
    width: 580px;
    cursor: pointer;
    transition: 0.3s;
    border: 10px solid rgba(23, 0, 18, 0.155);
}




/* --------START OF MODAL--------  */


#painting:hover {
    opacity: 0.7;
}

#paintingUnder:hover {
    opacity: 0.7;
}

/* #myImg:hover {
    opacity: 0.7;
} */

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    background-color: pink;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    background-color: rgb(217, 164, 173);
    /* Black w/ opacity */
}

#modalUnder {
    background-color: darkblue;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    /* width: 80%; */
    width: 870px;
    transform: translateY(-20px);
    max-width: 700px;
}

#insomnia-content {
    margin: auto;
    display: block;
    /* width: 80%; */
    width: 450px;
    transform: translateY(-50px);
    /* transform: scale(1.30) translateY(90px); */
    max-width: 700px;
}


/* Add Animation - Zoom in the Modal */
.modal-content {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        /* transform: scale(1) ; */
        transform: scale(1) translateY(-50px)
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* -------- END OF MODAL-------- */



#insomnia {
    width: 360px;
    /* top: -100px; */
    /* width: 580px; */
    cursor: pointer;
    transition: 0.3s;
    margin: 20 auto;
    border: 10px solid rgba(23, 0, 18, 0.155);

}

#insomnia:hover {
    opacity: 0.7;
}

/* #insomnia:hover { */
/* width: 900px; */
/* transition-property: width;
    transition-duration: 9s;
    transform: scale(1.30) translateY(90px);
    transition-timing-function: ease-out;
    margin: -20 auto;
    justify-content: center;
    align-items: center;
    z-index: 3;
} */

.insideme_wrapper {
    text-align: justify;
    width: 700;
    margin: 0 auto;

}

.insideme_wrapper img {
    display: block;
    margin: 30 auto 15;

}

#insomnia_wrapper img {
    display: block;
    margin: 30 auto 15;

}

#piece_title {
    font-family: "DM Serif Display", serif;

    font-weight: 400;
    /* font-size: 02vw; */
    font-size: 23;
    font-style: italic;
    display: inline-block
}

#page_title {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    /* font-size: 02vw; */
    font-size: 45;
    font-style: italic;
    /* display: inline-block; */
    text-align: center;
    margin: 70 auto;
    color: darkblue;
    text-shadow: 2px 2px 4px rgb(147, 172, 255);
    /* text-shadow:  0px 0px 5px rgba(147, 172, 255, 0.215); */
    /* text-shadow: -1px 0 rgb(147, 172, 255), 0 1px rgb(147, 172, 255), 1px 0 rgb(147, 172, 255), 0 -1px rgb(147, 172, 255); */
    /* text-shadow: 0px 0px 2px black; */

}

#piece_header {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    /* font-size: 01.75vw; */
    font-size: 23;
    font-style: regular;
    width: 650;
    margin: 0 auto;


}

#description {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-style: normal;
    text-align: justify;
    /* font-family: "DM Serif Display", serif;
    font-weight: 400; */
    font-size: 18;
    width: 650;
    margin: 0 auto;

    /* font-style: regular; */
}


/* Create two equal columns that floats next to each other */
.column {
    float: left;
    /* width: 25%; */
    width: 15%;
    padding: 5px;
}

.column img {
    margin-top: 12px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;

}

.row {
    margin: 0 auto;
    /* top: 0; */
    display: flex;
    /* display: absolute; */
    background-color: rgba(147, 172, 255, 0.215);

    justify-content: center;
    /* align-items: center; */
    position: relative;
}

#photo-wrapper {
    position: flex;
    margin: 0 auto;
    /* left: 2.5vw;
    right: 2.5vw; */
    /* background-color: darkblue; */
    /* border-radius: 5px; */
    top: 20px;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* #photo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;

} */

#photo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;

}

#photo-container-wrapper {
    position: absolute;
    left: 0;
    top: 150px;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#fishimage {
    /* width: 200px; */
    width: 20vw;
    opacity: 1;
}


.coquettefish {
    opacity: 0;
    /* width: 200px; */
    width: 20vw;
    /* top: center; */
    left: center;
    translate: -100%;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    pointer-events: none;
    /*
    left: 5px;
    top: 0; */

}

#fishimage:hover~.coquettefish {
    opacity: 1;

}

#flowertile {
    width: 19vw;
    opacity: 1;
}


.fltile_hover {
    opacity: 0;
    /* width: 200px; */
    width: 19vw;
    /* top: center; */
    left: center;
    translate: -100%;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    pointer-events: none;
    /*
    left: 5px;
    top: 0; */

}

#flowertile:hover~.fltile_hover {
    opacity: 1;

}


/* FISH PAGE */

#fishcontainer-wrapper {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#fishcontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}

#fishwrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;


}

#click {
    background-color: rgb(52, 157, 250);
    width: 10vw;
    min-width: 100px;
    height: 07vh;
    min-height: 55px;
    position: relative;
    text-align: center;
    border-radius: 5px;
    border: 7px solid rgb(7, 127, 255);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    font-family: "DM Serif Display", serif;
    /* font-family: "Cormorant Garamond", serif; */
    font-weight: 400;
    font-size: 23;
    font-style: regular;
    color: #ffffff;


    animation: fadeIn;
    animation-duration: 2.5s;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;

    visibility: hidden;

}

#scroll {
    /* background-color: ; */
    width: 10vw;
    min-width: 100px;
    height: 07vh;
    min-height: 55px;
    position: relative;
    text-align: center;
    /* border-radius: 5px;
    border: 7px solid rgb(7, 127, 255); */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    font-family: "DM Serif Display", serif;
    /* font-family: "Cormorant Garamond", serif; */
    font-weight: 400;
    font-size: 23;
    font-style: regular;
    color: rgb(0, 136, 255);


    animation: fadeIn;
    animation-duration: 2.5s;
    animation-delay: 3s;
    animation-fill-mode: forwards;

    visibility: hidden;

}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}



#fishimage_fishpage {
    /* width: 200px; */
    width: 25vw;
    min-width: 200px;
    opacity: 1;
    transform: translateY(-50px);
    /* background-color: black; */
    clip-path: polygon(63% 8%, 90% 8%, 100% 13%, 100% 58%, 84% 88%, 25% 97%,
            -3% 87%, 0% 60%, 21% 34%, 29% 10%, 45% 30%);
}

.blubfish {
    opacity: 0;
    /* width: 200px; */
    width: 25vw;
    min-width: 200px;
    /* top: center; */
    left: center;
    transform: translateY(-50px);
    /* translate: -100%; */
    position: absolute;
    text-align: center;
    margin: 0 auto;
    pointer-events: none;
    /*
    left: 5px;
    top: 0; */

}

#fishimage_fishpage:hover~.blubfish {
    opacity: 1;

}

.bg-image {

    /* position: relative; */
    /* height: 100%; */
    width: 100%;
    background-color: darkblue;


    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-image {
    position: sticky;
    /* top: 100vh; */
    /* position: fixed; */
    top: 0;
    width: 100%;
    background-color: darkblue;
    z-index: 10000;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    animation: fadeIn;
    animation-duration: 2.5s;
    animation-delay: 3.2s;
    animation-fill-mode: forwards;

    visibility: hidden;
}

#undercurrent_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}

#undercurrent_wrapper {
    /* display: flex; */
    /* justify-content: center; */
    align-items: center;
    /* position: relative; */

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    animation: fadeIn;
    animation-duration: 2.5s;
    animation-delay: 3.8s;
    animation-fill-mode: forwards;

    visibility: hidden;
}

.spacer {
    height: 100vh;
}

#blurbspace {
    height: 20vh;
}

.painting_section {
    position: sticky;
    /* left: calc(50vw - 150px); */
    left: 32vw;
    /* top: calc(50vh - 50px); */
    top: 20px;
    width: 500px;
    /* height: 75px; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#paintingUnder {
    /* transition-delay: 5s; */
    width: 500px;
    cursor: pointer;
    transition: 0.3s;
    /* border: 10px solid rgba(23, 0, 18, 0.155); */
}

#undercurrent_blurb {
    position: sticky;
    /* position: relative; */
    top: 20px;
    /* margin: -100 auto; */
    z-index: 100000;
}


#piece_title_Under {
    font-family: "DM Serif Display", serif;
    color: white;
    font-weight: 400;
    /* font-size: 02vw; */
    font-size: 23;
    font-style: italic;
    display: inline-block
}

#piece_header_Under {
    color: white;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    /* font-size: 01.75vw; */
    font-size: 23;
    font-style: regular;
    width: 550;
    margin: 0 auto;


}

#description_Under {
    color: white;
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-style: normal;
    text-align: justify;
    /* font-family: "DM Serif Display", serif;
    font-weight: 400; */
    font-size: 18;
    width: 550;
    margin: 0 auto;

    /* font-style: regular; */
}


/* FISH PAGE END */


#vasecontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */

    width: 50vw;
    /* height: 100vh;
    top: 350px; */
}

#vasewrapper {
    position: relative;
    overflow: visible;
    margin: 0 auto 0 auto;

}

.vase {
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
    /* clip-path: polygon(0% 10%, 30% 25%, 15% 45%, 25% 45%, 0 70%); */
}

#pinkLeftFl {
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
    clip-path: polygon(6% 25%, 10% 20%, 15% 18%, 26% 20%, 27% 23%, 23% 24.5%, 21.5% 30%, 20% 35%,
            17% 40%, 12% 43%, 13% 45%, 15% 47.5%, 17% 48%, 23% 48%, 24% 49%, 19% 50%, 15% 50.5%, 16.5% 53%,
            16.5% 57%, 14% 63%, 11.5% 61.5%, 12% 58%, 11% 56%, 8% 59%, 6.5% 64%, 5% 64%, 3% 61%, 4% 57%, 5% 56%,
            5% 54.5%, 4% 55%, 3% 56%, 1% 58%, 0% 58%, -4% 56%, -2% 45%, 2.5% 40%, 3% 37%, 3% 34%, 5% 31%, 3.5% 29%, 4% 27%);
}

.pinkpurple {
    opacity: 0;
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
    pointer-events: none;

}


#pinkLeftFl:hover~.pinkpurple {
    opacity: 1;
}

#orchid {
    width: 500px;
    position: absolute;
    background-color: black;
    opacity: 0;
    left: 5px;
    top: 0;
    clip-path: polygon(80% 13%, 91% 16%, 91% 20%, 95% 19%, 99% 23%, 95% 29%,
            80% 41%, 65% 40%, 62% 47%, 59% 55%, 56% 55%, 59% 46%, 61% 40%, 53% 35%,
            53% 30%, 59% 24%);
}

.orchidpath {
    opacity: 0;
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
    pointer-events: none;
}

#orchid:hover~.orchidpath {
    opacity: 1;
}

#yellowfl {
    width: 500px;
    position: absolute;
    background-color: black;
    opacity: 0;
    left: 5px;
    top: 0;
    clip-path: polygon(37% 14%, 49% 14%, 47% 25%, 50% 27%, 49% 30%, 44% 34%,
            45% 45%, 44% 48%, 45% 56%, 42% 56%, 39% 47%, 37% 45%, 37% 40%, 40% 37%,
            37% 34%, 33% 31%, 31% 25%, 36% 21%, 34% 17%);
}

.yellowpath {
    opacity: 0;
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
    pointer-events: none;
}

#yellowfl:hover~.yellowpath {
    opacity: 1;
}

#purplefl {
    width: 500px;
    position: absolute;
    background-color: black;
    opacity: 0;
    left: 5px;
    top: 0;
    clip-path: polygon(57% 4%, 62% 5%, 64% 12%, 61% 16%, 67% 12.5%, 72% 14%,
            73% 20%, 66% 22%, 66% 24%, 57% 30%, 56% 34%, 55% 47%, 54% 55%, 54% 56%,
            52% 56%, 52% 49%, 53% 36%, 50% 27%, 44% 24.5%, 43% 20%, 44% 16%, 50% 14%,
            56% 16%, 56% 13%, 52% 12%, 53% 5%);
}

.purplepath {
    opacity: 0;
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
    pointer-events: none;
}

#purplefl:hover~.purplepath {
    opacity: 1;
}


.purpleboarder {
    display: none;
    width: 500px;
    position: absolute;
    left: 5px;
    top: 0;
}

.pinkLeftBorder {
    display: none;
    background-color: rgb(200, 29, 57);
    opacity: 1;
    width: 500px;
    height: 500px;
    clip-path: polygon(6% 25%, 10% 20%, 15% 18%, 26% 20%, 27% 23%, 23% 24.5%, 21.5% 30%, 20% 35%,
            17% 40%, 12% 43%, 13% 45%, 15% 47.5%, 17% 48%, 23% 48%, 24% 49%, 19% 50%, 15% 50.5%, 16.5% 53%,
            16.5% 57%, 14% 63%, 11.5% 61.5%, 12% 58%, 11% 56%, 8% 59%, 6.5% 64%, 5% 64%, 3% 61%, 4% 57%, 5% 56%,
            5% 54.5%, 4% 55%, 3% 56%, 1% 58%, 0% 58%, -4% 56%, -2% 45%, 2.5% 40%, 3% 37%, 3% 34%, 5% 31%, 3.5% 29%, 4% 27%);
    position: absolute;
    left: 25px;
    top: 35px;
}