/*Find Codes*/
/**/
/**/
/**/
/**/
/*Colours: blue #2a2a8e red #b20d0d black #1e1e1e */

@media screen {
  /*Containers & Navigation*/
    /*Main Window*/
    /*THESE ARE NOT NESTED; ONLY TO SHOW HOW THESE ELEMENTS ARE ARRANGED IN THE HTML FILE.*/
    html {margin: 0; height: 100%;}
        body {line-height: 1.15; background-size: cover;  background-repeat: no-repeat;  background-attachment: fixed; background-position: center;  background-color: #000; display: flex; position: relative; z-index: 0; margin: 0;  flex-direction: column; overflow: hidden; justify-self: auto; height: 100%;}
            #headerMain {max-width: 100%; height: 4dvh; padding: 1px; padding-right: 5px; padding-left: 5px; background-color: #2a2a8e; display: flex; z-index: 0; flex-flow: row nowrap; justify-content: space-around; justify-items: center; align-items: center;}
            #headerCorp {max-width: 100%; height: 4dvh; padding: 1px; padding-right: 5px; padding-left: 5px; background-color: #b20d0d; display: flex; z-index: 0; flex-flow: row nowrap; justify-content: space-around; justify-items: center; align-items: center;}
            #mainWindow {height: 100%; width: 100%; display: flex; flex-flow: row nowrap; overflow-y: hidden; overflow-x: hidden; overflow-wrap: break-word; margin: 0;}
                #marginL {display: flex; z-index: 0; flex-flow: column; height: inherit; width: 13dvi; min-width: 13dvi; max-height: 92dvh; align-self: flex-start;}
                    .sidebar {height: fit-content; margin-bottom: 1dvi; background-color: #1e1e1e; display: flex; flex-flow: column nowrap; overflow-x: hidden; overflow-y: visible;}
                      .sidebar h3::first-letter {color: #820d0d; font-family: monospace; font-size: 3dvi; margin: 0.05dvi}
                      .sidebar ~ button {min-width: fit-content; min-height: 25px; margin: 5px; background-color: #400; transition-duration: 50ms; transition-timing-function: ease-in-out; color: #fff; font-size: 1dvi;}
                      .pfsbr {width: inherit; height: fit-content; min-height: 4.2dvi;}
                        .pfsbrusername {color: #fff; font-family: monospace; font-size: 1.3dvi; margin: 0.05dvi;}
                  #content {max-height: 92dvh; min-height: inherit; width: inherit; height: inherit; position: relative; display: flex; z-index: 0; flex-flow: column; align-self: center; z-index: 0; background-color: #080808; place-items: stretch; overflow-y: scroll; overflow-x: hidden; overflow-wrap: break-word; margin: 0;}
                    #banner {max-width: 100%; min-height: 3dvi; height: fit-content; padding: 3px; padding-right: 5px; padding-left: 5px; background-color: #666; overflow: hidden; display: flex; flex-flow: row nowrap;}
                      #banner ~ h2 {display: inline-block;}
                      .marquee {width: fit-content; display: inline-block; white-space: nowrap; animation: marquee1 30s linear infinite; overflow: visible;}
                      @keyframes marquee1 { 0% {transform: translate3d(0, 0, 0);} 100% {transform: translate3d(-50%, 0, 0); }}
                    #accessPanel {width: fit-content; height: fit-content; padding: 20px; justify-content: center; align-content: center; display: flex; background-color: #969696aa; flex-flow: column nowrap; margin: 15px;}
                #marginR {display: flex; z-index: 0; flex-flow: column; height: inherit; width: 13dvi; min-width: 13dvi; max-height: 92dvh; align-self: flex-end;}
            #footerMain {width: 100dvi; height: 4dvh; padding-left: 5px; background-color: #1e1e1e; display: flex; z-index: 0; flex-flow: row nowrap; justify-content: space-around; justify-items: center; align-items: center;}    
    /*END*/

  /*Home Navigation Board*/
    #homeNavboard {display: flex; position: relative; z-index: 0; justify-content: center; width: auto; height: 16dvi; padding: 2.71828dvi; background-color: #363636; border: #400; border-width: 3px; --items: 6; --homeNavboard-duration: 40s; /* note - it will "break" if it gets too wide and there aren't enough items */ --homeNavboard-item-gap: 2.71828dvi;	--clr-cta: #2e2e82;	position: relative; overflow: clip; 
        &[reverse] > span {animation-direction: reverse;}
        &:hover > span {animation-play-state: paused;}/* hover pauses animation */	
        &:hover {overflow: scroll; animation-timeline: 0;}
      }
      #homeNavboard > span {position: absolute; z-index: 1; left: calc(100% + var(--homeNavboard-item-gap)); gap: 0.69dvi; border-radius: 10px; will-change: transform; animation-name: marquee2; animation-duration: var(--homeNavboard-duration); animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: calc(var(--homeNavboard-duration) / var(--items) * 1 * var(--i) * -1	);	&:nth-child(1) {--i: 0;	}	&:nth-child(2) {--i: 1;	}	&:nth-child(3) {--i: 2;	}	&:nth-child(4) {--i: 3;	}	&:nth-child(5) {--i: 4;	}	&:nth-child(6) {--i: 5;	}	&:nth-child(7) {--i: 6;	}	&:nth-child(8) {--i: 7;	}	}
      @keyframes marquee2 { 100% {transform: translateX( calc(( var(--items) * (13dvi + var(--homeNavboard-item-gap))) * -1 )); }}

  /*Monthly Awareness Announcements & Holidays*/
    /*Base*/
    #maa {width: auto; height: auto; min-width: inherit; min-height: inherit;}
    #maa h1 {font-size: 2dvi;}
    #maa h3 {font-size: 1.42dvi;}
    #maa h4 {font-size: 1dvi;}
    #maa ul {font-size: 1dvi;}
    #maa li {font-size: 1dvi;}
    #maa a {font-size: 1dvi;}
    /*January*/
    #maa.january {background-color: #d6e;}
    #maa .january h1 {font-size: 2dvi;}
    #maa .january h3 {font-size: 1.42dvi;}
    #maa .january h4 {font-size: 1dvi;}
    #maa .january ul {font-size: 1dvi;}
    #maa .january li {font-size: 1dvi;}
    #maa .january a {font-size: 1dvi;}
    /*February*/
    #maa.february {background-color: #669;}
    #maa .february h1 {font-size: 2dvi;}
    #maa .february h3 {font-size: 1.42dvi;}
    #maa .february h4 {font-size: 1dvi;}
    #maa .february ul {font-size: 1dvi;}
    #maa .february li {font-size: 1dvi;}
    #maa .february a {font-size: 1dvi;}
    /*March*/
    #maa.march {background-color: #7a6;}
    #maa .march h1 {font-size: 2dvi;}
    #maa .march h3 {font-size: 1.42dvi;}
    #maa .march h4 {font-size: 1dvi;}
    #maa .march ul {font-size: 1dvi;}
    #maa .march li {font-size: 1dvi;}
    #maa .march a {font-size: 1dvi;}
    /*April*/
    #maa.april {background-color: #494;}
    #maa .april h1 {font-size: 2dvi;}
    #maa .april h3 {font-size: 1.42dvi;}
    #maa .april h4 {font-size: 1dvi;}
    #maa .april ul {font-size: 1dvi;}
    #maa .april li {font-size: 1dvi;}
    #maa .april a {font-size: 1dvi;}
    /*May*/
    #maa.may {background-color: #8a3;}
    #maa .may h1 {font-size: 2dvi;}
    #maa .may h3 {font-size: 1.42dvi;}
    #maa .may h4 {font-size: 1dvi;}
    #maa .may ul {font-size: 1dvi;}
    #maa .may li {font-size: 1dvi;}
    #maa .may a {font-size: 1dvi;}
    /*June*/
    #maa.june {background-color: #892;}
    #maa .june h1 {font-size: 2dvi;}
    #maa .june h3 {font-size: 1.42dvi;}
    #maa .june h4 {font-size: 1dvi;}
    #maa .june ul {font-size: 1dvi;}
    #maa .june li {font-size: 1dvi;}
    #maa .june a {font-size: 1dvi;}
    /*July*/
    #maa.july {background-color: #dd2;}
    #maa .july h1 {font-size: 2dvi;}
    #maa .july h3 {font-size: 1.42dvi;}
    #maa .july h4 {font-size: 1dvi;}
    #maa .july ul {font-size: 1dvi;}
    #maa .july li {font-size: 1dvi;}
    #maa .july a {font-size: 1dvi;}
    /*August*/
    #maa august {background-color: #da2;}
    #maa .august h1 {font-size: 2dvi;}
    #maa .august h3 {font-size: 1.42dvi;}
    #maa .august h4 {font-size: 1dvi;}
    #maa .august ul {font-size: 1dvi;}
    #maa .august li {font-size: 1dvi;}
    #maa .august a {font-size: 1dvi;}
    /*September*/
    #maa.september {background-color: #d72;}
    #maa .september h1 {font-size: 2dvi;}
    #maa .september h3 {font-size: 1.42dvi;}
    #maa .september h4 {font-size: 1dvi;}
    #maa .september ul {font-size: 1dvi;}
    #maa .september li {font-size: 1dvi;}
    #maa .september a {font-size: 1dvi;}
    /*October*/
    #maa.october {background-color: #f40;}
    #maa .october h1 {font-size: 2dvi;}
    #maa .october h3 {font-size: 1.42dvi;}
    #maa .october h4 {font-size: 1dvi;}
    #maa .october ul {font-size: 1dvi;}
    #maa .october li {font-size: 1dvi;}
    #maa .october a {font-size: 1dvi;}
    /*November*/
    #maa.november {background-color: #660;}
    #maa .november h1 {font-size: 2dvi;}
    #maa .november h3 {font-size: 1.42dvi;}
    #maa .november h4 {font-size: 1dvi;}
    #maa .november ul {font-size: 1dvi;}
    #maa .november li {font-size: 1dvi;}
    #maa .november a {font-size: 1dvi;}
    /*December*/
    #maa.december {background-color: #66f;}
    #maa .december h1 {font-size: 2dvi;}
    #maa .december h3 {font-size: 1.42dvi;}
    #maa .december h4 {font-size: 1dvi;}
    #maa .december ul {font-size: 1dvi;}
    #maa .december li {font-size: 1dvi;}
    #maa .december a {font-size: 1dvi;}

  /*Organizers*/
    /*Element Direction*/
    .row {display: block; flex-flow: row; align-content: center; overflow: visible; height: fit-content; width: inherit;}
        .nowrap {overflow: visible;}
    .column {display: block; align-content: center; flex-flow: column; overflow: visible; height: fit-content;} 
    /*Tables*/
    table  {border: 3px solid #1e1e1e; border-width: 3px; color: #c1c6c5; background-color: #1e1e1e1e; display: flex; flex-flow: column; align-content: center; align-items: stretch; padding: 5px;}
    tr {width: inherit; height: fit-content; border: 1px solid #600; border-width: 1px; display: flex; justify-content: space-evenly;}
    th {width: 100%; display: flex; align-items: flex-start; border: 1px solid #005; border-width: 1px; font-family: monospace; font-size: 1dvi; padding: 2px;}
    td {min-height: inherit; width: 100%; display: flex; align-items: flex-start; border: 1px solid #fff; border-width: 1px; font-family: monospace; font-size: 1dvi; padding: 2px;}
    tbody {width: inherit; height: fit-content; display: flex; flex-flow: column; align-items: stretch;}
    /*Navigation*/
    ul {list-style-type: none; margin: 2px; padding: 0; font-size: 2dvi;}
    
    /*General Containers - To be redistributed*/
    .card {width: 13dvi; height: 13dvi; padding: 1dvi; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; background-color: #424269;}
    .container {padding: 15px; display: flex; flex-shrink: 0; flex-flow: column nowrap; background-color: #6667; border: solid black 2px; margin: 15px; flex-shrink: 1;}
    .container-flex {width: fit-content; height: fit-content; padding: 10px; max-width: 100%; align-content: center;}
    .container-fill {padding: 15px; display: flex; flex-shrink: 0; flex-flow: column nowrap; background-color: #6667; border: solid black 2px; margin: 15px; flex-shrink: 1; min-height: 100%;}
    .container-center {width: 100%; height: 100%; padding: 20px; justify-content: center; align-content: center; display: flex; flex-flow: row wrap;}
    .container-light {padding: 5px; display: flex; background-color: #969696aa; flex-flow: column nowrap; margin: 5px; flex-shrink: 1; width: fit-content; max-width: 100%; overflow: visible; align-content: center;}
    .container-video {max-width: 100%; min-height: fit-content; height: auto; display: flex; background-color: #000d; justify-content: center;}
    .container-tiles-nowrap {max-width: 100%; height: fit-content; display: flex; flex-flow: row nowrap; padding: 10px; overflow: auto; align-items: center; justify-content: space-around;}
    .container-tiles-wrap {height: fit-content; display: flex; flex-flow: row wrap; padding: 15px; align-items: center; background-color: #888; margin: 15px; overflow: auto; align-items: center; justify-content: space-around;}
    .card:hover {transform: scale(1.03); background-color: #666;}
    .card-wide {width: 100%; display: flex; flex-flow: column wrap; align-content: center; justify-content: center; align-items: center; padding: 6px; margin: 0; background-color: #424242; transition-duration: 0.2s;transition-timing-function: ease-in-out;}
    .card-wide:hover {transform: scale(1.03); background-color: #454545;}
    .card-flex {min-width: 90%; max-width: 90%; height: fit-content; display: flex; flex-flow: column wrap; text-align: center; align-items: center; max-height: fit-content; background-color: #363636; transition-duration: 0.2s; transition-timing-function: ease-in-out;}
    .card-flex:hover {background-color: #151515;}
    .card-fill {height: auto; display: flex; flex-flow: column wrap; align-content: center; align-items: center; padding: 5px; background-color: #666; transition-duration: 0.2s; transition-timing-function: ease-in-out;}
    
    /*Popups*/
    .popup {position: absolute; display: inline-block; cursor: pointer; z-index: 100;}
    .popup .show {visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s}
    @-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
    @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

  /*Posts, Ads, Blocks & Messages*/
    /**/
    div#headerPosts {width: 100%;}
    .writePost {width: auto; height: fit-content; background-color: #400; padding: 3px; margin: 1dvi;}

    article.post:hover {background-color: #696060;}
    article {margin: 4px; min-width: inherit; display: flex; flex-flow: column nowrap; justify-content: left; padding: 0.69dvi; background-color: #666; transition-duration: 0.2s;transition-timing-function: ease-in-out;}
    /*Posts - psts*/
    article.post {min-height: fit-content; max-height: 20dvi; margin-left: 1dvi; margin-right: 1dvi; margin-top: 0.25dvi; margin-bottom: 0.25dvi;}
      .oper {color: #fff; background-color: #1e1e1e42; padding: 5px; height: fit-content; width: auto; display: flex; flex-flow: row nowrap; justify-content: left; margin-bottom: 5px;}
        .oppfp {object-fit: contain; max-height: 2dvi; max-width: 2dvi; margin-right: 1dvi;}
        .opusername {color: #fff;}
      .opimg {object-fit: contain; max-height: 8dvi; max-width: 13dvi; min-width:6.9dvi; height: 100%; width: auto; margin-right: 1dvi;}
      .opbody {width: 100%; min-height: 6.9dvi; height: auto; flex-flow: column wrap;}
        .optitle {color: #fff; background-color: #42424242; padding: 4px;}
        .opcontent {min-height: 4.2dvi; max-height: 13dvi; color: #fff; background-color: #42424242; padding: 4px; overflow-y: scroll; margin-bottom: 5px;}
      .opicons {width: inherit; height: fit-content; background-color: #55555555; margin-top: 2px; padding: 3px; display: flex; justify-content: space-between;}
        .opreactions {width: fit-content; height: fit-content;}
        .oputils {width: fit-content; height: fit-content;}
        .opinteractions {width: fit-content; height: fit-content;}
    /*Direct Messages - dms*/
    article.dmsg {min-width: auto; display: inline-flexbox; flex-flow: row wrap;}
      article.dmsg p {color: #fff; font-family: monospace; font-size: small;}

  /*Media*/
    /**/
    img {min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; width: auto; height: auto; --img-width: width;}
    .icon00 {width: 1dvb; height: 1dvb; padding: 1dvb;}
    .icon0 {width: 3dvb; height: 3dvb; padding: 1dvb;}
    .icon1 {width: 6dvb; height: 6dvb; padding: 1dvb;}
    .icon2 {width: 12dvb; height: 12dvb; padding: 1dvb;}
    .icon3 {width: 18dvb; height: 18dvb; padding: 1dvb;}
    .icon4 {width: 25dvb; height: 25dvb; padding: 1dvb;}
    .icon5 {width: 30dvb; height: 30dvb; padding: 1dvb;}
    .thumbnail {width: auto; height: 128dvb;}
    .image {max-width: 100%; max-height: 100%; margin: 5px; display: flex;}
    .imagehalf {max-width: 50%; max-height: 50%; margin: 5px; display: flex;}
    .logo {height: 2.5dvi;} 
    .video {max-width: 60%; width: auto; height: auto;}
    svg {width: fit-content; height: fit-content;}
    #imgbox {float: right; width: --img-width;}
   
  /*Default Text & Input*/
    /*Headers*/
    h1 {color: #fff; font-family: monospace; font-size: 2.3dvi; margin: 0.05dvi;}
    h2 {color: #fff; font-family: monospace; font-size: 1.8dvi; margin: 0.05dvi;}
    h3 {color: #fff; font-family: monospace; font-size: 1.3dvi; margin: 0.05dvi;}
    h4 {color: #fff; font-family: monospace; font-size: 0.8dvi; margin: 0.05dvi;}
    h5 {color: #fff; font-family: monospace; font-size: 0.5dvi; margin: 0.05dvi;}
    /*Normal Text*/
    p {color: #fff; font-family: monospace; font-size: 1dvi; margin: 0.005dvi;}
    /*Links*/
    a {color: #fff; font-family: monospace; font-size: 1dvi; padding: 1px; text-decoration: none;}
    a.easteregg:link {color: #fff; font-family: monospace; text-decoration: none;}
    a:link {color: #f44; font-family: monospace; text-decoration: none;}
    a:visited {color: #a44; font-family: monospace; text-decoration: none;}
    a:hover {color: #333; font-family: monospace; text-decoration: none;}
    a:active {color: #99d; font-family: monospace; text-decoration: none;}
    /*Inputs*/
    input {width: auto; height: auto; min-width: inherit; min-height: inherit; margin: 5px;}
    textarea {width: auto; height: auto; min-height: inherit; min-width: inherit; margin: 2px;}
    textarea.tableText {width: auto; height: auto; min-height: inherit; min-width: inherit; margin: 2px;}
    button.tableButton {width: 100%; margin: 0; color: #1e1e1e; background-color: #c1c6c5; border: none;}
    button.tableButton:hover {background-color: #3c3c3c;}
    button {min-width: fit-content; min-height: 25px; margin: 3px; border: none; background-color: #600; transition-duration: 50ms; transition-timing-function: ease-in-out; color: #fff; font-size: 1dvi;}
    button:hover {transform: scale(1.05); background-color: #622;}
    input.radio {min-width: 100%; min-height: 25px; margin: 5px;}
    input[type="text"] {width: 100%; height: 100%; min-width: inherit; min-height: inherit; margin: 0; background-color: #c1c6c5; border: none;}
    select {background-color: #666a;}

    hr {border: #1e1e1e solid 2px; width: 100%;}
  /**/
   .gradhRed {display: relative; z-index: 1; background: linear-gradient(90deg, #400 0%, transparent 13%, transparent 87%, #400 100%); width: auto; height: auto;}
}