/**
 * Pico's Default Theme
 *
 * Pico's default theme is a bit bare - but that's intentional! The default
 * theme isn't meant for production use, it's actually a template for you to
 * design your own theme around.
 *
 * Pico is a stupidly simple, blazing fast, flat file CMS.
 *
 * @author  Gilbert Pellegrom
 * @author  Daniel Rudolf
 * @link    http://picocms.org
 * @license http://opensource.org/licenses/MIT The MIT License
 * @version 2.1
 */

* {
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0 none;
}

.slide {
    overflow-y: hidden !important;
    -webkit-transition: height .5s ease-in !important;
    transition: height .5s ease-in !important;
}

/*** BASIC LAYOUT ***/

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

#main {
    flex: 1 0 auto;
}

#header,
#footer {
    flex: 0 0 auto;
}

#main {
    padding: 2em 0 1em;
    background-color: #3bb099;
}

.container {
    max-width: 52em;
    padding: 0 0.5em;
    margin: 0 auto;
}

.widescreen .container {
    max-width: 72em;
}

/* very ugly overflow fix, avoid this whenever possible! */
#main .container {
    overflow-x: auto;
}

/*** BASIC LAYOUT: HEADER ***/

#header {
    background: #6d1818;
}

#title,
#logo {
    float: left;
    padding: 3em 3em 3em 0;
}

#title * {
    margin: 0;
    color: #fff;
}

#title p {
    font-style: italic;
}

#logo {
    height: 10.8em;
}

#logo * {
    display: block;
    height: 100%;
}

#logo img {
    min-width: 4.8em;
    background-color: #333333;
    border-radius: 50px;
}

#logo+#title h1 {
    margin: 0.8rem 0;
}

#logo+#title.tagline h1 {
    margin: 0;
}

#nav {
    padding: 3em 0;
    text-align: right;
}

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav ul li {
    display: inline-block;
    margin-left: 1em;
    padding: 0;
    font-weight: bold;
}

#nav a,
#nav-toggle {
    color: #cfb87c;
}

#nav .active a,
#nav a:hover,
#nav-toggle:hover {
    color: #fff;
}

#nav-toggle {
    display: none;
}

/* IE8 + IE9 clearfix */
#header>.container:after {
    content: '';
    display: block;
    clear: both;
}

/*** BASIC LAYOUT: FOOTER ***/

#footer {
    background: #141414;
    color: #C0C0C0;
}

#footer a {
    color: #ddd;
}

#footer a:hover {
    color: #fff;
}

#footer p {
    margin: 0;
    padding: 3em 0;
}

#footer .social {
    float: right;
    padding: 1.5em 0 1.5em 1em;
    font-size: 2rem;
}

/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/

@media (max-width: 767px) {
    #main {
        padding: 2em 0 1em;
    }

    #title,
    #logo {
        padding: 2em 1.5em 2em 0;
    }

    #logo {
        height: 8.8em;
    }

    #nav {
        clear: both;
        padding: 0;
    }

    #nav ul {
        padding-bottom: 1em;
    }

    #nav ul li {
        display: block;
        margin-left: 0;
        text-align: center;
    }

    #nav ul li a {
        display: block;
        padding: 0.5em 0;
    }

    .js #nav-toggle {
        display: block;
        float: right;
        width: 2em;
        margin: 0.6667em 0;
        font-size: 1.5rem;
        line-height: 2em;
        text-align: center;
        cursor: pointer;
    }

    .js #nav-toggle>* {
        vertical-align: middle;
    }

    #footer p {
        padding: 1em 0;
    }

    #footer .social {
        padding: 0.5em 0 0.5em 1em;
    }
}

/*** TYPOGRAPHY ***/

html {
    font-size: 16px;
}

body {
    font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    color: #fff;
}

