body {
    background-image: url(moon2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;

    font-size: 16px;
    color: #f2e9e4;
    font-family: Lato, Roboto, sans-serif;
    margin: 3%;
}
@font-face {
  font-family: "Enchanted Land";
  src: url('Enchanted Land.woff2');
}
header{
    display: flex;
    margin-top: -4%;
    margin-left: -1%;
}

h1 {
    color: #9a8c98;
    text-align: left;
    font-size: 50px;
    font-family: "Enchanted Land","Nova Cut", serif;
  
}
.bare {
    text-decoration: none;
}
a {
    color: #f2e9e4;
}
h2 {
    text-transform: uppercase;
    text-align: center;
    font-family: "Nova Cut", serif;
    
}
h3 {
  font-family: "Nova Cut", serif;
}
/*homepage*/

footer {
    position: fixed;
    bottom: 3%;
    right: 3%;
}
#logo {
    text-align: center;
    font-size: 70px;
    margin: 0 0 1% 0;
}
#construction {
    text-align: center;
    background-color: #d6b245;
    color: black;
    margin: 0 -3%;
    text-transform: uppercase;
    font-weight: bold;
}
/*library*/
.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.grid-article {
    padding: 20px;
    max-width: 500px;
    background-color: #4c5381;
}
/*bedroom*/
#d-container {
    margin-top: 10%;
    display: block;
    position: relative;
    left: calc(50% - 12.5em);
    width: 25em;
    text-align: center;
}
#diary {
    display: flex;
    background-image: url(notebook.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
    width: 25em;
    height: 15em;
}
#diary:hover {
    background-image: url(notebook-open.png)

}
/*article*/
article {
    padding: 20px;
    background-color: #4c5381;
}
article img{
    object-fit: cover;
}