/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           GENERAL STUFF                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

html {
    cursor: url('stuff/cursor/retpoint.png'), auto;
}

html a:hover {
    cursor: url('stuff/cursor/retselect.png'), auto;
}

body {
    background-image: url(stuff/pictures/bodybg.jpg);
    background-size: 600px 600px;
}

::selection {
    background-color: rgba(97, 129, 146, 0.743);
    color: rgb(255, 247, 237);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgb(145, 140, 132);
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px  rgb(255, 247, 237), inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

::-webkit-scrollbar-thumb {
    background: rgb(207, 200, 189);
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px  rgb(255, 247, 237), inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

::-webkit-scrollbar-button:single-button {
    background: rgb(207, 200, 189);
    display: block;
    height: 12px;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px  rgb(255, 247, 237), inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

input {
    background: rgb(238, 236, 233);
    border: 1.5px inset;
    font-family: 'terminal';
    outline: none;
}

textarea {
    outline: none;
}

input:hover {
    cursor: url('stuff/cursor/retselect.png'), auto;
}

input:active {
    cursor: url('stuff/cursor/retselect.png'), auto;
}

label:hover {
    cursor: url('stuff/cursor/retpoint.png'), auto;
}
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                          FONTS AND SUCH                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

@font-face {
    font-family: 'terminal';
    src: url(stuff/fonts/terminal.ttf) format('truetype');
}

@font-face {
    font-family: 'matina';
    src: url(stuff/fonts/matina.otf) format('opentype');
}

@font-face {
    font-family: 'silvester';
    src: url(stuff/fonts/silvester.otf) format('opentype');
}

@font-face {
    font-family: 'derian';
    src: url(stuff/fonts/derian.otf) format('opentype');
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                          MODAL SHIT >:(                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modaldiv {
    position: absolute;
    display: block;
    width: 400px;
    height: min-content;
    background-color: rgb(255, 247, 237);
    border-radius: 3px;
    border: 2px outset;
}

#login {
    width: 275px;
}

.modalcontent {
    font-family: 'terminal';
    color: rgb(75, 82, 58);
    text-align: center;
    padding: 20px;
}

.modalcontent h1 {
    margin: 10px auto 0px;
}

.modalcontent p {
    margin: 10px 0px 10px;
}

.modalcontent img {
    width: 70px;
}

.close {
    width: 100%;
    height: 25px;
    background-color: rgb(98, 110, 69);
    top: 0;
    padding-top: 7px;
    text-align: right;
}

.close p {
    font-family: 'terminal';
    font-weight: bold;
    color:rgb(255, 247, 237);
    position: fixed;
    margin: 0px 0px 0px 7px;
    letter-spacing: 1px;
}
.close span {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: rgb(255, 247, 237);
    background-color: rgb(196, 44, 36);
    border: 2px outset;
    margin-right: 4px;
    padding: 0.5px 3.5px;
}

.close span:hover {
    border: 2px inset;
    background-color: rgb(116, 28, 23);
    color: rgb(145, 140, 132);
    cursor: url('stuff/cursor/retselect.png'), auto;
}

/* im fucking pissssed ts won't work */

#memberarticle {
    color: rgb(75, 82, 58);
    text-decoration: none;
    box-sizing: border-box;
}

#memberarticle:hover {
    cursor: url('stuff/cursor/retselect.png'), auto;
}

#memberarticle:hover h1 {
    color: rgb(97, 129, 146);
}

#memberarticle:hover img {
    opacity: 0.75;
}

/* ^^ lmao i figured it out, i made ts harder for myself whatever */

#loginmodal {
    text-align: left;
}

#loginmodal a.book {
    position: relative;
    display: inline-block;
}

#loginmodal span {
    font-size: 12px;
    color: rgb(196, 44, 36);
}

#spooky {
    display: block;
    position: absolute;
    margin: 0;
    left: 17%;
    top: 70%;
}

#spooky2 {
    display: block;
    position: absolute;
    font-weight: bold;
    color: black;
    margin: 0px;
    left: 30%;
    top: 75%;
    text-align: left;
    width: 500px;
}

#spooky3 {
    display: block;
    position: absolute;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    left: 35%;
    top: 80%;
}

