body {
    font-family: 'PixelOperator', sans-serif;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
    background-position:center;
    color: #2b2b2b;
    background-image: url('https://casper-valentine.neocities.org/Assets/aboutBackground.png');
    font-size: 18px;
}

@font-face {
    font-family: PixelOperator;
    src: url('https://casper-valentine.neocities.org/Assets/PixelOperator.ttf');
}

@font-face {
    font-family: PixelOperator;
    src: url('https://casper-valentine.neocities.org/Assets/PixelOperator-Bold.ttf');
    font-weight: bold;
}


.layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
  margin: 15px;
  margin-bottom: 0;
  flex-wrap: nowrap;
}

aside {
  display: flex;
  position: sticky;
  top: 50px;
  bottom: 50px;
  width: 25%;
  flex-direction: column;
  align-items: stretch;
  height: fit-content;
}

#leftAside {
  order: 1;
  min-width: 300px;
}

#rightAside {
  order: 3;
  min-height: calc(100vh - 100px);
  min-width: 200px;
}

main {
  display: flex;
  flex-direction: column;
  order: 2;
  position: relative;
  width: 700px;
  top: 0;
  margin: 0;
}

.sidebarTopWrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  height: 400px;
  width: 100%;
}

.navbarBox, .idBox, .blinkieBox, .adoptBox, .box {
  background: #fffce8;
  border-radius: 5px 5px 3px 3px;
  border: 2px solid #0028a1; 
}

.navbarBox {
  vertical-align: top;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

.blinkieBox {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  max-height: 300px;
  margin-top: auto;
}

.adoptBox {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  height: 200px;
  margin-bottom: 15px;
}

.idBox {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  height: 185px;
}

.box {
  margin-bottom: 15px;
}

.navbarBox img, .idBox img, .blinkieBox img, .adoptBox img {
  max-width: 100%;
  height: auto; 
}
  
.sidebarGroup {
  vertical-align: top;
  margin-left: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
  
/*Inside/main text of window boxes.*/
.inner, .boxInner {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  overflow: auto;
}

nav {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  overflow: auto;
  align-items: center;
  display: flex;
  flex-direction: column;
}

nav p {
  margin: 1em 0 1em 0;
  padding: 0;
  font-size: 1.17em;
  font-weight: bold;
  display: block;
}

.inner p {
  margin: 0;
  padding: 0;
}

.boxInner p {
  margin: auto;
  padding: auto;
}

.inner::-webkit-scrollbar {
  width: 18px; 
}

.inner::-webkit-scrollbar-thumb {
  background-color: #d5e8f9; 
  border: 1px solid #ffffff; /*keep same as background color*/
  border-radius: 2px;
  box-shadow: inset 2px 2px 1px #c8d1da, inset -2px -2px 1px #c8d1da;
}

.inner::-webkit-scrollbar-track {
  background-color: #ffffff; /*keep same as background color*/ 
}

/*The title bar at the top of window boxes.*/
.titleBar, .boxTitleBar {
  background: linear-gradient(180deg,rgba(0, 82, 252, 1) 0%, rgba(0, 78, 222, 1) 25%, rgba(0, 73, 209, 1) 50%, rgba(0, 78, 222, 1) 75%, rgba(0, 82, 252, 1) 100%);
  box-shadow: inset -2px -3px 3px #0028a1, inset 1px 0 3px #0028a1, inset 0 3px 3px #1280ff;
  color: white;
  font-weight: bold;
  text-align: left !important;
  align-items: center;
  line-height: 24px;
}

.titleBar {
  padding: 6px 6px 6px 8px;
}
  
/*The title bar of boxes has slightly more padding, since there's more room to space text.*/
.boxTitleBar {
  padding: 7px 7px 7px 9px;
  }
  
/*For the symbol in the top right corner.*/
.right {
  box-sizing: border-box;
  display: flex;
  float: right;
  margin: 0;
  width: 23px;
  height: 23px;
  border-radius: 3px;
  border: 2px solid white;
  background-image: url('https://casper-valentine.neocities.org/Assets/aboutX.png');
  background-size: cover;
  background-position: center;
  image-rendering: smooth;
}

.warning {
  background-color: white;
  padding: 20px;
  text-align: center;
  border: none;
  border-bottom: 1px solid #bec7ce;
  box-shadow: 0 1px 2px #bec7ce93, inset 0 1px 2px #bec7ce93;
  font-size: 19px;
}
  


/* MEDIA QUERY (mobile adjustments) */

@media only screen and (max-width: 800px) {
  .layout {
    flex-wrap: wrap;
    gap: 0;
  }

  aside {
    width: 100%;
    position: static;
    top: 0;
    bottom: 0;
  }

  main {
    order: 1;
    width: 100%;
  }

  #leftAside {
    order: 2;
  }

  #rightAside {
    order: 3;
    min-height: auto;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .sidebarTopWrapper {
    margin-bottom: 0;
  }

}