/* 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." */

body {
  color: black;
  background-image: url(/images/background.png);
  font-family: Verdana;
  background-attachment: fixed;
  
  
}

#Container {
  width: 1000px;
  padding-bottom: 50px;
  margin: auto;
  margin-top: 50px;
  text-align: center;
  background-image: url(/images/ContainerBG.png);
  background-repeat: repeat;
  border-radius: 5px;
  box-shadow: 3px 3px 5px, 2px 2px 2px white inset;
  display: flex;
  flex-direction: column;
  font-variant-ligatures: none;
}

#Banner {
  width: 1000px;
  height: 250px;
  margin: auto;
  text-align: center;
  background-image: url(/images/Bannerimage.png);
  border: 3px solid #000000;
  border-style: outset;
  box-shadow: 3px 3px 5px;
}

#Header {
  height: 158px;
  text-align: center;
  translate: 0px -40px;
}

#Navbar {
  height: 81px;
  translate: 0px 12px;
  display: flex;
  flex-direction: column;
}

#navb {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: -2000px;
  justify-content: space-evenly;
  
}

#sch {
  background-color: #9B9B9B;
  width: 2000px;
  height: 50px;
  background-image: url(/images/Nav_shad.png);
  border-radius: 10px 10px 0px 0px;
  border-top: 3px groove #000000;
  border-left: 3px groove #000000;
  border-right: 3px ridge #000000;
  box-shadow: 2px 2px 4px white inset;
  align-items: stretch;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  transition: translate 0.2s, height 0.2s, filter 0.2s;
  font: italic 20px Arial, sans-serif;
  font-weight: bold;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  line-height: 55px;
  cursor:pointer;
  text-decoration: none;
  
}

#sch:hover {
  height: 80px;
  translate: 0px -30px;
  filter: brightness(1.2);
}

#OCbar {
  height: 75px;
  width: 998px;
  background-color: #404040;
  box-shadow: 10px 10px 20px black inset, -10px -10px 20px black inset;
  margin: auto;
  border: 3px solid #000000;
  text-align: center;
  display: flex;
  
}

#OCZONE {
  margin: auto; 
  margin-left: 50px;
  margin-right: 50px;
}

#Scroll {
  height: 60px;
  width: 640px;
  margin: auto;
  margin-top: 5px;
  border: 3px ridge #7C7C7C;
  justify-content: center;
  display: flex;
}
  
#arrowL {
    background:url(/images/arLeft.png) no-repeat;
    cursor:pointer;
    border:none;
    width:60px;
    height:60px;
    translate: -257px -60px;
    transition: transform 0.2s, box-shadow 0.2s;
}

#arrowL:hover, #arrowR:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 15px 0px white;
}

#selectOC {
  margin-top: auto;
  height: 60px;
  width: 520px;
  
  justify-content: flex-start;
}

#arrowR {
    background:url(/images/arRight.png) no-repeat;
    cursor:pointer;
    border:none;
    width:60px;
    height:60px;
    translate: 257px -60px;
    transition: transform 0.2s, box-shadow 0.2s;
}
  
#sel {
  margin-top: auto;
  height: 60px;
  width: 520px;
  display: flex;
  justify-content: flex-start;
  list-style: none;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-behavior: smooth;
  translate: -40px;
  cursor:pointer;
}

#sel>a:hover {
  filter: brightness(1.2);
}

#sel1 {
  margin: auto;
  height: 60px;
  width: 520px;
  overflow-x: hidden;
  overflow-y: hidden;
  }
  
#Middle {
  margin: -35px 0px;
  padding-top: 10px;
  display: flex;
  
}

#lside {
  width: 700px;
}

#bigcard {
  background-color: #7AE89B;
  padding: 25px 25px 25px 25px;
  height: auto;
  width: auto;
  background-image: url(/images/dotpattern.png);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 25px;
  margin-left: 15px;
  border: #145900 solid 5px;
}

#noticeINDEX {
  background-color: #FE6;
  padding: 5px 5px 5px 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 25px;
  border: #000 solid 5px;
  width: 230px;
}
  
#bccol {
  display: inline-flex;
}
  
#BCleft {
 width: 210px;
 text-align: center;
 display: inline-block;
 
}

#BCright {
 width: 400px;
 justify-content: flex-end;
 padding-left: 10px;
 display: inline-block;
}

