/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
@font-face {
    font-family: "Cheesy Cats";
    src: url("/fonts/Cheesy Cats.otf") format("opentype");
}

@font-face {
    font-family: "Happy Selfie"; 
    src: url("/fonts/Happy Selfie.otf") format("opentype");
}

@font-face {
    font-family: "Cabin"; 
    src: url("/fonts/Cabin-Regular.otf") format("opentype");
}

@font-face {
    font-family: "Cabin"; 
    src: url("/fonts/Cabin-Bold.otf") format("opentype");
    font-weight: bold; /* bold */
}

@font-face {
    font-family: "Cabin"; 
    src: url("/fonts/Cabin-Italic.otf") format("opentype");
    font-style: italic; /* italic */
}

@font-face {
    font-family: "Cabin"; 
    src: url("/fonts/Cabin-BoldItalic.otf") format("opentype");
    font-style: italic; /* italic */
    font-weight: bold; /* bold */
}

:root {
  /* font sizing and colors */
  --header-size: ;
  --bigger-size: 20px;
  --font-size: 18px;
  --mobile-size: 0.8em;
  
  /* FONTS. */
  --title-font: 'Cheesy Cats';
  --heading-font: 'Happy Selfie';
  --body-font: 'Cabin', sans-serif;
  
  /* for light theme */
  --bannerlight: indigo;
  --buttonlight: purple;
  --textlight: saddlebrown;
  --containlight: moccasin;
  --borderlight: #f0b39c;
  --backlight: #A765B3;
  --listlight: peru;
  --linklight: crimson;
  --hoverlight: orangered;
  --visitedlight: firebrick;
  --quotelight: maroon;
  --sky: #b672f0;
}

/* the backbone of the site  */  
html {
  background: linear-gradient(to bottom, var(--sky), var(--borderlight)) fixed;
}

body {
  background: url("/images/gentle_bg-50-v3.png") repeat;
  margin: 0;
  background-attachment: fixed;
}

/* #CONTAINER is the rectangle that contains everything but the background! */
/* more specifically it's the purple container */
#container {
  background: var(--backlight);
  font-family: var(--body-font);
  border-width: medium;
  border-color: var(--bannerlight);
  border-style: none solid none solid;
  margin: 0 10%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  }

/* this is more of a border div than anything. blank stuff outside archive or blurbs go here */
#content {
  background: var(--borderlight);
  padding: 0.4rem;
  border-radius: 15px;
  margin: auto;
  width: 75%;
}


@media screen and (max-width: 500px) {
#container {
  margin-left: 0rem;
  margin-right: 0rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  }

#content {
  margin: auto;
  width: 90%;
}
}

@media screen and (min-width: 500px) and (max-width: 1200px) {
  #container {
    margin-left: 3rem;
    margin-right: 3rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  #content {
    margin: auto;
    width: 85%;
}
}


/* elements */
img {
  max-width: 100%;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

blockquote {
  color: var(--quotelight);
  background-color: var(--borderlight);
  border-style: none none none solid;
  border-color: var(--quotelight);
  border-radius: 3px;
  padding: 1rem;
}

@media screen and (max-width: 500px) {
blockquote {
  border-radius: 3px;
  padding: 0.5rem;
}
}

/* header */
.scolizone {
  color: var(--borderlight);
  font-size: 2.7rem;
  font-family: var(--title-font);
}

@media screen and (max-width: 500px) {
.scolizone {
  font-size: 1.5rem;
}
}

/* frontpage stuff */

.frontpage {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
}

@media screen and (max-width: 500px) {
.frontpage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
}

.logo {
  text-align: center;
  background-image: url(/images/scolilogo.gif);
  background-repeat: round no-repeat;
  height: 230px;
}

@media (prefers-reduced-motion) {
.logo {
  text-align: center;
  background-image: url(/images/scolilogo_0006.png);
  background-repeat: round no-repeat;
  height: 230px;
}
}

@media screen and (max-width: 500px) {
 .logo {
  background-size: 125px 125px;
  height: 100px;
} 
}

@media screen and (min-width: 501px) and (max-width: 1200px) {
 .logo {
  background-size: 150px 150px;
  height: 150px;
} 
}

@media (prefers-reduced-motion: no-preference) {
.motion-advisory {
    display: none;
  }
}

.blog-icon {
 width: 15%;
 float: left;
 margin-right: 15px;
 border-radius: 10px;
}

@media screen and (max-width: 500px) {
 .blog-icon {
   display: none;
 }
}

/* text stuff */
h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--textlight);
}

a:link {
  color: var(--linklight);
  }
  
a:visited {
  color: var(--visitedlight);
  }
  
a:hover {
  color: var(--hoverlight);
  }

/* all the containers */
article, .blurb {
  color: var(--textlight);
  background-color: var(--containlight);
  overflow: hidden;
  border-style: solid;
  border-radius: 10px;
  border-color: var(--borderlight);
  border-width: 3px;
  padding: 0.1rem 1.5rem 0.1rem;
  text-align: left;
  overflow-wrap: break-word;
}

article {
 width: auto;
 align-items: center;
}


@media screen and (max-width: 500px) {
article, .blurb {
  border-width: 3px;
  padding: 0rem 1rem 0rem;
}
}

@media screen and (min-width: 1850px) {
article, .blurb {
  font-size: var(--bigger-size);
}
}

article details {
  border-left: 5px solid var(--borderlight);
  padding: 1rem 0.5rem 1rem;
  margin: 5px;
}

article summary {
  color: var(--quotelight);
  background-color: var(--borderlight);
  padding: 0.7rem;
  margin: -15px;
}