#scary {
    display: block;
    position: absolute;
    z-index: 1;
    width: 220px;
    height: 128px;
    opacity: 0.98;
    top: 10%;
    left: 30%;
}

#dennycont {
    height: 310px;
}

#dennymodal {
    text-align: left;
}

#dennymodal h1 {
    font-size: 24px;
    margin: 0;
}

#dennymodal p {
    margin-bottom: 20px;
}

#dennymodal input {
    width: 60%;
}

#dennymodal a.book {
    position: absolute;
    bottom: 15px;
}

#button:hover {
    color: rgb(97, 129, 146);
}

#tellme {
    font-family: 'terminal';
    font-weight: bold;
    font-size: 300px;
    color: rgb(196, 44, 36);
    opacity: 0.7;
    z-index: 100;
    position: fixed;
    display: none;
    pointer-events: none;
    user-select: none;
}

#tsclose3 {
    justify-self: right;
}

/* clean css glitch https://codepen.io/pgalor/pen/OeRWJQ*/

div.anim{
  animation: glitch 1.5s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

div.anim:before,
div.anim:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

div.anim:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

div.anim:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}

/* css shake animation https://unused-css.com/blog/css-shake-animation/ */

@keyframes vertical-shaking {
  0% { transform: translateY(0) }
  25% { transform: translate(1px, 1.5px) }
  50% { transform: translateY(-1.5px) }
  75% { transform: translate(1px, 1px) }
  100% { transform: translateY(0) }
}

.vertical-shake {
  animation: vertical-shaking 0.15s infinite;
}

/* my own shiii */

@keyframes bgchange {
    0% { background-color: rgba(0, 0, 0, 0.8) }
    100% { background-color: rgb(56, 17, 15) }
}

.bgchange {
    animation: bgchange 10s forwards;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           GRID STUFF :3                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.container { 
    display: grid;
    grid-template-columns: minmax(min-content, 15%) minmax(min-content, 50%);
    grid-template-rows: minmax(min-content, 200px) 24px minmax(min-content, 90px) max-content 50px;
    justify-content: center;
    margin-top: 20px;
    margin-inline: 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header"
        "navbar banner"
        "navbar maincontent"
        "adspace maincontent"
        "footer footer";
}
.headergrid { grid-area: header; margin: 3px 3px 8px 3px; }
.navbargrid { grid-area: navbar; margin: 3px;}
.adspacegrid { grid-area: adspace; margin: 3px;}
.maincontentgrid { grid-area: maincontent; margin: 0px 3px 3px 5px;}
.footergrid { grid-area: footer; margin: 3px;}
.bannergrid { grid-area: banner; margin: 3px 3px 0px 5px;}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                          ERROR PAGE X-X                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#errorp {
    align-content: center;
    text-align: center;
    color: rgb(75, 82, 58);
    font-family: 'terminal';
    margin: 0px;
}

#errorp h1 {
    font-size: 60px;
    margin-bottom: 0px;
}

#errorp h2 {
    font-size: 23px;
    margin: -5px 0px 25px;
}

#errorp img {
    display: block;
    margin: 0px auto 20px;
    width: 125px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           HEADER!! >:0                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#header {
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-image: url(stuff/pictures/headerbgpic.png);
    background-size: 100% 210%;
}


#header h1 {
    font-family: 'derian';
    font-weight: normal;
    font-size: 55px;
    color: rgb(255, 247, 237);
    text-shadow: 1px 1px 5px black;
    padding-left: 25px;
    padding-right: 25px;
    line-height: 0.75;
    margin-bottom: 18px;
}

#header h2 {
    font-family: 'silvester';
    font-weight: normal;
    font-size: 30px;
    color: rgb(255, 247, 237);
    text-shadow: 1px 1px 5px black;
    padding-left: 30px;
    padding-top: 50px;
    margin-bottom: -35px;
}

