:root {
  --chocolate-brown: #371c07;
  --perfect-pink: #ffcccc;
}

@font-face {
    font-family: "Angelic Peace";
    src: url("font/Angelic\ Peace.otf");
}

@font-face {
    font-family: "Quentin";
    src: url("font/Quentin.otf");
}

body {
    /* background-color: white; */
    color: black;
    font-family: Verdana;
    background-image: url("png/background.png");
    background-size: 100%;
    overflow: hidden;
}

.dress {
    width: 10%;
    position: absolute;
    transform-origin: top;
    transition-duration: 0.5s;
    transition-property: transform;
}

.dress img {
    width: 100%;
    filter: drop-shadow(-1px 1px 6px var(--perfect-pink));
}

.dress:hover {
    transform: rotate(10deg);
}

.info {
    position: absolute;
    left: 58%;
    top: 5%;
    width: 38vw;
    height: 92vh;
    
    opacity: 0%;
    transition-duration: 0.5s;
    transition-property: opacity;
    background-image: url(png/oldpaper.png);
    background-clip: padding-box;
    background-size: cover;
    background-repeat: no-repeat;

    text-align: center;
}

.info .border-inset {
    position: absolute;
    left: -27px;
    top: -27px;
    width: 98%;
    height: 98%;
    border-width: 30px;
    border-style: solid;
    border-image-source: url(png/laceborder.png);
    border-image-slice: 50;
    border-image-repeat: round;
}

.info h2 {
    margin-top: 70vh;
    padding: 0em 0.5em 0em 0.5em; /* only left and right padding */
    font-family: "Angelic Peace";
    color: var(--chocolate-brown);
    filter: drop-shadow(1px 1px 6px var(--perfect-pink));
    font-size: 2em;
    margin-bottom: 0.5em;
}

.info p {
    font-family: "Quentin";
    color: #843927;
    font-size: large;
}

@keyframes slowspin {
    0% {rotate: 0deg;}
    100% {rotate: 360deg;}
}

.cloverframe {
    position: absolute;
    width: 88%;
    left: 6%;
    top: 2%;
    z-index: 0;

    /* TODO: add option to remove animations */
    filter: drop-shadow(1px 1px 6px var(--perfect-pink));
    animation: slowspin 15s linear infinite;

}

.flat {
    position: absolute;
    width: var(--flat-width);
    left: calc((100% - var(--flat-width)) / 2);
    top: var(--flat-pos-y);
    z-index: 1;
}

/* dresses and their info boxes */
#jsk-creamsodamermaid {
    width: 10%;
    left: 36%;
    z-index: 1;
}

#jsk-creamsodamermaid:hover + #jsk-creamsodamermaid-info {
    opacity: 100%;
}

#jsk-lacefrill {
    width: 11%;
    left: 40%;
    z-index: 2;
}

#jsk-lacefrill:hover + #jsk-lacefrill-info {
    opacity: 100%;
}

#jsk-flowergardenteatime {
    left: 44%;
    z-index: 3;
}

#jsk-flowergardenteatime:hover + #jsk-flowergardenteatime-info {
    opacity: 100%;
}

#jsk-labyrinth {
    left: 48%;
    z-index: 4;
}

#jsk-labyrinth:hover + #jsk-labyrinth-info {
    opacity: 100%;
}

#jsk-melchoco {
    left: 44%;
    top: 50%;
    z-index: 4;
    width: 11%
}

#jsk-melchoco:hover + #jsk-melchoco-info {
    opacity: 100%;
}

#jsk-milkychan {
    left: 48%;
    top: 50%;
    z-index: 4;
}

#jsk-milkychan:hover + #jsk-milkychan-info {
    opacity: 100%;
}