#latest {
  background-image: url(/images/tilepattern.png);
  background-size: 18px 18px;
  background-color: white;
  image-rendering: crisp-edges;
  padding: 10px 10px 10px 10px;
  color: #3A4AA3;
  font-family: 'Segoi', sans-serif;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  border: 5px solid #3A4AA3;
  margin-bottom: 25px;
  margin-left: 25px;
  margin-right: 25px;
  text-align: left;
}
  
#quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  margin-bottom: 5px;
  
}
  
#quicklinks>a:hover {
  filter: brightness(1.5);
}
  
#welcome {
  font-family: 'doppio one', sans-serif;
  height: auto;
  margin-bottom: 25px;
}
  
#side {
  margin: 0px 0px;
  width: 300px;
  height: auto;
  list-style-type: none;
  display: inline-block;
  
}
  
#sidecontenttitle {
  background-image: url(/images/checkerpattern.png);
  background-size: 17px 17px;
  background-color: #004475;
  image-rendering: crisp-edges;
  font: 17px Arial;
  font-weight: bold;
  color: white;
  border: 3px solid black;
  text-align: center;
  line-height: 2;
  height: auto;
  width: 245px;
}

#sidecontenttitleNW {
  background-image: url(/images/checkerpattern.png);
  background-size: 17px 17px;
  background-color: #004475;
  image-rendering: crisp-edges;
  display: inline-block;
  font: 17px Arial;
  font-weight: bold;
  color: white;
  border: 3px solid black;
  text-align: center;
  line-height: 2;
  height: auto;
}
  
#legacycarrd {
  background-color: #4C6FB3;
  image-rendering: crisp-edges;
  display: inline-block;
  font: 17px Arial;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 4;
  border-radius: 20px;
  width: 170px;
  background-position: center;
  text-decoration: none;
  transition: background-color 0.25s;
}
  
#legacycarrd:hover {
  background-color: #725BA7;
}
  
#Rstatus {
  background-repeat: no-repeat;
  background-size: auto;
  object-fit: scale-down;
  height: auto;
  width: 250px;
  margin-bottom: 25px;
  line-height: 0.3;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

#status {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  line-height: 0;
  margin-bottom: 25px;
  
}

#artwork {
  background-repeat: no-repeat;
  background-size: auto;
  object-fit: scale-down;
  height: auto;
  width: 250px;
  margin-bottom: 25px;
  line-height: 0.3;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
  
#flipnote {
  height: auto;
  width: 250px;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  line-height: 0;
}
  
#fakead {
  background-repeat: no-repeat;
  background-size: auto;
  object-fit: scale-down;
  height: auto;
  width: 250px;
  line-height: 0.3;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

#ConstructionZone {
  background-repeat: no-repeat;
  background-size: auto;
  object-fit: scale-down;
  height: auto;
  width: 250px;
  line-height: 0.3;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
  
#WIPmiddle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
  
#cenim {
  margin-left: auto;
  margin-right: auto;
}
  
#UpMiddle {
  padding-left: 25px;
  padding-right: 25px;
  font-family: 'Segoi', sans-serif;
}
  
#UpTable {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
  
