body{
margin:0;
font-family:"Patrick Hand", cursive;

background-image:url("textures/desk.jpeg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}

/* layout */

.desk{
display:flex;
height:100vh;
}

/* photo area */

.photos{
flex:1;
position:relative;
padding:60px;
}

/* polaroids */

.polaroid{
width:170px;
background:white;
padding:10px 10px 35px 10px;
box-shadow:0 10px 20px rgba(0,0,0,.7);
position:absolute;
cursor:pointer;
transition:.2s;
}

.polaroid img{
width:100%;
display:block;
}

.caption{
text-align:center;
margin-top:6px;
font-size:16px;
}

/* scattered layout */

.polaroid:nth-child(1){
top:120px;
left:100px;
transform:rotate(-5deg);
}

.polaroid:nth-child(2){
top:320px;
left:260px;
transform:rotate(4deg);
}

.polaroid:nth-child(3){
top:180px;
left:450px;
transform:rotate(-2deg);
}

.polaroid:nth-child(4){
top:520px;
left:840px;
transform:rotate(-5deg);
}

.polaroid:nth-child(5){
top:380px;
left:660px;
transform:rotate(4deg);
}

.polaroid:nth-child(6){
top:180px;
left:850px;
transform:rotate(-2deg);
}

.polaroid:nth-child(7){
top:480px;
left:1160px;
transform:rotate(-2deg);
}

.polaroid:nth-child(8){
top:180px;
left:1150px;
transform:rotate(4deg);
}

/* hover */

.polaroid:hover{
transform:scale(1.05) rotate(0deg);
z-index:10;
}

/* sidebar */

.sidebar{

width:420px;
height:95vh;

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

padding:1px;
}

#notebook{

width:100%;
height:80%;

background-image:url("textures/notebookpaper.png");
background-size:cover;

padding:60px;
font-size:19px;
line-height:1.7;

position:relative;


}


/* page flip animation */

.flip{
transform:rotateY(15deg);
}

/* lamp glow */

.lamp{
position:absolute;
top:-20px;
right:20px;
width:150px;
height:150px;

background:radial-gradient(
circle,
rgba(255,240,180,.7) 0%,
rgba(255,240,180,0) 70%
);

pointer-events:none;
}

#notebook::before{

content:"";
position:absolute;

left:70px;
top:0;
bottom:0;

width:2px;

opacity:.4;

}

.polaroid::before,
.polaroid::after{

content:"";

position:absolute;

width:60px;
height:20px;

background:rgba(255,255,200,.75);

top:-10px;

box-shadow:0 2px 3px rgba(0,0,0,.2);

}
.polaroid::before{

left:10px;
transform:rotate(-8deg);

}
.polaroid::after{

right:10px;
transform:rotate(6deg);

}
.polaroid:hover{

transform:translateY(-8px) rotate(0deg);
box-shadow:0 18px 28px rgba(0,0,0,.7);

}
.lamp{

position:absolute;

top:20px;
right:60px;

width:220px;
height:220px;

background:radial-gradient(
circle,
rgba(255,240,180,.7) 0%,
rgba(255,240,180,0) 70%
);

pointer-events:none;
}