* {
    padding: 0;
    font-size: .97em;
    list-style: none;
    text-decoration: none;
}
/*
html, body, * {
  cursor: none !important;
}
*/

html {
  background-color: #ffffff;
}

canvas {
  position: fixed;   /* stays in place even while scrolling */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;        /* behind content */
}

body {
  overflow-x: hidden;
  overflow-y: visible;
  font-family: "Space Mono", monospace;
  word-spacing:-0.2em;
  letter-spacing: 0.06em;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

section {
  display: flex;
  scroll-snap-align: start;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative; /* creates a stacking context */
  z-index: 1; 
}

#container{
    position: absolute;
    width:100%;
}

p {
  margin-top: 0;
}

::-webkit-scrollbar {
  display: none;
}

.head {
  text-align: center;
  padding: 30px;
}

.foot{
  text-align: center;
  padding: 30px;
}

.nav {
  text-align: center;
  position: relative;
  z-index: 2000;
  color: #333333;
  padding: 10px;
}

.viewer-container { width: 700px; height: auto; }

li {
  display: inline;
  padding: 0px 0px 0px 0px;
}

.card {
  padding:0;
}

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;  
  margin: 0;
}

.infprj {
  width: 222px;
  margin-bottom: 10px;
  padding-left: 2px;
  display: block;
}

.infprj p {
  margin-bottom: 10px;
  display: inline;
  background-color: #00000028;
  }

div {
  position: relative;
}

.ind-head {
position: absolute;
top: 50%;
left: 47%;
font-size: 160%;
}

h1{
  font-family: "Anton SC", sans-serif;
  font-optical-sizing: auto;
  color: #0044ff;
  word-spacing:-0.1em;
  font-size: 8em;
  font-weight: normal;
  line-height: 0.9em;
  font-style:oblique;
  margin: 0 auto;
  width: 33%;

}

h2{
  font-family: "Anton SC", sans-serif;
  margin-top: 25px;
  word-spacing:-0.3em;
  font-size: 1.4rem;
  line-height: 0.9em;
  font-weight: 100;
  color: #0044ff;
}

.active {
  background: chocolate;
  display: inline;
  padding: 5px;
  border-radius: 5px;
}

.nav p {
  color: #333;
  line-height: 0.87em;
}

.nav a {
  color: #333;
}

.nav a:hover {
  color: #fff;
  text-decoration: underline;
}
.nav a:visited {
  color: #333;
}

.ind-container {
  position: relative;
  height: 100vh;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

   ::selection {
        background-color: none; /* Change the background color of the selection */
        color: chocolate; /* Change the color of the selected text */
        border-bottom: #222 1px dotted;
    }

    /* For Firefox compatibility, use ::-moz-selection */
    ::-moz-selection {
        background-color: none;
        color: chocolate;
        border-bottom: #222 2px dotted;
    }


.content {
  columns: 3;
  padding: 60px;
  margin: 0 auto;
  width: 750px;
}

.c_area_hero {
  columns: 1;
  border-radius: 5px;
  padding: 1px 1px 1px 44px;
  padding-top: 4em;
}

.c_area_2 {
  columns: 2;
  padding: 20px;
  margin: 0 auto;
  width: 35%;
}

.c_area_3 {
  columns: 3;
  padding: 20px;
  margin: 0 auto;
  width: 70%;
  color: #FFF;
  background-color: #000;
  border-radius: 10px;
}

.c_area_4 {
  columns: 1;
  margin: 0 auto;
  width: 35%;
}

@media only screen and (max-width: 900px) {

.c_area_hero{
margin: auto;
padding: 20px;
}
  .c_area_2, .c_area_3, .c_area_4 {
  columns: 1;
  width: 100%;
  border-radius: 0px;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

h1 {
  line-height: 1em;
  font-size: 5em;
  margin-bottom: -100px;
}
body {
    font-size: 0.7rem;
    max-width: 100%;
    
  }

  .slider-container {
  height: 350px;
  padding: 10px;
  overflow: visible;
  position: relative;
}

  section {
  display: flex;
  scroll-snap-align: start;
  justify-content: center;
  align-items: center;
  height: auto;
  overflow-x: clip;
}

  .clickable-image {
    pointer-events: none;
    border-radius: 0;
  }


.slider::-webkit-scrollbar{
  display: none;
}


.slide img {
  width: auto;
  display: block;
}
.infobox {
  display: inline-block;
  padding: 5px;
   width: 100%;
  clear: both;
}

.content {
  columns: 1;
  padding: 20px;
  width: 100vw;
}
.info {
  padding:10px;
}

section button.next {
  position: absolute;
  font-size: 2.6em;
  border-radius: 5px;
  margin-top: 5px;
  padding: 10px;
  color: chocolate;
  background-color: #ffffff00;
  -webkit-text-stroke: 0.7px #e7e7e7;
  border: none;
  z-index: 2001;
}

form {
  display: grid;
  grid-template-columns: 1fr;
}

p {
  font-size: 1.5em;
}

}


.clickable-image {
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

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

.modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  pointer-events: none; /* So clicks pass through image to modal */
}

.slider-container {
  height: 350px;
  padding: 10px;
  overflow: visible;
  position: relative;
  margin-bottom: 10px;
  
}

.slider {
  display: flex;
  gap: 10px;
  height: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
}

.slide {
  height: 100%;
  flex: 1 0 auto;
  display: flex;
  align-items: top;
  justify-content: center;
}

.slide-number {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: .7em;
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 1);
  padding: 4px;
  border-radius: 5px;
  pointer-events: none; /* allows clicks to pass through */
}

hr {
  width: 6%;
  background-color: #FFF;
  height: 10px;
  border: none;
}

.slide img {
  height: 100%;
  width: auto;
  display: block;
}

.infobox {
  display: block;
  height: auto;
  width: auto;
  padding: 5px;
  border-radius: 10px;
}

section button.next {
  position: absolute;
  color: #ececec;
  font-weight: 400;
  font-size: .96em;
  border-radius: 5px;
  margin-top: 5px;
  padding: 10px;
  border: none;
  z-index: 2001;
  cursor: pointer;
  background-color: #333333;
}
section button.next:hover {
  color: #e7e7e7;
}

#button {
   color:chocolate;
}

.info {
  padding:10px;
}

.sn-inline {
  position: relative;
  font-size: .7em;
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 1);
  padding: 4px;
  border-radius: 5px;
  pointer-events: none; /* allows clicks to pass through */
}

input,
select,
textarea {
  font:inherit;
}

form {
  display: grid;
  grid-template-columns: 1fr;
}

label {
  text-transform: uppercase;
  font-size: .7rem;
}

input {
  background-color: #333;
  color: #e7e7e7;
  width: 100%;
  border-radius: 5px;
}

textarea {
  background-color: #333;
  color: #e7e7e7;
  width: 100%;
  border-radius: 5px;
}