/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
    cursor: url(cur3.png), auto;
}
    @font-face {
                font-family: Daydream;
                src: url('https://nastasya.neocities.org/DaydreamDEMO.otf');
    }
    @font-face {
                font-family: Coikoro;
                src: url('https://nastasya.neocities.org/Comicoro.ttf');
    }
    @font-face {
                font-family: Minecraft;
                src: url('https://nastasya.neocities.org/Minecraft.ttf');
    }
    @font-face {
                font-family: Minecraft;
                src: url('https://nastasya.neocities.org/MinecraftBold.ttf');
                font-weight: bold;
    }
    @font-face {
                font-family: Minecraft;
                src: url('https://nastasya.neocities.org/MinecraftItalic.ttf');
                font-style: italic;
    }
    @font-face {
                font-family: Minecraft;
                src: url('https://nastasya.neocities.org/MinecraftBoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
    }
         
h1,
h2,
h3 {
    font-family: Coikoro;
    color: white;
    text-align: center;
    font-size:  55px;
   }
p {
   font-family: Minecraft
   color: #91FF00;
   text-align: center;
   font-size:  8px;
  }
body{
background-image:url("space3.gif");
}
#header{
    display: flex;
    min-height: 250px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
#strips{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 1034px;
        margin: auto;
}


#side{
    width: 207px;
    
    gap: 5px;
    
    align-items: center;
    
    margin: 4px;
    padding: 4px;
    text-align: center;
    
}
#main {
  
    gap: 5px;
    
    align-items: center;
  width: 614px;
  text-align: center;
                                                       
}
figure{
  font-family:"Minecraft";
  text-align: center;
  font-size:15px;
  color:#91FF00;
  width:120px
}
figcaption{
           text-align: center;
          }
          

.book {
  width: 135px;
  height: 80px;
  
  background-size: cover;
  position: relative;
  display: inline-block;
  transform: rotate(30deg);
  
}

.closed,.opened{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.opened{
  opacity: 0;
  transition: opasity 0.3s ease;
}
               
.book:hover .closed {
  opacity:0;
  

}               
 
 .book:hover .opened {
  opacity:1;
  filter: drop-shadow(0px 0px 10px #D2DF5D);
  cursor: url(curpl31.png), auto;
}   
               
.shadow{
  cursor: url(curpl31.png), auto;
}
.shadow:hover{
  filter: drop-shadow(0px 0px 20px #62B8FD);
}
.end{
  text-align: center;
  font-family:"Minecraft";
  font-size:8px;
  color: blue
}