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

/*Basic Site CSS*/
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
        
  body {
    padding-top: 5%;
    display: grid;
    place-items: center;
    scroll-behavior: smooth;
    text-align: center;
    position: absolute;
    margin-top: 10px;
    font-family: "Futura";
    width: 100%; /* Full width */
    padding-bottom: 5%;
  }
                
  h2 {
    font-size: 25pt;
    z-index: 1
  }


    .card-list {
        display: flex;           
        flex-wrap: wrap;         
        gap: 20px;              
        padding: 0;              
        list-style-type: none;  
    }
    
    .card-list li {
        min-width: 200px;   
    }
    
    /* Optional: Responsive adjustments */
    @media (max-width: 800px) {
        .card-list {
            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;
}


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

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

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

  .no-break {
    white-space: nowrap;
  }



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

  .title{
    color: #ff5a99;
  }

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

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

  .title{
    color: #00d791;
  }

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

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