:root {
  --header-image: url('https://jankaspal.neocities.org/images/ghiblifl.png');
  --body-bg-image: url(https://jankaspal.neocities.org/images/sunset.png);
  --custom-bg-image: url('https://jankaspal.neocities.org/images/jubileesky.png')
  /* colors */
--content: #43256E;
}

body {
  font-family: 'Georgia';
  margin: 0;
  background-color: #08031A;
  /* you can delete the line below if you'd prefer to not use an image */
  background-size: 100% auto;
  background-image: var(--body-bg-image);
  background-repeat: repeat-y;
}


* {
  box-sizing: border-box;
}

#container {
  max-width: 900px; /* this is the width of your layout! */
        /* if you change the above value, scroll to the bottom and change the media query according to the comment! */
  margin: 0 auto; /* this centers the entire page */
}

#container img{
  max-height: 100%;
  max-width: 100%;
  display:block;
  object-fit:contain;
}

/* if you want to remove the underline you can add a line below here that says: text-decoration:none; */
#container a {
  color: #7616ba;
  font-weight: bold; 
  margin:0px;
  padding:4px;
}

#container a:hover{
 color:#9d61f2; 
}

#header {
  width: 100%;
  background-color: #5e4e8c; /* header color here! */
  height: 150px;
  /* this is only for a background image! if you want to put images IN the header, you can add them directly to the <div id="header"></div> element! */
  background-image: var(--header-image);
  background-size: 100%;
}
.headertitle{
  font-family:visitor;
  color:#cc195b;
  text-align:center;
  font-size:40px;
}

#meat p {
  text-indent:40px;
}
#meat a {
  color:#3a1b66;
  text-decoration:none;
}
#meat a:hover {
 color:#7350a6; 
}

#bibliography a{
 font-style:italic; 
}

main {
  background-color:#ede0ff;
  border:1px dashed #1c2f1d;
  flex: 1;
  margin:20px;
  padding: 20px;
  order: 2;
}
main a{
  color: #7616ba;
  text-decoration:none;
}
main a:hover{
  color: #9d61f2
}
main li{
    list-style-type:square;
}

main img{
 object-fit:contain; 
}


main p {
  text-indent: 50px; 
}

container p{
  text-indent:40px
}

footer {
  background-color:  #0c160c; /* background color for footer */
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center; /* this centers the footer text */
}

.box {
  background-color: #35071b;
  border: 1px solid #a52561;
  padding: 8px;
  color:#fce9f0;
  font-family:'FreePixel';
  margin-bottom:10px;
}

.box img{
  max-height: 100%;
  max-width: 100%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  object-fit:contain; 
}

.webbuttons img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}

/* mobile responsivity */
@media only screen and (max-width: 800px) {
#flex {
  flex-wrap: wrap;
}
#jukebox{
  display:none;
}

aside{
 width:100%;
 margin:6px;
 position:static;
}

#leftSidebar li, ul{
  display:inline-block;
  float:none;
  text-align:center;
}

main{
  margin:6px;
}
main ul,li{
  text-align:left;
}
/* the order of the items is adjusted here for responsiveness! since the sidebars would be too small on a mobile device.
feel free to play around with the order!*/
main {
  order: 2;
}
table{
  word-break:break-all;
  font-size:smaller;
  font-family:"FreePixel";
  padding:0px
}