mainpage/style.css

@font-face {
  font-family: "Futura";
  src: url("./FuturaLT-Heavy.ttf") format("truetype");
}

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            height: 100vh;
            scroll-behavior: smooth;
            text-align: center;
            position: absolute;
            margin-top: 10px;
            font-family: "Futura";
            width: 100%; /* Full width */
        }
                
        .page {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            flex-direction: column; /* Stack children vertically */
        }
        
        #page1 {
            height: 100vh;
            background-color: #fff3f9;
            color: rgb(0, 0, 0);
        }

        .title{
          font-size: 120px;
          z-index: 1;
          color: #ff5a99;
        }

        #page2 {
            background-color: #ffa7c7;
            color: white;
        }

h2 {
  font-size: 25pt;
  z-index: 1
}

.glitch {
  position: relative;
  display: inline-block;
  animation: glitch 1.2s infinite steps(1); /* Instant snaps */
}

/* MAIN GLITCH (Subtler movements, more variations) */
@keyframes glitch {
  /* Normal state (longer pauses) */
  0%, 60%, 62%, 70%, 100% { 
    transform: translate(0) skew(0deg) scale(1);
    text-shadow: none;
  }
  /* Micro-glitch variations */
  2% {
    transform: translate(1px, -1px) skew(-2deg) scale(1.01);
    text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
  }
  5% {
    transform: translate(-1px, 1px) skew(1deg) scale(0.99);
    text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
  }
  15% {
    transform: translate(2px, 0) skew(-3deg) rotate(0.5deg);
  }
  25% {
    transform: translate(-1px, -1px) skew(2deg) scaleY(1.02);
  }
  35% {
    transform: translate(0, 1px) skew(-1deg) rotate(-0.3deg);
    text-shadow: 0 1px rgba(0, 255, 255, 0.5);
  }
  45% {
    transform: translate(1px, -1px) skew(1deg) scaleX(1.01);
  }
  55% {
    transform: translate(-2px, 0) skew(-2deg) rotate(0.2deg);
  }
  65% {
    transform: translate(0, -1px) skew(1deg) scaleY(0.98);
  }
  80% {
    transform: translate(1px, 1px) skew(-1deg) rotate(-0.1deg);
    text-shadow: -1px -1px rgba(255, 0, 255, 0.4);
  }
  90% {
    transform: translate(-1px, 0) skew(0.5deg) scale(1.005);
  }
}

/* PSEUDO-ELEMENTS (Subtle color splits) */
.glitch:before,
.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  animation: none; /* Disable smooth animations */
}

.glitch:before {
  color: rgba(0, 255, 255, 0.7); /* Cyan */
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
  transform: translate(-0.5px, -0.3px);
  animation: glitch-before 1.5s infinite steps(1);
}

.glitch:after {
  color: rgba(255, 0, 255, 0.7); /* Magenta */
  clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
  transform: translate(0.5px, 0.2px);
  animation: glitch-after 1.8s infinite steps(1);
}

/* Pseudo-element glitches (tiny offsets) */
@keyframes glitch-before {
  0%, 100% { transform: translate(-0.5px, -0.3px); }
  10% { transform: translate(-1px, 0) skew(1deg); }
  30% { transform: translate(0, -0.5px) scaleY(1.02); }
  50% { transform: translate(-0.7px, 0.2px) skew(-0.5deg); }
  70% { transform: translate(0.3px, -0.3px); }
}

@keyframes glitch-after {
  0%, 100% { transform: translate(0.5px, 0.2px); }
  20% { transform: translate(0.7px, -0.2px) skew(-0.3deg); }
  40% { transform: translate(0, 0.5px) scaleY(0.98); }
  60% { transform: translate(-0.3px, 0) skew(0.2deg); }
  80% { transform: translate(0.2px, 0.3px); }
}

.slidefadein {
    opacity: 0;
    transform: translateY(100px);
    animation: slideAndFade 0.5s ease-in-out forwards;
   }
 
   @keyframes slideAndFade {
    to {
     opacity: 1;
     transform: translateY(0);
    }
   }

footer{ 
  position: fixed; 
  bottom: 0px; 
  width:100%; 
  height: 75px;
  display: flex;
  justify-content: space-around;
}

              .background-arms {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  z-index: 0;
              }

              .sunken-arms {
                  width: 80vmin;
                  height: 80vmin;
                  max-width: 600px;
                  max-height: 600px;
                  opacity: 1; /* Subtle background appearance */
                  filter: 
                      drop-shadow(0.5px 0.5px rgba(255, 255, 255, 0.3))
                      drop-shadow(-0.5px -0.5px rgba(176, 62, 106, 0.3));
              }

              .sunken-arms svg {
                  width: 100%;
                  height: 100%;
              }

              /* Style for filled paths */
              .filled {
                  fill: #ffebf2;
                  stroke: #ffebf2;
                  stroke-width: 1.4;
                  stroke-linecap: round;
                  stroke-linejoin: round;
                  filter: 
                      drop-shadow(inset 0.5px 0.5px rgba(176, 62, 106, 0.3))
                      drop-shadow(inset -0.5px -0.5px rgba(255, 255, 255, 0.3));
              }

              /* Style for stroke-only paths (awns) */
              .stroked {
                  fill: none;
                  stroke: #ffebf2;
                  stroke-width: 1.4;
                  stroke-linecap: round;
                  stroke-linejoin: round;
                  filter: 
                    drop-shadow(inset 0.5px 0.5px rgba(255, 255, 255, 0.3))
                    drop-shadow(inset -0.5px -0.5px rgba(176, 62, 106, 0.3));
            }


.mission {
  color: #55052c;
}

.mission h1 {
  font-size: 50pt;
  margin-top: 5pt;
}

.mission p {
  font-size: 20pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}

.about {
  color: #55052c;
}

.about h1 {
  font-size: 50pt;
  margin-top: 5pt;
}

.about p {
  font-size: 20pt;
  margin-inline: 20pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}

.principals {
  color: #55052c;
}

.principals h1 {
  font-size: 50pt;
  margin-top: 5pt;
}

.principals p {
  font-size: 20pt;
  margin-inline: 20pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}

.project {
  color: #55052c;
}

.project h1 {
  font-size: 50pt;
  margin-top: 5pt;
}

.project p {
  font-size: 20pt;
  margin-inline: 20pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}


.neomorphic{
  background: #ffa7c7;
  box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
               2px 2px 20px rgb(255,90,153)
}

.neomorphic-i{
  background: #ffa7c7;
  box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
               1px 1px 15px rgb(255,90,153) inset

} 

.neomorphic2{
  background: #ffa7c7;
  box-shadow: -5px -5px 20px rgba(254,254,255,0.5),
               2px 2px 20px rgb(255,90,153)
}

.card {
  width: 800pt;
  height: auto;
  border-radius: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30pt;
}

.cards1 {
  width: 700pt;
  height: auto;
  border-radius: 40pt;
  display: flex;
  align-items: center;
  flex-direction: row; /* Changed from column to row */
  margin-top: 30pt;
  gap: 20px; /* Adds some space between image and text */
}

.cards2 {
  width: 200px;
  height: auto;
  border-radius: 40pt;
  display: flex;
  align-items: center;
  flex-direction: column;
}

ul {
  list-style-type: none;
}

li {
  padding: 10pt;
}

img {
  width: 160px;
  border-radius: 0 100px 100px 0;
  padding: 5px;
}

.info {
  display: flex;
  flex-direction: column;
}