/* Reset default browser padding/margin */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: sans-serif;
  background-image: url(immaginiprova/guestbook/bookclubbg1.gif);
  cursor: url(immaginiprova/cursor/cursor.gif), auto;
}

a, button, .clickable {
  cursor: url(immaginiprova/cursor/cursor2.png), pointer;
}

.main-container {
  max-width: 1200px;
  height: 300px;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.bookofthemonth{
    flex: 1;
    
}

.bookofthemonth img{
    flex: 1;
    width: 400px;
    margin-top: 15px;
}

.bookofthemonthtitle{
    position: absolute;
    width: 200px;
    left: 120px;
    top: 110px;
    transform: rotate(-10deg);
}

.selectedbook{
    position: absolute;
    width: 170px;
    border: double 2px #f8ff5d;
    left: 270px;
    top: 280px;
}

.bookofthemonth-p{
    position: absolute;
    max-width: 130px;
    left: 120px;
    top: 300px;
}

.p{
    color: #f8ff5d;
    font-size: xx-large;
    font-family: 'times new roman', serif;
    text-shadow:  2px 2px 0 #fdbb3e;
    background-color: #e0ffe7;
    padding: 10px;
    border: double 2px #f8ff5d;
}


.washi3{
    position: absolute;
    width: 150px;
    left: 280px;
    top: 255px;
}

.chatbox{
    flex: 2;
    background-image: url(immaginiprova/guestbook/35-2.gif);
    margin: 50px;
}

.chatbox img{
    flex: 2;
    width: 300px;
    position: relative;
    margin: 40px;
}

.thoughts-p{
    position: absolute;
    max-width: 200px;
    top: 170px;
    left: 630px;
}

.thoughts-text{
    font-family: 'times new roman', serif;
    font-size: larger;
    overflow-y: scroll;
    max-height: 300px;
    
}

.thoughts-text::-webkit-scrollbar{
    display: none;
}

.washi1{
    position: absolute;
    width: 150px;
    transform: rotate(-15deg);
    top: 490px;
    right: 470px;
}

.washi2{
     position: absolute;
    width: 170px;
    transform: rotate(-20deg);
    top: 100px;
    right: 650px;
}

.text-hover{
  position: absolute;
  transform: translate(-50%, -50%);
  color: #915d23;
  font-family: 'times new roman', cursive, serif;
  background-color: #dcb487;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  left: 430px;
  top: 200px;
}

.text-hover-box:hover .text-hover{
  opacity: 1;
}

.paperheart{
    position: absolute;
    width: 90px;
    left: 340px;
    top: 120px;
transition: ease 0.3 rotate;
}

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