#header p {
    font-family: 'terminal';
    font-weight: lighter;
    font-style: normal;
    font-size: 14px;
    color: rgb(98, 110, 69);
    padding: 5px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.schedbox {
    background-color:rgba(255, 247, 237,0.8);
    border-radius: 15px;
    min-width: min-content;
    max-width: 300px;
    margin-left: 25px;
    box-shadow: 2px 2px 5px;
    margin-bottom: 0px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           BANNER! OWO*                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#banner {
    background-color: rgb(196, 44, 36);
    text-align: center;
    padding: 2px;
    padding-bottom: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

#banner a {
    font-family: 'terminal';
    font-size: 14px;
    text-decoration: none;
    color: rgb(255, 247, 237);
    animation: blink 1s infinite;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           NAVBAR (^o^)                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#navbar {
    text-align: center;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 6px;
    background-image: url(stuff/pictures/headerbgpic.png);
    background-position: 25% 10%;
    background-size: 600% 310%;
}

nav a {
    display: block;
    background-color:rgb(98, 110, 69);
    border-radius: 8px;
    max-width: 100%;
    margin: 6px;
    padding: 5px;
    padding-top: 7px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    font-family: 'silvester';
    text-decoration: none;
    color: rgb(255, 247, 237);
    margin-bottom: 5px;
    transition: ease-in-out 0.3s, font-style 0s;
}

nav a:hover {
    background-color: rgba(255, 247, 237,0.7);
    color: rgb(98, 110, 69);
    font-style: oblique;
    font-weight: bold;
    text-shadow: none;
}

.navclicked {
    background-color: rgba(255, 247, 237,0.7);
    color: rgb(98, 110, 69);
    font-style: oblique;
    font-weight: bold;
    text-shadow: none;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                            FOOTER :PP                            */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#footer {
    font-family: 'terminal';
    font-size: 14px;
    font-weight: normal;
    font-style: oblique;
    color: rgb(75, 82, 58);
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    margin: 30px 0px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           HOME PAGE :{D                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#maincontent {
    border-radius: 0px 0px 8px 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 247, 236, 0.651);
    padding: 0px 30px;
}

.maintitle {
    font-family: 'derian';
    font-weight: normal;
    font-style: italic;
    font-size: 48px;
    margin: 20px 0px -10px;
    color: rgb(75, 82, 58);
}

#homearticle {
    text-align: justify;
    font-family: 'matina';
    margin: 0px 30px 20px;
    color: rgb(75, 82, 58);
}

#homearticle img {
    float: left;
    width: 325px;
    height: 240px;
    border-radius: 3px;
    margin-right: 20px;
}

#homearticle p {
    text-align: justify;
    line-height: 1.45;
}

#featured {
    margin: 0 30px;
    text-align: justify;
    color: rgb(75, 82, 58);
    display: flex;
    flex-direction: column;
}

#featured a {
    color: rgb(75, 82, 58);
    text-decoration: none;
    box-sizing: border-box;
    margin: 5px 0px;
}

#featured a:hover h1 {
    color: rgb(97, 129, 146);
}

#featured a:hover img {
    opacity: 0.75;
}

#featured img {
    float: left;
    width: 230px;
    height: 160px;
    border-radius: 3px;
    margin-right: 17px;
}

#featured h1 {
    font-family: 'matina';
}

#featured h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin-top: -22px;
    margin-bottom: 10px;
}

#featured p {
    font-family: 'matina';
    line-height: 1.45;
    font-size: 15px;
}

#featured #memberarticle {
    box-sizing: border-box;
    margin: 5px 0px 0px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           ABOUT US (^-w-^)                       */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#team {
    display: grid;
    margin: 20px 30px 30px;
    grid-template-columns: 50% 50%;
    grid-template-rows: min-content min-content;
    column-gap: 8px;
    row-gap: 11px;
    justify-content: center;
    align-content: center;
    color: rgb(75, 82, 58);
    text-align: center;
}

#team > div {
    border-radius: 8px;
    padding: 22px;
    background-color: rgb(255, 247, 237);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

#team img {
    margin:0px auto 15px;
    filter: drop-shadow(1px 1px 0 rgb(75, 82, 58))
            drop-shadow(-1px 1px 0 rgb(75, 82, 58))
            drop-shadow(1px -1px 0 rgb(75, 82, 58))
            drop-shadow(-1px -1px 0 rgb(75, 82, 58));
    width: 75%;
}

#missingimg {
    position: relative;
}

#missingimg h3 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 11px;
    font-weight: normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px 0px 38px 15px;
    overflow: hidden;
}

#missingimg h5 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 11px;
    font-weight: normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px 0px 34px 30px;
    color: rgb(75, 82, 58);
}

