/* general */
 body {
     background-image: url("https://lykaia.neocities.org/images/backgroundlow.png");
     font-size: 18px;
}
/* mobile */
 #draggable {
     display: none;
}
 .about{
     margin: auto;
}
 .sidebar {
     display: none;
}
 .background {
     display: none;
}
 .moonphase {
     display: none;
}
 .roses {
     display: none;
}
 .mushroom {
     display: none;
}
/* Inside of an about */
 .abouticon {
     display: flex;
     justify-content: center;
     width: 100%;
     max-width: 200px;
     max-height: 200px;
     height: fit-content;
}
 .sources{
     display: flex;
     justify-content: center;
}
 .info2 {
     padding-left: 5%;
     padding-right: 5%;
}
 .info{
     padding-left: 10%;
     padding-right: 10%;
}
 .inside {
     margin: auto;
     border: 4px double white;
     width: 70%;
     padding: 20px;
     color: #A37F52;
     background-color: #FAFAFA;
}
 .container {
     display: grid;
     grid-auto-columns: 1fr;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 0px 0px;
     grid-template-areas: "icon" "about";
}
 .icon {
     display: flex;
     justify-content: center;
     grid-area: icon;
}
 a:hover{
     color: #5E4200;
}
 a:link, a:active, a:visited {
     color: #5E4200;
     text-decoration: underline;
}
 hr{
     border: 1px double white;
}
 .roses-image {
     max-width: 200px;
     max-height: 200px;
}
 @media only screen and (min-width: 768px) {
     body {
         font-size: 15px;
    }
     #information{
         display: none;
    }
     #draggable {
         position: absolute;
         right: 10%;
         bottom: 65%;
         z-index: 20;
         display: flex;
         justify-content:center;
         text-align: center;
         height:50px;
         width: 200px;
    }
     .inside {
         margin: 2% 20% 5% 20%;
         max-width: 450px;
    }
     .sidebar {
         display: inline;
         height: 100%;
         width: 180px;
         position: fixed;
         z-index: 1;
         top: 0;
         left: 0;
         background-color: #FAFAFA;
         overflow-x: hidden;
         padding-top: 20px;
         color: #A37F52;
         margin-right: 10px;
         border-right: double 4px;
    }
     .mobile {
         display: none;
    }
     .container {
         display: grid;
         grid-auto-columns: 1fr;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         gap: 10px 10px;
         grid-template-areas: "about icon";
    }
     .about {
         grid-area: about;
    }
     .icon {
         grid-area: icon;
    }
     .roses {
         display: inline;
         position: absolute;
         width: 50%;
         height: 80%;
         left: 19%;
         bottom: -65%;
         z-index: 10;
    }
     .moonphase {
         display: inline;
         position: absolute;
         right: 15%;
         bottom: 5%;
         z-index: 10;
    }
     .background {
         display: inline;
         position: absolute;
         right: 10%;
         bottom: 10%;
         z-index: -10;
    }
     .mushroom {
         display: inline;
         position: absolute;
         right: 5%;
         bottom: 25%;
         z-index: -10;
    }
}