article details[open]{
  color: var(--textlight);
  border-left: 5px dashed var(--borderlight);
  border-right: 5px dashed var(--borderlight);
  background-color: var(--containlight);
  border-bottom: 5px dashed var(--borderlight);
}

article details[open] summary {
  margin-bottom: 0px;
}

/* this is how you use the archive */
.archivesearch {
  display: grid;
  grid-template-columns: 2fr 1fr;
}


@media screen and (max-width: 500px) {
.archivesearch {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
}

/* HEADER STYLE */
#header {
  background-color: var(--bannerlight);
  padding: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#header ul {
  list-style-type: none;
  margin: 0px;
  padding: 0rem;
}

#header ul li {
  display: inline-block;
  font-size: 1.25em;
  border-radius: 3px;
  margin: 0px;
}

#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}

#header li a {
  color: var(--borderlight);
  border-radius: 4px;
  padding: 0.5rem;
  text-decoration: none;
}

#header li a:hover {
  color: var(--containlight);
  background-color: var(--buttonlight);
  text-decoration: none;
  transition: 0.5s;
}


@media screen and (max-width: 500px) {
/*HEADER STYLE*/
#header {
  padding: 0.7rem;
  margin-bottom: 1.5rem;
}

#header ul {
  list-style-type: none;
  margin: 0rem;
  padding: 0rem;
}

#header ul li {
  display: inline-block;
  font-size: 1em;
  border-radius: 3px;
  margin: 0px;
}

#header li {
  font-size: 1.2rem;
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-top: 0.2rem;
}

#header li a {
  border-radius: 4px;
  padding: 0.5rem;
  text-decoration: none;
}

#header li a:hover {
  text-decoration: none;
  transition: 0.5s;
}
}

/*POST LIST STYLE*/
#postlistdiv, #recentpostlistdiv {
  font-size: 1.2em;
  margin-bottom: 25px;
}

#postlistdiv a, #recentpostlistdiv a {
  color: var(--textlight);
}

#postlistdiv a:visited, #recentpostlistdiv a:visited {
  color: var(--listlight);
}

#postlistdiv a:hover, #recentpostlistdiv a:hover {
  color: var(--linklight);
}

#postlistdiv ul, #recentpostlistdiv ul {
  list-style-type: none;
  padding: 0.7rem;
  font-weight: bold;
}

.moreposts {
  text-align: right;
  font-size: var(--font-size);
  margin-top: 0.2em;
}

@media screen and (max-width: 500px) {
/*POST LIST STYLE*/
#postlistdiv, #recentpostlistdiv {
  order: 2;
}

#postlistdiv ul, #recentpostlistdiv ul {
  list-style-type: none;
  padding-left: 0px;
  padding-bottom: 10px;
  font-weight: bold;
}

.moreposts {
  font-size: var(mobile-size);
  margin-top: 0.2em;
}
}

/* Tagging style -- doesn't seem to need media size for now */

.post-tags {
  font-size: 1rem;
  list-style-type: none;
  color: var(--quotelight);
  margin: 0px;
  padding: 0rem;
}

.post-tags li {
  display: inline-block;
  font-size: medium;
  font-weight: normal;
  background-color: var(--borderlight);
  border-radius: 3px;
  margin: 0.3em;
  padding-top: 3px;
  padding-right: 7px;
  padding-left: 7px;
  padding-bottom: 3px;
}

.post-tags li a {
  text-decoration: none;
}

#postTags {
  font-size: 1rem;
  padding: 0.7rem;
  margin-bottom: 25px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#postTags ul {
  list-style-type: none;
  color: var(--quotelight);
  margin: 0rem;
  padding: 0rem;
}

#postTags ul li {
  display: inline-block;
  font-size: medium;
  background-color: var(--borderlight);
  border-radius: 3px;
  margin: 0.3em;
  padding-top: 3px;
  padding-right: 7px;
  padding-left: 7px;
  padding-bottom: 3px;
  }
  
#postTags ul li a {
    text-decoration: none;
  }


/* Styling the filter box */
.post-list-filter-box-contents {
  background-color: var(--borderlight);
  padding: 0.7rem;
  border-radius: 7px;
  margin-bottom: 1.5rem;
}


@media screen and (max-width: 500px) {
.post-list-filter-box-contents {
  order: 1;
}
}

.post-list-filter-box-section-title {
  background-color: var(--containlight);
  font-weight: bold;
  border-radius: 3px;
  padding: 0.2rem;
}

.post-list-filter-box-tag-selection ul {
  list-style-type: none;
  margin-top: 0px;
  margin-bottom: 0px;
}

.post-list-filter-box-tag-selection summary {
  font-weight: bold;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  background-color: var(--containlight);
  border-style: solid;
  border-radius: 10px;
  border-color: var(--borderlight);
  border-width: 3px;
  padding: 0.3rem;
  width: 30%;
  margin-left: auto;
}

@media screen and (max-width: 500px) {
  #nextprev {
    width: auto;
    font-size: var(--font-size);
  }
}

@media screen and (min-width: 1850px) {
  #nextprev {
    font-size: var(--bigger-size);
  }
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/

#footer-spacer {
    flex: 1;
}

#footer {
  background-color: var(--bannerlight);
  color: var(--borderlight);
  padding: 0.5rem;
  margin-top: 1rem;
}



/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  max-height: 280px;
  object-fit: contain;
  object-position: bottom;
}

@media screen and (max-width: 500px) {
  .ezgallery.montage img {
    max-height: 100%;
  }
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}



/* FOR IMAGE GALLERY REGARDING WINGMATES */

div.gallery {
  
}

div.gallery:hover {
  
}

div.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  color: var(--textlight);
  padding: 0.5rem;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 25%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 50%;
    margin: 5px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 33%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}