html {
  background-color: black;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0px, 200px);
  }
  to {
    opacity: 1; 
    transform: translate(0px, 0px);
  }
}

body {
  background-color: black;
  color: white;
  font-family: Cursive;
  
  overflow-y: scroll;
  background-size: cover;
  background-repeat: repeat;
}

.pixeltext {
  font-family: "Jersey 10", serif;
  letter-spacing: 0.05em;
}

.gridcontainer {
  display: grid;
  
  grid-template-areas:
  "out1 in out2"
  "out1 in out2";
}

.outcontainer1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.outcontainer2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.incontainer {
  animation: fadeIn 1s forwards;
  background: #000000;
  text-align: center;
}

.headcontainer {
  margin-left: 1.25em; 
  margin-right: 1.25em;
}

.bodycontainer {
  margin: 1.25em;
}

.footcontainer {
  display: grid;
  grid-template-areas:
  "deco1 deco1 layer1 deco2 deco2"
  "layer2 layer2 layer2 layer2 layer2";
  justify-content: space-evenly;
  align-items: center;
  margin-left: 2.5em; 
  margin-right: 2.5em;
}

.decocontainer1 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: .25em;
  width : auto;
  background-color: white;
  margin-bottom: .66em;
}

.decocontainer2 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: .25em;
  width : auto;
  background-color: white;
  margin-bottom: .66em;
}

.decocontainermiddle {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 3.5em;
  margin-bottom: .66em;
  width : auto;
}

#gallerylinks {
  display: grid;
  grid-template-columns: 1fr;
  text-align:center;
  justify-content: space-evenly;
  align-items: center;
  background-color: black;
  border-color: white;
  border-style: solid;
  border-width: .25em;
  padding: 1.33em;
  gap: 1.33em;
  transition: 0.5s;
}

.gl-inner {
  height: .125em;
  width: .35em;
  background-color: white;
}

#gl-button1 {
  height: 3.5em;
  transition: 0.5s;
}

#gl-button2 {
  height: 3.5em;
  transition: 0.5s;
}

#gl-button3 {
  height: 3.5em;
  transition: 0.5s;
}

#gl-button4 {
  height: 3.5em;
  transition: 0.5s;
}

#gl-button1:hover {
  height: 3.85em; 
}

#gl-button2:hover {
  height: 3.85em; 
}

#gl-button3:hover {
  height: 3.85em; 
}

#gl-button4:hover {
  height: 3.85em; 
}

a:link {
  color: yellow;
  text-decoration: none;
}

a:visited {
  color: yellow;
  text-decoration: none;
}

a:hover {
  color: yellow;
}

a:activated {
  color: yellow;
  text-decoration: none;
}

#gallery2026topframe {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#neonredcontainer1 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

#neonredcontainer2 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

#originalredstar1 {
  position: absolute;
  z-index: 5;
  opacity: 0;
}

#originalredstar2 {
  position: absolute;
  z-index: 5;
  opacity: 0;
}

.NewStar {
  animation: movestar 5s forwards;
}

@keyframes movestar {
  from {opacity: 0;}
  12.5% {opacity: 1;}
  50% {opacity: .25;}
  to {transform: translate(0px, 60px) rotate(270deg); opacity: 0;}
}

.gallery2026incontainer {
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 40, 1) 90%, rgba(0, 0, 0, 1) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  padding: 0;
  margin: 0;
}

@keyframes gallerytextfadein {
  from {
    font-size:3vh;
    opacity: 0;
    transform: translate(0px, -25px);
  }
  to {
    font-size:6.33vh;
    opacity: 1; 
    transform: translate(0px, 0px);
  }
}

#redbottomdiv {
  display: flex;
  justify-content: center;
}

#redcontainer1 {
  height:530px;
  width:400px;
  position:relative; 
  overflow:hidden;
  margin-top:2.75vw;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%,  rgba(0,0,0,0) 100%);
}

#redcontainer2 {
  height:530px;
  width:400px;
  position:relative; 
  overflow:hidden;
  margin-top:2.75vw;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%,  rgba(0,0,0,0) 100%);
}

#redmiddlecontainer {
  display: flex;
  align-items:flex-start;
  justify-content:center;
  
  margin: 3vw;
  height: 52.5vh;
  width: 37.5vw;
  text-align: center;
  border-color: #003066;
  border-style: double;
  border-width: .25em;
}

.gallerytextcontainer {
  transform: translate(0,-2.75em);
  
  height: 42vh;
  width: 37.5vw;
  position:absolute;
  padding:.5em;
  
  text-align: center;
  text-wrap: normal;
}