#team h1 {
    font-family: 'matina';
    margin: 1px;
}

#team h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin: 1px;
}

#team p {
    font-family: 'terminal';
    text-align: justify;
    margin: 20px 0px;
}

#team q {
    font-family: 'matina';
    font-size: 13.5px;
}

#staff {
    display: grid;
    margin: 30px 30px 0px;
    grid-template-columns: 29% 29% 29%;
    grid-template-rows: min-content min-content;
    row-gap: 30px;
    column-gap: 15px;
    justify-content: center;
    align-content: center;
    color: rgb(75, 82, 58);
}

#staff div {
    text-align: center;
}

#staff img {
    margin: 0px auto 10px;
    filter: drop-shadow(1px 1px 0 rgb(75, 82, 58))
            drop-shadow(-1px 1px 0 rgb(75, 82, 58))
            drop-shadow(1px -1px 0 rgb(75, 82, 58))
            drop-shadow(-1px -1px 0 rgb(75, 82, 58));
    width: 75%;
}

#staff h1 {
    font-family: 'matina';
    font-size: 18px;
    margin: 1px;
}

#staff p {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin: 1px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                       FEATURED ARTICLES ._.                      */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#fahh {
    margin: 20px 0px 0px;
}

#fahh h1 {
    font-family: 'matina';
    font-size: 40px;
    color: rgb(75, 82, 58);
    margin-bottom: -10px;
}

#fahh h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin-bottom: 25px;
}

#fahh h3 {
    font-family: 'matina';
    font-size: 30px;
    color: rgb(75, 82, 58);
    margin: 0px;
}

#fahh p {
    font-family: 'matina';
    color: rgb(75, 82, 58);
}

#fahh blockquote {
    font-family: 'matina';
    color: rgb(104, 121, 130);
    border-left: 1.5px solid rgb(104, 121, 130);
    padding-left: 10px;
    margin: 0px 50px 20px;
}

#fahh blockquote span {
    font-family: 'terminal';
    font-style: oblique;
    opacity: 0.75;
}

#fahh img {
    display: block;
    margin: 20px auto 0px;
    width: 325px;
    height: 245px;
    border-radius: 3px;
}

#fahh h4 {
    font-family: 'terminal';
    font-size: 14px;
    font-style: oblique;
    text-align: center;
    font-weight: normal;
    color: rgb(75, 82, 58);
    margin: 5px 0px 20px;
}

#firstdiv {
    font-family: 'matina';
    text-align: justify;
    line-height: 1.45;
    padding: 0px 20px;
}

#firstdiv img {
    float: left;
    width: 326px;
    height: 245px;
    border-radius: 3px;
    margin: 0px 20px 10px 0px;
}

#normaldiv {
    font-family: 'matina';
    text-align: justify;
    line-height: 1.45;
    padding: 0px 20px;
    margin-bottom: -20px;
}

#fahh textarea {
    opacity: 1.0;
    background-color: rgb(238, 236, 233);
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px  rgb(255, 247, 237), inset -2px -2px grey, inset 2px 2px #dfdfdf;
    padding: 5px;
    resize: none;
    width: 100%;
    height: 1000px;
}

#fahh textarea:hover {
    cursor: url('stuff/cursor/retpoint.png'), auto;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                          EXHIBITIONS OTL                         */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#featuredex {
    margin: 10px 20px 35px;
}

#featuredex div {
    position: relative;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    text-align: left;
    color: rgb(75, 82, 58);
    background-color: rgb(255, 247, 237);
    min-height: 230px;
}


.book {
    position: absolute;
    display: block;
    padding: 6px 6px 3px 6px;
    background-color: rgb(98, 110, 69);
    font-family: 'silvester';
    font-size: 14px;
    font-weight: bold;
    color: rgb(255, 247, 237);
    border-radius: 3px;
    border: 2px outset;
    text-align: center;
    letter-spacing: 1px;
    text-decoration: none;
}

.book:hover {
    background-color: rgb(75, 82, 58);
    color: rgb(207, 200, 189);
    border: 2px inset;
}

#featuredex h1 {
    font-family: 'matina';
    padding: 25px 0px 0px;
}

#featuredex h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin: -20px 0px 20px;
}

#featuredex p {
    font-family: 'matina';
    line-height: 1.45;
}

