@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
body{
    background-color:black;
    letter-spacing:1px;
    text-align:left;
    font-size:13px;
    line-height:20px;
    font-family:'Cormorant Garamond', serif;
    margin:0 auto;
    color:white;
}

#whitehouse{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:70vh;
    background-image:url('https://files.catbox.moe/66dwcc.png');
    background-attachment:scroll;
    background-position:center; 
    background-size:cover;
}

#main{
    position:relative;
    width:500px;
    margin:700px auto 200px;
}

.portrait{
    position:absolute;
    height:auto;
    width:auto;
    border:3px white double;
}

.tooltip{
    position:absolute;
    opacity:0;
    transition:opacity 0.2s ease-in-out;
    pointer-events:none;
    background-color:black;
    border-radius:10px;
    border:3px white double;
    z-index:1000;
    padding:4px;
}

.tooltip.visible{
    opacity:1;
}

.stickynote{
    position:absolute;
    width:200px;
    height:200px;
    background-color:yellow;
    box-shadow:4px 4px 4px 3px rgb(0, 0, 0, 20%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Caveat', cursive;
    color:black
}