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

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

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


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


/*Table CSS*/  
td {
  text-align: center;
}

td img {
  height: 60px;
}

td {
  width: 500px;
    padding-top: 3px;
    padding-bottom: 2px;
}

img {
  border-radius: 10px 10px 10px 10px;
  padding: 5px;
}

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

table {
    margin: auto;
    width: 95%;
    border-collapse: collapse;
}

.table-titel {
  margin: 33px
}

table td {
    border-bottom: 1px solid #ff5a99;
}

.last-row td {
  border-bottom: none;
}

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

.title{
  color: #ff5a99;
}

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

h2 {
  color: #060606;
}

th {
  color: #55052c;
}

td {
  color: #55052c;
}

td a:link {
  color: #55052c;
  text-decoration: none;
}
td a:visited {
  color: #55052c;
  text-decoration: none;
}
td a:hover {
  color: #55052c;
  text-decoration: underline;
}

td a:active {
  color: #55052c;
  text-decoration: none;
}

}

/*Dark Color Themes*/
@media (prefers-color-scheme: dark) {
:root{
  background-color: #55052c;
}

.title{
  color: #00d791;
}

.neomorphic{
  background: #55052c;
  box-shadow: -5px -5px 20px rgb(0,215,145, 0.69),
               2px 2px 20px rgb(6,6,6)
}

h2 {
  color: #fff3f9;
}

th {
  color: #ffa7c7;
}

td {
  color: #ffa7c7;
}

td a:link {
  color: #ffa7c7;
  text-decoration: none;
}
td a:visited {
  color: #ffa7c7;
  text-decoration: none;
}
td a:hover {
  color: #ffa7c7;
  text-decoration: underline;
}

td a:active {
  color: #ffa7c7;
  text-decoration: none;
}

}