#featuredex img {
    width: 230px;
    height: 230px;
}

.leftdiv {
    padding-right: 20px;
}

.leftdiv img {
    float: left;
    margin-right: 20px;
    border-radius: 8px 0px 0px 8px;
}

.leftdiv a {
    bottom: 20px;
    right: 20px;
}

.rightdiv {
    padding-left: 25px;
}

.rightdiv img {
    float: right;
    margin-left: 20px;
    border-radius: 0px 8px 8px 0px;
}

.rightdiv a {
    bottom: 20px;
    left: 20px;
}

#upcomingex {
    display: flex; 
    margin: 25px 20px -20px;
    justify-content: center;
}

#upcomingex div {
    margin: 0px 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    text-align: center;
    color: rgb(75, 82, 58);
    background-color: rgb(255, 247, 237);
    max-width: 230px;
    border-radius: 8px;
}

#upcomingex img {
    width: 230px;
    height: 210px;
    border-radius: 8px 8px 0px 0px;
}

#upcomingex h1 {
    font-family: 'matina';
    margin: 10px 20px 10px;
    font-size: 28px;
}

#upcomingex h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin: 5px 20px 20px;
}

/* remnants corrupted page */

#remnant {
    position: absolute;
    top: 69%;
    left: 36%;
}

#remnant textarea:disabled  {
    opacity: 1.0;
    background-color: rgb(238, 236, 233);
    width: 300px;
    height: 125px;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px  rgb(255, 247, 237), inset -2px -2px grey, inset 2px 2px #dfdfdf;
    padding: 5px;
}

#remnant textarea:hover {
    cursor: url('stuff/cursor/retpoint.png'), auto;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                             EVENTS uwu                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#events1 {
    margin: 40px auto 25px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 247, 237);
    width: 550px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    color: rgb(75, 82, 58);
    text-align: center;
}

#events1 > div {
    width: 33%;
    padding: 10px;
    margin: 10px 0px;
    display: block;
    position: relative;
    justify-content: center;
    justify-items: center;
}

#events1 > div h1 {
    font-family: 'matina';
    font-size: 22px;
    margin: 20px 0px 0px;
}

#events1 > div h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin: 0px 0px 20px;
}

#events1 > div p {
    font-family: 'matina';
    line-height: 1.45;
    font-size: 15px;
    margin-bottom: 25px;
}

#events1 > div a.book {
    position: relative;
}

.middleev {
    border-left: 1.2px solid rgb(75, 82, 58);
    border-right: 1.2px solid rgb(75, 82, 58);
}

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(98, 110, 69);
    display: block;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translate(-50%);
    align-content: center;
}

.circle img {
    display: block;
    margin: auto;
    width: 25px;
    height: 25px;
}

#events2 {
    margin: 25px 20px 0px;
    justify-items: center;
}

#events2 div {
    position: relative;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    text-align: left;
    color: rgb(75, 82, 58);
    background-color: rgb(255, 247, 237);
    margin: 10px 0px 20px;
    padding: 20px;
    font-family: 'matina';
    display: flow-root;
    width: 85%;
}

#events2 img {
    filter: drop-shadow(1px 1px 0 rgb(75, 82, 58))
            drop-shadow(-1px 1px 0 rgb(75, 82, 58))
            drop-shadow(1px -1px 0 rgb(75, 82, 58))
            drop-shadow(-1px -1px 0 rgb(75, 82, 58));
    width: 150px;
    float: left;
    margin: 10px 20px 10px 10px;
}

#events2 h1 {
    margin: 15px 0px 0px;
    line-height: 0.9;
    font-size: 25px;
}

#events2 h2 {
    font-family: 'terminal';
    color: rgba(75, 82, 58, 0.497);
    font-weight: bold;
    font-style: oblique;
    font-size: 14px;
    margin: 2px 0px 20px;
    line-height: 1.35;
}

#events2 p {
    line-height: 1.45;
    margin: 0px;
    font-size: 15px;
}

#events2 h2 span {
    background-color: rgb(98, 110, 69);
    border-radius: 3px;
    color: rgb(255, 247, 237);
    font-weight: normal;
    font-style: normal;
    padding: 3px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                             COMMUNITY.                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#membership {
    margin: 20px 20px 35px;
    color: rgb(75, 82, 58);
    font-family: 'matina';
    text-align: justify;
}