p,
td,
th,
li,
dd {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

p,
hr,
table,
.table-responsive,
ol,
ul,
dl,
dd,
pre,
blockquote,
fieldset {
    margin-bottom: 1em;
}

a {
    color: #3300ff;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
    transition: color .2s ease-in;
}

a:hover {
    color: pink;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.6em;
    font-weight: bold;
    color: #fff;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
}

img {
    max-width: 100%;
}

hr {
    border: 0.15em solid #f5f5f5;
    border-radius: 0.3em;
    background: #f5f5f5;
}

abbr {
    text-decoration: underline dotted;
}

/*** UTILITIES ***/

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-justify {
    text-align: justify;
}

.image {
    display: block;
    margin: 0 auto;
}

.image.xsmall {
    width: 20%;
}

.image.small {
    width: 40%;
}

.image.large {
    width: 60%;
}

.image.xlarge {
    width: 80%;
}

.image.float-left {
    float: left;
    margin: 1em 2em 1em 0;
}

.image.float-right {
    float: right;
    margin: 1em 0 1em 2em;
}

.image img {
    display: block;
    width: 100%;
}

@media (max-width: 767px) {
    .image.xsmall {
        width: 60%;
    }

    .image.small {
        width: 80%;
    }

    .image.large,
    .image.xlarge {
        width: 100%;
    }

    .image.float-left,
    .image.float-right {
        float: none;
        margin: 0 auto;
    }
}

/*** TABLES ***/

table {
    border-spacing: 0;
}

td,
th {
    padding: 0.4em 1em;
    vertical-align: top;
    text-align: center;
}

th {
    font-weight: bold;
    text-align: center;
    background: #f5f5f5;
    color: #333;
}

td,
th {
    border: 1px solid #ccc;
    vertical-align: middle;
}

tr:not(:last-child) td,
tr:not(:last-child) th {
    border-bottom: 0 none;
}

thead tr:last-child th {
    border-bottom: 0 none;
}

td:not(:last-child),
th:not(:last-child) {
    border-right: 0 none;
}

tr:first-child td:first-child,
tr:first-child th:first-child {
    border-top-left-radius: 0.3em;
}

tr:first-child td:last-child,
tr:first-child th:last-child {
    border-top-right-radius: 0.3em;
}

tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.3em;
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.3em;
}

table thead+tbody tr:first-child td {
    border-radius: 0 !important;
}

.table-responsive {
    overflow-x: auto;
}

.table-responsive>table {
    margin-bottom: 0;
}

/*** LISTS ***/

ol,
ul {
    list-style-position: outside;
    padding-left: 1.5em;
}

ol {
    padding-left: 2.5em;
}

li {
    padding-left: 0.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 2em;
}

/*** CODE ***/

code {
    margin: 0 0.1em;
    padding: 0.1em 0.2em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
    font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
    font-size: 0.85rem;
    line-height: 1.9824;
}

pre {
    padding: 0 1em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
}

pre code {
    display: block;
    margin: 0;
    padding: 1.1111em 0;
    border: 0 none;
    background: transparent;
    overflow-x: auto;
    line-height: 1.4;
}

/*** BLOCKQUOTE ***/

blockquote {
    font-style: italic;
    margin-left: 1em;
    padding-left: 1em;
    border-left: 0.5em solid #f5f5f5;
}

/*** FORMS ***/

label,
fieldset legend {
    font-weight: bold;
}

input:not([type="checkbox"]):not([type="radio"]),
button,
select,
textarea,
fieldset,
fieldset legend {
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #fff;
    -webkit-transition: none .2s ease-in;
    transition: none .2s ease-in;
    -webkit-transition-property: border-color, background, box-shadow;
    transition-property: border-color, background, box-shadow;
}

input:not([type="checkbox"]):not([type="radio"]),
button,
select,
textarea {
    padding: 0.5em 1em;
    outline: 0 none;
    font-size: 1rem;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
button:focus,
select:focus,
textarea:focus {
    border-color: #2EAE9B;
    box-shadow: 0 0 8px #2EAE9B;
}

input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
button:focus,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
    background: #f5f5f5;
    cursor: pointer;
}

