* {
  box-sizing: border-box;
  text-decoration-line: none;
}




body{
    background-color: #0F084B;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #04000b;
    opacity: 0.7;
    animation: fadeIn 0.5s ease-in forwards; 
}

@keyframes fadeIn {
            to {
                opacity: 1; 
            }
        }

.intro{
    text-align: center;
    border-style: solid;
    border-radius:20px;
    margin-left: 30%;
    margin-right: 30%;
    margin-top:8%;
    color: #A6CFD5;
    background-color: #26408B;
    padding: 3%;

    background-color: #0D0221;

}

.visit{
    display: flex;
    justify-content: flex-end;
    margin-right: 1%;
    
}

.nav{
    position: sticky;
    top: 0;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    border-bottom-style: solid;
    background-color: #26408B;
    background-color: #0D0221;
    color: #C2E7D9;
    background-color: #04000b;
}

.nav * {
    box-sizing: content-box;
    padding-left: 3%;
    padding-right: 3%;
    text-decoration: none;
    border-color: #C2E7D9;
    border-style: solid;
    transition: color 0.5s ease;
    color: #C2E7D9;
    padding-top: 1%;
    padding-bottom: 1%;
    border-bottom-style: none;
    font-weight: 500;
}



.nav *:hover {
    color: #26408B;
    background-color: #d6e7c2;
    border-style:solid;
    border-color:#e5c2e7;
}


.nav-selected{
    border-style:solid;
    background-color: #C2E7D9;
    color:#26408B;
    opacity: 0.5;
    animation: fadeIn 0.5s ease-in forwards; 
}

.welcome{
    margin-top: 0%; 
    margin-bottom: 0%; 
    border: 10px; 
    border-style: solid; 
    border-top-style:none; 
    background-color: #04000b; 
    border-top-left-radius: 0%; 
    border-top-right-radius: 0%;
    border-color: #A6CFD5;
    margin-left: 12%;
    margin-right: 12%;
    text-align: center;
}

.welcome * {
    color: #A6CFD5;
}

.about-main{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 3%;
    border: 10px;
    border-style: solid;
    
    background-color: #26408B;
    border-color: #A6CFD5;
    color: #A6CFD5;
    padding: 3%;
    margin-left: 12%;
    margin-right: 12%;
    margin-bottom: 5%;
    background-color: #04000b;
}

.about-main * {
    width: 200px;
}

.main{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 3%;
    border: 10px;
    border-style: solid;
    
    background-color: #26408B;
    border-color: #A6CFD5;
    color: #A6CFD5;
    padding: 3%;
    margin-left: 12%;
    margin-right: 12%;
    margin-bottom: 5%;
    background-color: #04000b;
}

.card{
    display: flex;
    border-style: solid;
    align-items: center;
    
    border-radius: 20px;
    background-color: #26408B;
    border-color: #A6CFD5;
    color: #A6CFD5;
    margin-top: 3%;
    margin-bottom: 3%;
    width: 300px;
    height: 80px;
    transition: color 0.3s ease;
    transition: background 0.3s ease;
    
    
}

.card:hover {
    color:#26408B;
    background-color: #d6e7c2;
    scale: 110%;
    border-color: #e5c2e7;
}

.card:hover .card-pic {
   background-color:#26408B;
   border-color: #e5c2e7;
}

.card *{
  margin: 0%;
  padding: 5%;
  padding-top: 7%;
  padding-bottom: 7%;
}

.visit{
    display: block;
   width: 100%;
   text-align: center !important;
}

.card-pic {
    width: 40% !important;
    height: 100%;
    text-align: center;
    background-color: #C2E7D9;
    margin: 0px;
    border-radius: 20px;
    transition: background 0.4s ease;
}

.project-pic{
    border-style: solid;
    border-color: #C2E7D9;
}

.project-pic:hover{
    scale: 110%;
}

.project-link{
    color: #C2E7D9;
    text-decoration-line:underline;
}

.project-link:hover{
    color: #e5c2e7;
    scale: 110%;
}
.main:has(.project-link:hover) .project-pic{
    border-color: #e5c2e7;
}
.main:has(.project-link:hover){
    border-color: #d6e7c2;
    scale: 105%;
}


#hidden{
    color:#C2E7D9;
    margin-left: 12%;
    margin-right: 12%;
}

@media (max-width: 500px){
    .main {
        flex-direction: column;
        align-items: center;
    }

    .intro{
        margin-left: 10%;
        margin-right: 10%;
    }
}