img{
    max-width: 100%;
}

*{
    box-sizing: border-box;
}

@font-face {
  font-family: "header-font";
  src: url("https://files.catbox.moe/gsfrz7.ttf") format("truetype");
}

@font-face {
  font-family: "body-font";
  src: url("https://files.catbox.moe/udfjj8.ttf") format("truetype");
}

@font-face {
  font-family: "journal-font";
  src: url("https://file.garden/ZpLcdh6W1EDmvJ3N/random/ari-w9500.ttf") format("truetype");
}

body{
    background-color: rgb(24, 5, 56);
    text-align: center
}

h1{
    color: orange;
    background-image: linear-gradient(rgb(64, 7, 95), purple);
    border: rgb(168, 4, 168) double 5px;
    text-align: center;
    font-family: "header-font";
    width: 70%;
    margin: auto;
    border-radius: 3px;
    margin-bottom: 30px;
}

p, summary, ul{
    font-family: "body-font", sans-serif, monospace;
    color: rgb(230, 132, 230);
}

details{
    line-height: 30px;
}

::marker{
    color: rgb(230, 138, 19);
}

ul{
    max-width: 80%;
    margin: auto;
    font-family: "journal-font", sans-serif;
}

li{
    color: rgb(193, 62, 226);
    list-style-position: inside;
}

.page-button{
    margin: 25px;
    font-family: "body-font", sans-serif;
}

.page-button a{
    color: rgb(234, 137, 234);
    text-decoration: none;
    background-color: rgb(93, 2, 103);
    padding: 10px;
    border-radius: 8px;
}

.page-button a:hover{
    color: rgb(253, 181, 48);
    border: rgb(179, 5, 179) 2px solid
}