mainpage/style.css

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

/*Basic Site CSS*/
  * {
    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 */
  }

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


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;
}

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

@keyframes glitch {
  0%, 60%, 62%, 70%, 100% { 
    transform: translate(0) skew(0deg) scale(1);
    text-shadow: none;
  }
  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);
  }
}

.glitch:before,
.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  animation: none;
}

.glitch:before {
  color: rgba(0, 255, 255, 0.7);
  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);
  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);
}

@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);
  }
}

  #page1 {
    height: 100vh;
  }

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

.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: 150pt;
  height: auto;
  border-radius: 30pt;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.sunken-arms {
    width: 80vmin;
    height: 80vmin;
    max-width: 600px;
    max-height: 600px;
    opacity: 1; /* Subtle background appearance */
}

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

/* Style for filled paths */
.filled {
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Style for stroke-only paths (awns) */
.stroked {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.project a:link {
  text-decoration: none;
}
.project a:visited {
  text-decoration: none;
}
.project a:hover {
  text-decoration: none;
}
.project a:active {
  text-decoration: none;
}

.project p {
  font-size: 20pt;
  margin-inline: 20pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}
.background-arms {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

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

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

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

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

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

.principals p {
  font-size: 20pt;
  margin-inline: 20pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}
  .no-break {
    white-space: nowrap;
  }



/*Light Color Themes*/
@media (prefers-color-scheme: light) {
:root{
  background-color: #fff3f9;
}

  #page1 {
    background-color: #fff3f9;
    color: rgb(0, 0, 0);
  }

  .title{
    color: #ff5a99;
  }

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

.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)
}

.mission {
  color: #55052c;
}
.about {
  color: #55052c;
}
.sunken-arms {
    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));
}

/* Style for filled paths */
.filled {
    fill: #ffebf2;
    stroke: #ffebf2;
    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 {
    stroke: #ffebf2;
    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));
}
.cards2 h2 {
  color: #060606;
}
.project {
  color: #55052c;
}

.project h1 {
  color: #060606;
}

.project a:link {
  color: #060606;
}
.project a:visited {
  color: #060606;
}
.project a:hover {
  color: #060606;
}
.project a:active {
  color: #060606;
}

.principals {
  color: #55052c;
}

}

/*Dark Color Themes*/
@media (prefers-color-scheme: dark) {
:root{
  background-color: #060606;
}
  #page1 {
    background-color: #060606;
    color: rgb(255, 255, 255);
  }

  .title{
    color: #00d791;
  }

  #page2 {
    background-color: #55052c;
    color: black;
  }

.neomorphic{
  background: #55052c;
  box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
               2px 2px 20px rgba(0, 215, 143, 0.425)
}

.neomorphic-i{
  background: #55052c;
  box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset,
               1px 1px 15px rgb(0, 0, 0) inset

} 

.neomorphic2{
  background: #55052c;
  box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
               2px 2px 20px rgba(0, 215, 143, 0.534)
}

.mission {
  color: #ffa7c7;
}
.about {
  color: #ffa7c7;
}
.sunken-arms {
    filter: 
        drop-shadow(0.5px 0.5px rgba(0, 0, 0, 0.3))
        drop-shadow(-0.5px -0.5px rgba(176, 62, 106, 0.3));
}

/* Style for filled paths */
.filled {
    fill: #000000;
    stroke: #000000;
    filter: 
        drop-shadow(inset 0.5px 0.5px rgba(176, 62, 106, 0.3))
        drop-shadow(inset -0.5px -0.5px rgba(0, 0, 0, 0.3));
}

/* Style for stroke-only paths (awns) */
.stroked {
    stroke: #000000;
    filter: 
      drop-shadow(inset 0.5px 0.5px rgba(0, 0, 0, 0.3))
      drop-shadow(inset -0.5px -0.5px rgba(176, 62, 106, 0.3));
}
.cards2 h2 {
  color: #fff3f9;
}

.project {
  color: #ffa7c7;
}
.project h1 {
  color: #fff3f9;
}
.project a:link {
  color: #fff3f9;
}
.project a:visited {
  color: #fff3f9;
}
.project a:hover {
  color: #fff3f9;
}
.project a:active {
  color: #fff3f9;
}

.principals {
  color: #ffa7c7;
}
}


/*Button Hover Animation*/
@media (prefers-color-scheme: light) {
.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;
  transition: all 0.1s ease-in-out;
  transform: scale(1);
  cursor: pointer;
  box-shadow: -5px -5px 20px rgba(254,254,255,0.5),
               2px 2px 20px rgb(255,90,153)
}

.neomorphic2:hover{
  background: #ffa7c7;
  transform: scale(0.98);
  box-shadow: -5px -5px 20px rgba(254, 254, 255, 0),
               2px 2px 20px rgba(255, 90, 153, 0)
}

.neomorphic2:active{
  background: #ffa7c7;
  transform: scale(0.96);
  box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
               1px 1px 15px rgb(255,90,153) inset
}
}

@media (prefers-color-scheme: dark) {
.neomorphic{
  background: #55052c;
  box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
               2px 2px 20px rgba(0, 215, 143, 0.425)
}

.neomorphic-i{
  background: #55052c;
  box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset,
               1px 1px 15px rgb(0, 0, 0) inset

} 

.neomorphic2{
  background: #55052c;
  transition: all 0.1s ease-in-out;
  transform: scale(1);
  box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
               2px 2px 20px rgba(0, 215, 143, 0.534)
}

.neomorphic2:hover{
  background: #55052c;
  transform: scale(0.98);
  box-shadow: -5px -5px 20px rgba(1, 1, 0, 0),
               2px 2px 20px rgba(1, 1, 0, 0)
}

.neomorphic2:active{
  background: #55052c;
  transform: scale(0.96);
  box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset,
               1px 1px 15px rgba(0, 215, 143, 0.425) inset
}
}