body {
    background-color: rgb(0, 0, 0);
    transition-duration:1s;
}

@font-face {
    font-family: sans;
    src: url(ppneuebit-bold-webfont.woff);
  }

@font-face {
    font-family: sserif;
    src: url(ppmondwest-regular-webfont.woff);
}

h1{
    font-family: sserif;
    color:white;
    font-size:280%;
}

#wrap {
  
    z-index: 10;
    position:absolute;
    top:20vh;
    left:10vw;
}

#header {
    padding-top: 4vh;
    padding-left: 9vw;
    line-height: 0.5;
    mix-blend-mode:difference;
    z-index: 200;
    transition-duration:1s;
}

#date {
    padding-left:9vw;
    position:relative;
    top: -8vh;
  
    height:10vh;
    line-height: 0.5;
    mix-blend-mode:difference;
    font-size:25vh;
    letter-spacing: 10px;
    font-family: sserif;
    color:white;
    line-height:0.1;
    mix-blend-mode:difference;
    transition-duration:1s;
    
}

#footer {
    font-family:sserif;
    font-size:12vh;
    color:white;
    mix-blend-mode:difference;
    padding-left:9vw;
    padding-top:24vh;
    transition-duration:1s;
}


#date:hover + #calendar{
    color:aqua;
    display:block;
}

#date:hover{
    color:aquamarine;
    transition-duration: 1s;
}

#item {

}


#header:hover + #calendar{
    color:aqua;
    display:block;
}
#calendar{
    top:0vh;
    left: 8vw;
    position:absolute;
    display:none;
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: 1;
    height:100vh;
    width:30vw;
    overflow-y:auto;
    
   
}

#month{
    position:absolute;
    height: 200px;
    width: 35vw;
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr  ;
    gap: 2.5vh;
    z-index: -1;
   
}


#month div {
padding: 1em;
display: grid;
background-color:white;
height:10px;
width:10px;
border-radius: 30px;
}

#picture {
    background-image:url("miumiu.jpg");
    height: 85vh;
    width: 30vw;
    border-radius: 50%;
    z-index: 2;
    right:15%;
    top:8vh;
    position:absolute;
    box-shadow: 0px 0px 20px 20px rgb(255, 255, 255);
    background-size: cover;
    background-position: center;
    margin: auto;
    background-repeat: no-repeat;
    mix-blend-mode: difference;
    filter:blur(10px);
    border-color: white;
    transition-duration:1s;
    
}


#picture:hover + #title {
    display:inline-block;
}

#picture:hover {
    filter:blur(0px);
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

#picture:hover + #title {
    display:block;
}


#itemwrap{
    height: 85vh;
    width: 30vw;
    border-radius: 50%;
    z-index: 2;
    right:18vh;
    top:8vh;
    position:absolute;
    
}
#title {
    z-index: 10;
    padding-left:9vw;
    position:absolute;
    top: 50vh;
    right: 9vw;
    line-height: 0.5;
    font-size:10vh;
    font-family: sserif;
    color:rgb(255, 0, 0);
    line-height:0.0001;
    display:none;
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes fade {
    0% {opacity: 0%;};
    100% {opacity: 100%;}
}