input[type=checkbox] {
    transform: scale(1.5);
}

textarea,
select[multiple] {
    vertical-align: bottom;
    overflow: auto;
}

fieldset {
    padding: 1em;
    background: #f5f5f5;
}

fieldset legend {
    padding: 0 0.5em;
}

fieldset label,
fieldset input,
fieldset button,
fieldset select,
fieldset textarea {
    margin: 0.2em 0.5em;
}

fieldset label:first-child,
fieldset input:first-child,
fieldset button:first-child,
fieldset select:first-child,
fieldset textarea:first-child {
    margin-left: 0;
}

fieldset label:last-child,
fieldset input:last-child,
fieldset button:last-child,
fieldset select:last-child,
fieldset textarea:last-child {
    margin-right: 0;
}

/* Firefox input size fix */
input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*** Gallery ***/
.bookshowcase {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    text-align: center;
}

.book-title {
    margin: 1.3em 0 -0.4em 0;
    color: #000000;
    font-family: monospace;
    padding: 5px;
    background-color: #f0f8ff;
    width: fit-content;
    border-radius: 5px;
}

.gallery {
    margin-top: 6em;
    width: 100%;
    max-width: 350px;
    text-align: -webkit-center
}

.gallery a {
    color: #d40039;
    display: inline-block;
    border-radius: 6px;
    background: white;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.gallery a img {
    border: none;
    width: 250px;
    height: auto;
    opacity: 0.93;
    border-radius: 6px;
    margin-bottom: -5px;
}

/* transition definition */
.gallery a,
.gallery a img,
.gallery a::before,
.gallery a::after {
    transition: all 0.12s ease-in;
}

.gallery a:hover,
.gallery a:hover img,
.gallery a:hover::before,
.gallery a:hover:after {
    transition: all 0.25s ease;
}

/* hover definition - skew and shadow */
.gallery a:hover {
    box-shadow: 4px 6px 13px 1px rgba(13, 13, 13, 0.73);
    transform: skew(-2deg, -2deg) scale(0.965, 0.965);
    background: rgb(69, 69, 69);
    color: #00e5ff;
}

.gallery a:hover img {
    opacity: 1;
}

/* gradient overlay imitates a light reflection */
.gallery a::before {
    content: '';
    position: absolute;
    transform: translate(-30%, -30%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: none;
}

.gallery a:hover::before {
    background: linear-gradient(155deg, rgba(191, 252, 255, 0.33) 0%, rgba(212, 253, 255, 0.22) 23%, rgba(216, 253, 255, 0) 36%);
    transform: translate(-1%, -1%);
}

/*** Front Page ***/
div.cardfan {
    height: 300px;
    width: 100%;
    margin: 2rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.cardfan img {
    position: absolute;
    width: 150px;
    height: 200px;
    border: 12px solid #ffe;
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
    transform-origin: center 400px;
    transition: all .6s linear;
}

div.cardfan img:first-child {
    transform: rotate(20deg);
}

div.cardfan img:last-child {
    transform: rotate(-20deg);
}

div.cardfan:hover img:first-child {
    transform: rotate(25deg);
}

div.cardfan:hover img:last-child {
    transform: rotate(-25deg);
}


/*** Missing Yearbooks ***/
#missing-yearbooks {
    text-align: center;
}

#missing-yearbooks ul {
    text-align: center;
}

#missing-yearbooks ul li {
    text-align: center;

    text-decoration: none;
    list-style: none;
}

#missing-yearbooks span {
    background-color: #8d5f6b;
    padding: 0px 4px;
    white-space: nowrap;
    color: #fff;
}

#missing-yearbooks span:nth-child(odd) {
    background-color: #684497;
    color: #fff;
}

.school-links {
    justify-content: space-evenly;
    display: flex;
    align-items: center;
    align-content: space-around;
    flex-wrap: wrap;
}