#UpTable, #UpTableCON {
  background-image: url(/images/tilepattern.png);
  background-size: 18px 18px;
  background-color: white;
  image-rendering: crisp-edges;
  border: 3px solid #3A4AA3;
  border-collapse: collapse;
  padding: 10px 10px 10px 10px;
  
}
  
  #OCZcolumn {
    margin-top: -25px;
    padding-left: 25px;
    padding-right: 25px;
    display: inline-flex;
  }
  
  #OCZleft {
    width: 570px;
    padding-right: 25px;
    font-family: 'russoone-regular';
  }
  
  #OCZdescard {
    background-image: url(/images/dotpattern.png);
    width: 555px;
    padding: 1px 20px 20px;
    border: 5px solid black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
  
  #OCZinterGal {
    padding-left: 25px;
    padding-right: 25px;
  }
  
  #OCZgalim>button {
    height: 110px;
    width: 110px;
    display: inline-block;
    margin: 3px;
    border: 5px solid black;
    cursor:pointer;
  }
  
  #OCZgalim>button:hover {
    border-color: red !important;
  }
  
  #OCZright {
    width: 280px;
    padding-left: 50px;
    padding-right: 50px;
    display: inline-block;
  }
  
  #OCZinfobox {
    width: 270px;
    border-radius: 10px;
    padding: 5px 5px 5px 5px;
    display: inline-flex;
    flex-direction: column;
  }
  
  #OCZibIMG {
    background-image: url(/images/checkerpattern.png);
    image-rendering: crisp-edges;
    background-size: 10px 10px;
    border-radius: 7px 7px 0px 0px;
    
  }
  
  #OCZimgtext {
    background-color: black;
    color: white;
    position: relative;
    top: -20px;
    padding-top: 7px;
    padding-bottom: 7px;
    left: -5px;
    width: 280px;
    
  }
  
  #OCZibDes {
    padding-bottom: 8px;
    padding-top: 20px;
    margin-top: -45px;
  }
  
  #OCZtb01 {
    background-color: black;
    padding-top: 7px;
    padding-bottom: 7px;
  }
    
  #OCZtrivia {
    background-image: url(/images/dotpattern.png);
    background-color: white;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
    line-height: 21px;
    border: 5px solid black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
  
  #aw {
    height: auto;
    margin-top: -30px;
  }
  
  #abbio {
    display: flex;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  #abport {
    height: 300px;
    width: 300px;
    padding-right: 50px;
  }
  
  #Abdrop {
   cursor:pointer;
   background-color: black;
   height: auto;
   color: lime;
   padding-left: 10px;
   margin-left: 25px;
   margin-right: 25px;
   border-radius: 20px 20px 20px 20px;
   font: 30px Arial;
   text-align: left;
   
  }
  
  #interests>div {
   font-family: 'russoone-regular'; 
  }
  
  #interests {
   font-family: 'russoone-regular'; 
  }
  
  #Abdrop>details {
   width: 930px;
  }
  
  #InterCon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  list-style: none;
  line-height: 0;
  padding-bottom: 15px;
  margin-top: 0px
  }
  
  #InterCon>img {
  height: 150px;
  }
  
  #InterConM {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  list-style: none;
  line-height: 0;
  padding-bottom: 15px;
  margin-top: 0px
  }
  
  #InterConM>img {
  height: 111px;
  }
  
  #PageTitle {
  font-family: 'russoone-regular';
  
  text-shadow: -2px -2px 10px #000, 2px -2px 10px #000, -2px 2px 10px #000, 2px 2px 10px #000;
  background-image: url(/images/checkerpattern.png);
  background-size: 34px 36px;
  
  image-rendering: crisp-edges;
  line-height: 0px;
  
  
  }
  
  #StickyText {
    position: fixed;
    bottom: 0;
    background-color: yellow;
    border: 3px solid #000000;
    line-height: 23px;
    font-weight: bold;
    width: 998px;
  }
  
  #Gal_Section {
  margin: 25px 25px -20px 25px;
  }
  
  #Gal_year {
   background-color: black;
   color: white;
   font-family: 'russoone-regular';
   letter-spacing: 5px;
   border-radius: 20px 20px 0px 0px;
   box-shadow: 5px 5px 10px black;
  }
  
  #Gal_artainer {
   background-color: #85349E;
   margin-top: auto;
   padding: 6px;
   background-image: url(/images/dotpattern.png);
   box-shadow: 5px 5px 10px black;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
  }
  
  #Gal_thumb {
   border: 5px solid #000000;
   object-fit: contain;
   height: 170px;
   width: 170px;
   cursor:pointer;
   background-color: black;
  }
  
  #Gal_thumb:hover {
   transform: scale(1.05);
   filter: brightness(1.2);
   transition: transform 0.2s, filter 0.2s;
  }
  
  #Gal_b {
    border: none;
    background: none;
  }
  
  #Gal_pu>div {
  display: none;
  position: fixed;
  z-index: 1; 
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
  padding-top: 0px;
  
  }
  
  #Gal_close {
  color: white;
  cursor:pointer;
  font-size: 70px;
  translate: 12px;
  height: 51px;
  line-height: 40px;
  }
  
  @media only screen and (max-width: 1100px) {
  #Gal_close {
    font-size: 100px;
    margin-top: 32px;
   }
  }
  
  #Gal_close:hover {
   transform: scale(1.3);
   transition: transform 0.2s;
   
  }
  
  #Gal_art>img {
   object-fit: contain;
   height: 100%;
   width: 100%;
   cursor: zoom-in;
  }
  
  #Gal_art>video {
   object-fit: contain;
   height: 100%;
   width: 100%;
  }
  
  #Gal_art {
   
  }
  
  #Gal_puM {
  display: inline-flex;
  Margin-left: 200px;
  Margin-right: 200px;
  margin-top: 10px;
  max-height: 96%;
  bottom: 0px;
  position: relative;
  height: 100%;
  }
  
  @media only screen and (max-width: 1100px) {
  #Gal_puM {
    display: grid;
    justify-content: center;
    Margin-left: 20px;
    Margin-right: 20px;
   }
  }
  
  #Gal_desbox {
   background-color: #111428;
   color: white;
   border: 3px solid white;
   min-width: 350px;
   border-radius: 20px 20px 20px 20px;
   max-width: 350px;
   padding-left: 5px;
   padding-right: 5px;
   height: 100%;
  }
  
  @media only screen and (max-width: 1100px) {
  #Gal_desbox {
      max-width: none;
      font-size: 200%;
      padding-left: 50px;
      padding-right: 50px;
   }
  }
  
  #GA_innerpic {
  width: 80%;
  height: auto;
  border:  solid white 1px;
  margin-top: 20px;
  margin-left: 35px;
  margin-bottom: 20px;
  display: flex;
  }
  
  @media only screen and (max-width: 1100px) {
  #GA_innerpic {
  margin-top: 60px;
  margin-left: 77px;
  }
  }
  
  #Cms_MS1 {
    height: 230px;
    display: flex;
    justify-content: center;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  #Cms_Status {
    height: 100%;
    width: 520px;
  }
  
  #Cms_momentotruth{
    font-size: 70px;
    line-height: 0px;
    text-shadow: -2px -2px 10px #000, 2px -2px 10px #000, -2px 2px 10px #000, 2px 2px 10px #000;
    
  }
  
  #Cms_MS2{
    display: flex;
    margin-top: 50px;
  }
  
  #Cms_KF{
    width: 60%;
    height: 100px;
    border-radius: 10px 10px 10px 10px;
    margin-left: 40px;
    display: flex;
    font-family: 'russoone-regular';
    line-height: 28px;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
  }
  
  #Cms_KF:hover {
   transform: scale(1.1);
   transition: transform 0.2s;
   
  }
  
  #Cms_KF_icon{
    height: 100%;
    width: 30%;
  }
  
  #Cms_dos{
    background-color: #7ce97e;
    background-image: url(/images/dotpattern.png);
    font-family: 'russoone-regular';
    font-size: 18px;
    text-align: left;
    margin-left: 40px;
    margin-top: 19px;
    line-height: 21px;
    padding: 1px 10px 1px 19px;
    border: green solid 5px;
    box-shadow: 5px 5px 10px black;
  }
  
  #Cms_donts{
    background-color: #ff7575;
    background-image: url(/images/dotpattern.png);
    font-family: 'russoone-regular';
    font-size: 18px;
    text-align: left;
    margin-left: 40px;
    margin-top: 19px;
    line-height: 21px;
    padding: 1px 10px 1px 19px;
    border: #860606 solid 5px;
    box-shadow: 5px 5px 10px black;
  }
  
  #Cms_maybes{
    background-color: #bbbecc;
    background-image: url(/images/dotpattern.png);
    font-family: 'russoone-regular';
    font-size: 18px;
    text-align: left;
    margin-left: 40px;
    margin-top: 19px;
    line-height: 21px;
    padding: 1px 10px 1px 19px;
    border: #291562 solid 5px;
    box-shadow: 5px 5px 10px black;
  }
  
  #Cms_simulation{
    font-family: 'russoone-regular';
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px 10px 10px 10px;
    padding: 15px;
    box-shadow: 5px 5px 10px black;
  }
  
  #CMS_Simulated_art{
    background-image: url(/images/ComSim_04_bg.png);
    background-position: center;
    height: 170px;
    border: white solid 5px;
    padding: 6px;
    width: fit-content;
    margin: auto;
    box-shadow: 5px 5px 10px #00000080;
    display: flex;
  }
  
  #CMS_Simulated_art>img{
    height: 100%;
  }
  
  #CMS_SA_buttons{
   margin: 10px;
  }
  
  #CMS_SA_buttons>button{
   width: 90px;
   border: black solid 3px;
   background-color: white;
   font-family: 'russoone-regular';
   cursor: pointer;
  }
  
  #CMS_SA_buttons>button:hover {
   transform: scale(1.05);
   transition: transform 0.2s;
  }
  
  #Cms_contact{
    background-color: white;
    padding: 6px;
    margin: 30px 30px 30px 40px;
    border-radius: 16px;
    border: black solid 4px;
    font-size: 19px;
    font-family: 'russoone-regular';
    text-align: left;
    box-shadow: 5px 5px 10px black;
  }