.project-status{
    position: absolute;
    right: 5%;
}
.project-teamates{
    position: absolute;
    left: 20%;
    bottom: -20%;
}
.IMG_fit {
    width: 33%;
    object-fit: cover;
    float: left;
}
/* Dropdown styles */
/* Dropdown styles */
/* Dropdown styles */
.dropdown {
    position: relative;
    padding: 10px;
    color: #3498db;
}

.dropdown .content {
    display: none; /* Ensure the dropdown content is hidden by default */
    position: absolute;
    top: 100%; /* Position the dropdown below the parent */
    left: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    z-index: 12;
    min-width: 175px; /* Adjust width as needed */
}

.dropdown .content li {
    display: block; /* Ensure the list items are visible */
    padding: 5px 15px;
    text-decoration: none;
    color: #374054;
    height: 100%;
}

.dropdown .content li:hover {
    background-color: #f0f0f0; /* Add hover effect for better UX */
}

.dropdown:hover .content {
    display: block; /* Show the dropdown content when hovering over the parent */
    right: 0;
}

.dropdown:hover .content {
    display: block;
}

.pop-up{
    display: none; /*here ;adlsfja;lkdsjf;lajdsjfal;ksdjf;alkdsjfal;kdsfj*/
    position: fixed;
    top: 50%;
    right: -18%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 11; /* Ensure it appears above other elements */
    width: 35%;
    height: 100%;
}
.form-button{
    display: inline-block;
    color: #fff;
    padding: 15px 25px;
    border: 3px solid #fff;
    border-radius: 30px;
    transition: .5s ease all;
    background-color: #3498db; /* Add a background color for better visibility */
}
.form-button:hover{
    background-color: #2980b9; /* Darker shade on hover */
    color: #fff; /* Ensure text remains visible */
}
.close-form{
    z-index: 11;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: red; /* Change color for better visibility */
    background-color: white;
    font-size: 20px; /* Adjust size as needed */
    border-radius: 25%;
    transform: rotate(90deg);
}
.close-form:hover{
    color: darkred; /* Darker shade on hover */
}
.dark-mode{
    position: fixed;
    z-index: 11;
    top: 0%;
    right: 0%;
    width: 5.25%;
    height: 7.55%;
    color: rgb(255, 255, 0);
    background-color: #2980b9;
    border-radius: 0% 0% 0% 30%;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none; 
}
.dark-mode:hover{
    animation: glow 1s;
    animation-fill-mode: forwards;
}
.skill-box{
    position: fixed;
    left: 0;
    top: 10%;
    width: 40%;
    height: 80%;
    background-color: white;
    opacity: .9;
    z-index: 11; 
    display: none;
    overflow-y: auto; /* Allow scrolling if content overflows */
    box-shadow: #3498db 0px 0px 10px;
    border-radius: 0% 5% 5% 0%;
    border-color: #2980b9;
    border-width: 2px;
    border-style: solid;
    transition: all 0.3s ease; /* Smooth transition for showing/hiding */
    overflow: visible;
}
.skill-img{
    position: absolute;
    right: 10%;
    top: 15%;
    width: 80%;
    height: 40%;
    box-sizing: scale-down;
    border-color: #2980b9;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
}
.skill-p{
    position: absolute;
    top: 55%;
    width: 100%;
}
.skills:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.5);
}
#close-me{
    z-index: 12;
    position: absolute;
    top: 40%;
    right: -5%;
    cursor: pointer;
    color: darkblue; /* Change color for better visibility */
    background-color: white;
    font-size: 20px; /* Adjust size as needed */
    box-shadow: #3498db 0px 0px 10px;
    border-radius: 0% 5% 5% 0%;
    border-color: #2980b9;
    height: 20%;
}
#ai-section{
    position: fixed;
    right: -2.5%;
    bottom: 5%;
    width: 30%;
    height: 90%;
    border-radius: 5% 5% 5% 5%;
    border-color: #2980b9;
    border-width: 2px;
    border-style: solid;
    box-shadow: #3498db 0px 0px 10px;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 13;
    margin-right: 5%;
    display: none;
}
#ai-text{
    position: absolute;
    top: 15%;
    right: 5%;
    height: 20%;
    width: 90%;
    border-color: #479dbc;
    border-radius: 5px;
    resize: none;
}
#ai-title{
    position: absolute;
    top: 3%;
    left: 18%;
    font-size: 1.5em;
    color: #3498db; /* Add a color for better visibility */
    margin: auto 0;
    text-align: center;
}
#ai-button{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 90%;
    height: 10%;
    background-color: #3498db; /* Add a background color for better visibility */
    color: white; /* Ensure text is visible */
    border: none; /* Remove default border */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
}
#response{
    position: absolute;
    top: 33%;
    right: 5%;
    width: 90%;
    height: 48%;
    overflow-y: auto; /* Allow scrolling if content overflows */
    background-color: #f0f0f0; /* Light background for better readability */
    padding: 10px; /* Add some padding for better spacing */
    border-radius: 5px; /* Add rounded corners */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}
#acorn-button-inner{
    z-index: 11;
    position: fixed;
    right: 2.5%;
    bottom: 5%;
    width: 7.5%;
    height: 7.5%;
    border-radius: 20px;
    background-color: #3498db;
}
#ai-tree{
    animation: wiggle 0.5s;
}
#acorn-button-inner:hover #ai-tree{
    animation: shake 0.5s;
}
#notice{
    position: fixed;
    z-index: 11;
    bottom: 12%;
    right: 2.5%;
    display: block;
    animation: waitFadeOut 5s linear forwards;
}
#ai-helper-text{
    background: white;
    border-radius: 10px;
    border-style: solid;
    border-color: black;
}
#triangle{
    position: fixed;
    z-index: -1;
    right: 5%;
    bottom: 13.5%;
    height: 25px;
    width: 25px;
    background-color: white;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    transform: rotate(45deg);
}
#cert_block{
    color: white;
}
/* #test_div {
    background-color: black;
    position: fixed;
    top: 50%;
    right: 50%;
    height: 5%;
    width: 5%;
    z-index: 100;
}
#test_div:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.5)
} */
/* Animations Below */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
@keyframes wiggle {
    0% { transform: skewX(9deg); } 
    10% { transform: skewX(-8deg); } 
    20% { transform: skewX(7deg); } 
    30% { transform: skewX(-6deg); } 
    40% { transform: skewX(5deg); } 
    50% { transform: skewX(-4deg); } 
    60% { transform: skewX(3deg); } 
    70% { transform: skewX(-2deg); } 
    80% { transform: skewX(1deg); } 
    90% { transform: skewX(0deg); } 
    100% { transform: skewX(0deg); } 
 } 
@keyframes glow {
    0% {
      box-shadow: 0 0 10px -10px white;
    }
    100% {
      box-shadow: 0 0 10px 10px white;
    }
  }

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes comeUp{
    0% {}
}

@keyframes waitFadeOut {
    0%{
        opacity: 1;
        visibility: visible;
    }
    5% {
        opacity: 1;
        visibility: visible;
    }
    10% {
        opacity: 1;
        visibility: visible;
    }
    15% {
        opacity: 1;
        visibility: visible;
    }
    20% {
        opacity: 1;
        visibility: visible;
    }
    25% {
        opacity: 1;
        visibility: visible;
    }
    30% {
        opacity: 1;
        visibility: visible;
    }
    35% {
        opacity: 1;
        visibility: visible;
    }
    40% {
        opacity: 1;
        visibility: visible;
    }
    45% {
        opacity: 1;
        visibility: visible;
    }
    50% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;}
}