@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@300;400;600&display=swap');



body{

    margin:0;
    min-height:100vh;

    background:
        url("https://electricelegy.neocities.org/santamonicahaven.jpg")
        center center
        / cover
        no-repeat
        scroll;

/* -----------------------------
SMALL CORKBOARD
----------------------------- */

#corkboardSmall{

    position:absolute;

    width:260px;

    left:1440px;   /* adjust */

    top:220px;     /* adjust */

    transform:
        rotate(0deg)
        perspective(800px)
        rotateX(0deg);

    cursor:pointer;

    transition:.35s;

    z-index:20;

}

#corkboardSmall:hover{

    transform:
        rotate(0deg)
    
        rotateX(0deg)
        scale(1.05);

    filter:brightness(1.1);

}


/* -----------------------------
OVERLAY
----------------------------- */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(3px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9999;

}

#overlay.active{

    opacity:1;

    visibility:visible;

}


/* -----------------------------
FULL CORKBOARD
----------------------------- */

#corkboardViewer{

    position:relative;

    transform:scale(.20);

    transition:.35s;

}

#overlay.active #corkboardViewer{

    transform:scale(1);

}

#corkboardLarge{

    width:65vw;

    height:80vh;

    display:float;

    filter:

        drop-shadow(0 0 40px rgba(0,0,0,.65));

}


/* -----------------------------
CLOSE BUTTON
----------------------------- */

#closeBoard{

    position:absolute;

    right:-20px;

    top:-20px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#2d2d2d;

    color:white;

    font-size:22px;

    transition:.2s;

}

#closeBoard:hover{

    background:#555;

}

#corkboardViewer{
    position:relative;
    display:inline-block;
}

.photo{

    position:absolute;

    width:190px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 4px 12px rgba(0,0,0,.45);

}

.aphoto{

    position:absolute;

    width:160px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 4px 12px rgba(0,0,0,.45);

}


.strauss{

    left:120px;
    top:90px;

    transform:rotate(-6deg);

}

.vv{

    left:440px;
    top:150px;

    transform:rotate(5deg);

}


.damsel{

    left:1000px;
    top:180px;

    transform:rotate(-4deg);

}

.lacroix{

    left:690px;
    top:250px;

    transform:rotate(-1deg);

}


.straussnote{

    left:120px;
    top:260px;

    transform:rotate(-6deg);

}

.vvnote{

    left:440px;
    top:330px;

    transform:rotate(5deg);

}


.damselnote{

    left:1000px;
    top:360px;

    transform:rotate(-4deg);

}

.lacroixnote{

    left:690px;
    top:430px;

    transform:rotate(-1deg);

}


.me{

    left:900px;
    top:150px;

    transform:rotate(-1deg);
    perspective: 0.8;

}


/*=============================
DISCMAN ON BED
=============================*/

#discmanSmall{

    position:absolute;

    left:1200px;
    top:700px;

    width:170px;

    cursor:pointer;

    z-index:50;

}

#discmanSmall:hover{

    transform:
        rotate(12deg)
        perspective(800px)
        rotateX(10deg)
        scale(1.08);

    filter:brightness(1.15);

}


/*=============================
OVERLAY
=============================*/

#musicOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(3px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

#musicOverlay.active{

    opacity:1;

    visibility:visible;

}


/*=============================
DISCMAN VIEWER
=============================*/

#musicViewer{

    position:relative;

    transform:scale(.85);

    transition:.35s;

}

#musicOverlay.active #musicViewer{

    transform:scale(1);

}

#discmanLarge{

    max-width:700px;

    display:block;

    filter:drop-shadow(0 0 35px rgba(0,0,0,.6));

}


/*=============================
PLAYER
=============================*/

#musicControls{

    margin-top:20px;

    text-align:center;

}

#musicControls audio{

    width:500px;

}


/*=============================
CLOSE BUTTON
=============================*/

#closeMusic{

    position:absolute;

    top:-18px;

    right:-18px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#2d2d2d;

    color:white;

    cursor:pointer;

    font-size:22px;

}

#closeMusic:hover{

    background:#555;

}

.boardRoom {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* red light around the board */
.boardRoom::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: rgba(120, 0, 0, 0.35);
    filter: blur(45px);
    z-index: -1;
    border-radius: 10px;
}

#corkboardSmall {
    position: relative;
    z-index: 2;
    cursor: pointer;
    filter: drop-shadow(0 0 15px rgba(140, 0, 0, 0.9))
            drop-shadow(0 0 45px rgba(100, 0, 0, 0.6));
}


.portraitLight .aphoto {
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 15px rgba(120,0,0,0.8);
}

#portraitViewer {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#portraitViewer .portraitText {
    width: 1000px;
    min-height: 300px;
    background: #090909;
    border: 2px solid #5c0a0a;
    padding: 30px;
    color: #ddd;
    font-family: "Cormorant Garamond", serif;
    box-shadow:
        0 0 30px rgba(120,0,0,.8),
        inset 0 0 20px rgba(80,0,0,.4);
         font-size: 24px;
    line-height: 1.5;
}

#portraitViewer h2 {
    color: #b00000;
}

#closePortrait {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #900;
    font-size: 30px;
    cursor: pointer;
}


.hall-button {
    display: inline-block;
    margin: 30px;
    padding: 12px 25px;
    position: absolute;
    bottom: 30px;
    left: 40px;
    color: #b00000;
    background: #080808;

    border: 1px solid #5c0a0a;

    font-family: "Cinzel", serif;
    font-size: 18px;
    text-decoration: none;

    box-shadow:
        0 0 15px rgba(100,0,0,.5),
        inset 0 0 10px rgba(100,0,0,.3);

    transition: .3s;
}

.hall-button:hover {
    color: #fff;
    border-color: #b00000;

    box-shadow:
        0 0 25px rgba(180,0,0,.8);
        
      
}