#membership p {
    line-height: 1.45;
}

#benefits {
    display: flex;
    text-align: center;
}

#benefits > div {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 247, 237);
    border-radius: 8px;
    width: 33%;
    margin: 0px 7px;
    padding: 15px;
    height: min-content;
}

#benefits div.circle {
    width: 75px;
    height: 75px;
    position: relative;
    top: auto;
    left: 50%;
    transform: translate(-50%);
    align-content: center;
}

#benefits img {
    width: 35px;
    height: 35px;
}

#benefits h1 {
    margin: 15px 0px 0px;
    line-height: 0.9;
    font-size: 25px;
}

#benefits p {
    font-size: 15px;
    margin: 10px 0px 0px;
}

#signup {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 247, 237);
    border-radius: 8px;
    padding: 10px;
    font-family: 'terminal';
    width: 60%;
    margin-top: 15px;
    text-align: left;
}

#signup > a {
    font-size: 14px;
    display: block;
    margin: 5px auto;
    text-align: center;
    font-style: italic;
    color: rgb(98, 110, 69);
    text-decoration: underline;
}

#signup > a:hover {
    color: rgb(97, 129, 146);
}

#signup h1 {
    margin: 2px 10px 15px;
    text-align: left;
    font-size: 24px;
}

#signupbutton {
    justify-items: center;
    display: block;
    margin-top: 10px;
}

#signupbutton a.book {
    position: relative;
}

#signup input {
    width: 95%;
}

.signupname {
    display: flex;
    justify-content: center;
}

.signupname div {
    width: 50%;
    margin: 0px 4px 0px;
    padding: 0px 5px 0px;
}

.signupemail {
    width: 98%;
    margin: 8px 4px 5px;
    padding: 0px 5px 0px;
}

/* fake guest book */
/* omfg 1k+ lines of redundant code lol ;-; */

#guestbook {
    margin: 20px 20px -30px;
    color: rgb(75, 82, 58);
    font-family: 'matina';
}

#commentinput {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 247, 237);
    border-radius: 8px;
    padding: 15px;
    font-family: 'terminal';
    margin: 0 70px 15px;
}

#commentinput input{
    font-family: 'terminal';
}

#commentgrid {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: 100%;
    column-gap: 0px;
}

#commentinput h1 {
    margin: 2px 0 15px;
    text-align: left;
    font-size: 24px;
}

#commentinput a.book {
    position: relative;
    display: inline-block;
}

#postdiv {
    text-align: right;
    margin-top: 5px;
}

.commentinputarea {
    width: 300px;
    height: 40px;
    background: rgb(238, 236, 233);
    border: 1.5px inset;
    resize: none;
    font-family: 'terminal';
}

.commentinputarea:hover {
    cursor: url(./stuff/cursor/retselect.png), auto;
}

#commentsection {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 247, 237);
    border-radius: 8px;
    padding: 15px;
    font-family: 'terminal';
    margin: 15px 70px 0px;
}

#commentsection > div {
    margin: 5px 10px;
    border-top: 1.5px dotted rgb(98, 110, 69);
    padding: 20px 15px 15px;
}

#commentsection > div h1 {
    margin: 0;
    font-size: 24px;
    color: rgb(98, 110, 69);
}

#commentsection > div h2 {
    margin: 3px 0 0;
    font-size: 14px;
    color: rgba(75, 82, 58, 0.497);
}

#commentsection > div p {
    margin-bottom: 0px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           ADSADSADSADS                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#adspace {
    margin: 100px 5px 0px;
    display: grid;
    row-gap: 175px;
    font-family: 'terminal';
    font-size: 10.5px;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 1.5px;
    text-align: center;
    align-content: start;
}

#adspace > div {
    border: 1.5px inset gray;
    height: 250px;
    position: relative;
    background-image: url(stuff/ads/dennyad2.jpg);
    background-size: 100% 100%;
}

#adspace img {
    width: 100%;
    height: 100%;
}

#adspace p {
    position: absolute;
    display: block;
    top: 103%;
    left: 50%;
    transform: translate(-50%);
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                         super scary extra                        */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.dennypic {
    mix-blend-mode:darken;
}