@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body {
  background: url("https://the-duck-pond.neocities.org/background.1.jpg");
  background-attachment: fixed;
  color: #020202;
  font-family: sans-serif;
  font-size: 0.85em;
  }
  
a {
  color: #4a5859;
  }
  
.title {
  font-family: "Fjalla One";
  font-size:1.2em;
  }
  
.wrapper {
  margin-top:30px;
  width: 1200px;
  }
  
/*Changing the size of the gap between boxes.*/
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 15px;
  }
  
.main {
  column-gap: 15px;
  }
  
.main-wrapper {
  margin-left: 215px;
  }
  
.footer {
  margin-bottom: 15px;
  }
  
.links {
  top: 0;
  margin-top:0;
  }
  
.box, .sidebar-image, .sidebar-image img {
  border: 0;
  border-radius: 0.5em;
  background: #ccd5d0;
  }
  
.sidebar .box, .sidebar-image {
  background: #a5beb8;
  border: #798886 1px solid;
  }
  
.box {
  border: #8d9896 1px solid;
  }
  
.inner {
  overflow: hidden;
  }
  
/*Replace special spacer characters with different ones.*/
.links li:before {
  content: "『"
  }
.links li:after, .links .last:after {
  content: "』";
  }
  
/*Slightly increase nav link spacing.*/
.links li {
  margin: 0 0.275em;
  }
  
@media(max-width:1215px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
/*Reapply mobile CSS, since we changed the widths.*/
@media (orientation: portrait), (max-width:800px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
    /*Inside/main text of window boxes.*/
.inner {
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 0px;
  }

/*The title bar at the top of window boxes.*/
.title-bar, .box-title-bar {
  background: #7aa469;
  color: white;
  font-weight: bold;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  }
  
/*The title bar of boxes has slightly more padding, since there's more room to space text.*/
.box-title-bar {
  padding: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  }
  
/*For the symbol in the top right corner.*/
.right {
  float: right;
  margin-right: 5px;
  font-family: "Arial", sans-serif;
  line-height: 12px;
  }
    
    navigation {
  margin-bottom: -2px; /* cover the top border of the main box */
  margin-left: 1rem; /* so the leftmost tab, if selected, doesn't create a weird border gap at the side. */
  }
  
.navigation a {
  color: #edf2ed;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.05rem; /* our padding trick makes buttons weirdly tall, so this helps fix it */
  }
  
.nav-button {
  background: #0b1516;
  padding: 0.35em 1.5em 0em 1.5em;
  border-radius: 15px 3px 0 0;
  display: inline-block;
  text-align: center;
  border-bottom: 4px solid #0b1516;
  }
  
/* For the link to the page you're currently on. */
.navigation .current-page {
  background: #b3dec5;
  color: #123923;
  border: 2px solid #0b1516;
  border-bottom: 4px solid #b3dec5;
  margin-bottom: -2px; /* fiddly trickery to make the 'tab connecting to main' illusion work. */
  padding-top: 6px;
  padding-bottom: 2px;
  border-radius: 15px 3px 5px 5px; /* round bottom corners to minimize visibly janky edges */
  }
  
.nav-button:focus-within {
  outline: 2px solid #00cb72;
  background: #00513e;
  border-bottom-color: #00513e;
  }
  

/* The main content of the page goes in here. */
.main {
  border: 2px solid #0b1516;
  border-radius: 2px 10px 2px 2px;
  overflow: hidden; /*so background doesn't overflow corners*/
  }
  
.main a {
  color: #102323;
  }
    
.main-inner {
  background: #edf2ed;
  color: #123923;
  background: linear-gradient(#b3dec5 0px, #d1f3d1 150px);
  padding: 0.25rem 1.5rem 1rem 1.5rem;
  display: block;
  }
  
/* Prevent large image overflow. */
.main-inner img {
  max-width: 100%;
  height: auto;
  }

/* Rearrange into column format for mobile. */
@media (orientation: portrait), (max-width: 750px) {
  .header {
    padding-bottom: 1px;
    }
   
  .navigation {
   margin: 0;
   }
   
   /* Since the 'tab' look doesn't work in a vertical layout, undo our fiddly padding/border tricks and do something more normal instead. */
  .nav-button {
    font-size: 1.05em;
    text-align: center;
    display: block;
    padding: 0.5rem 1.5rem;
    margin: 0.375rem 0;
    border-radius: 5px;
    }
  
  .navigation .current-page {
    border-bottom: 2px solid #0b1516;
    margin-bottom: 0.375rem;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    }
  
  .main {
    border-radius: 2px; 
    }
  }
  
/* Alternate color scheme for browsers preferring dark mode. 
 * If you change the color scheme and don't care to maintain this,
 * just remove this media query section. */
    
  .footer {
    margin-bottom: 25px;
    }
  
  }