body{
 background-image: url('https://squids.pink/MyPhotos/CurrentWallpaper.webp');
 background-size: cover;
 color: white;
 font-family: "Jacquard 12", "EB Garamond", serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 font-size: 15px;
}

h1{
 font-family: "Jacquard 12";
 color: white;
 font-size: 30px;
 text-align: center;
}

p{
 font-family: "EB Garamond";
}

a{
 font-family: "Jacquard 12";
 color: white;
 font-size: 25px;
 text-decoration: none;
}

a:hover{
 color: #772DA6;
 font-size: 30px;
 font-style: italic;
 text-align: center;
 text-decoration: none;
}

footer{
 position: absolute;
 top: 600px;
 left: 980px;
 color: white;
 font-family: "EB Garamond";
 text-align: center;
}

.main{
 position: absolute;
 top: 200px;
 left: 800px;
 width: 300px;
 height: 400px;
 background-color: rgb(0, 0, 0, 0.5);
 box-sizing: border-box;
 margin-bottom:10px;
 border:3px solid black;
 text-align: center;
 box-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 14px black;
 overflow: auto;
 scrollbar-width: none;
 padding: 10px;
}

.sidebarleft{
 position: absolute;
 top: 200px;
 left: 600px;
 width: 200px;
 height: 400px;
 background-color: rgb(0, 0, 0, 0.5);
 text-align: center;
 box-sizing: border-box;
 margin-bottom:10px;
 border:3px solid black;
 box-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 14px black;
 padding: 5px;
}

.sidebarright{
 position: absolute;
 top: 200px;
 right: 625px;
 width: 200px;
 height: 400px;
 background-color: rgb(0, 0, 0, 0.5);
 box-sizing: border-box;
 margin-bottom:10px;
 border:3px solid black;
 box-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 14px black;
 text-align: center;
}

.mainlonger{
 position: absolute;
 top: 200px;
 left: 700px;
 width: 500px;
 height: 600px;
 background-color: rgb(0, 0, 0, 0.5);
 box-sizing: border-box;
 margin-bottom:10px;
 border:3px solid black;
 box-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 14px black;
 text-align: center;
 padding: 5px;
 overflow: auto;
}

.sidebarleft img{
 width: 65%;
 height: auto;
}

.mushroomimg{
 position: absolute;
 top: 460px;
 right: 500px;
 }


dialog {
  padding: 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Styles the darkened background area */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}