#redcontbackground {
  top:0;
  margin:0;
  padding:0;
  height: 52.5vh;
  width: 46.25vw;
  background: repeating-conic-gradient(#002033 0 25%, #000611 0 50%) 50% / 40px 40px;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); 
  left:0; 
  overflow:hidden; 
}

#redhomebutton {
  position: absolute;
  
  top: 87.125vh;
  
  right: 31.75vw;
  
  height: 8vh;
  width: 8vh;
  
  transition: 0.5s;
}

#redhomebutton img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
  
  height: 100%;
  width: 100%;
}

#redfullimages {
  position:absolute;
  
  top: 80vh;
  
  display: flex;
  align-items:center;
  justify-content:center;
  
  margin: 3vw;
  height: 8vh;
  width: 24vw;
  text-align: center;
  border-color: #0085ff;
  border-style: solid;
  border-width: .125em;
  border-radius: 1em;
  transition: 0.5s;
  
  font-size: 2.25em;
}

#redfullimages:hover {
  height: 9.25vh; 
  width: 26vw;
  
  font-size: 2.45em;
}

#redfullimages p {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#panelexit {
  opacity: 0;
  
  display: grid;
  align-items:center;
  justify-content:center;
  text-align:center;
  
  position:absolute;
  height: 7.5vh;
  width: 7.5vh;
  background-color:black;
  
  border-color: #ddd;
  border-style: solid;
  border-width: .125em;
  
  z-index:15;
  top: 9.8vh;
  right: 1.65vw;
  border-radius: 100em;
  
  font-size: 35px;
  font-family: monospace;
  padding:0;
  
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#artpanel {
  position:absolute;
  
  top: 7.5vh;
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:center;
  justify-content:center;
  
  background-color: black;
  
  margin: 3vw;
  
  padding: 0.5em;
  
  height: 2.5vh;
  width: 90vw;
  text-align: center;
  border-color: #ddd;
  border-style: double;
  border-width: .125em;
  border-radius:.33em;
  
  opacity: 0;
  
  z-index: 10;
  
  font-size: 2.25em;
  
  overflow-y: scroll;
}

.artpanelexitanimator {
  animation: OpenArtPanelExit .75s forwards;
}

.artpanelexitanimatorClose {
  animation: CloseArtPanelExit .75s forwards;
}

.artpanelanimator {
  animation: OpenArtPanel .75s forwards;
}

.artpanelanimatorClose {
  animation: CloseArtPanel .75s forwards;
}

@keyframes OpenArtPanel {
  from {
  opacity: 0;
  height: 2.5vh;
  }
  to {
  opacity: 1;
  height: 77.5vh;
  }
}

@keyframes OpenArtPanelExit {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}

@keyframes CloseArtPanel {
  from {
  opacity: 1;
  height: 77.5vh;
  }
  to {
  opacity: 0;
  height: 2.5vh;
  }
}

@keyframes CloseArtPanelExit {
  from {
  opacity: 1;
  }
  to {
  opacity: 0;
  }
}

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

::-webkit-scrollbar-track {
  opacity: 0;
  background: black;
}

::-webkit-scrollbar-corner {
  opacity: 0;
  background: black;
}
 
::-webkit-scrollbar-thumb {
  background: #777; 
  border-radius: 1em;
}

::-webkit-scrollbar-thumb:hover {
  background: white; 
  border-radius: 1em;
}

.photobanner {
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  position:absolute; 
  top:0; 
  left:0; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermove 15s linear infinite;
  mix-blend-mode: overlay;
}

.photobannerframe {    
  display: flex;
  margin: 0.5em 0;
  width:400px;
  height:300px;
  
  align-items:center;
  justify-content:center;
  
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.inpanelphotobannerframe {    
  display: grid;
  margin-left: 0.5em;
  margin-bottom:2.85em;
  width:400px;
  height:300px;
  
  align-items:center;
  justify-content:center;
  
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select:none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.artpanelcaption {
  text-align: left;
  padding-left: 0.25em;
  padding-right: 0.25em;
  
  transform: translate(0, 200px);
  height: 75px;
  width: 350px;
  border-style: double;
  border-width: 0.125em;
  border-color: #777;
  
  font-size: .6em;
  
  font-family: "Jersey 10", serif;
  letter-spacing: 0.05em;
  color: #ccc;
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(0, -2530px);
  }
}

.leavesL1 {
  animation: leavesSlideInL1 1s forwards;
}

.leavesL2 {
  animation: leavesSlideInL2 1s forwards;
}

.leavesL3 {
  animation: leavesSlideInL3 1s forwards;
}

.leavesR1 {
  animation: leavesSlideInR1 1s forwards;
}

.leavesR2 {
  animation: leavesSlideInR2 1s forwards;
}

.leavesR3 {
  animation: leavesSlideInR3 1s forwards;
}