body {
    margin: 0;
    padding: 0;
    font-family: "Exo 2", sans-serif;
     background-color: #111112;
}
p {
    color: #d0cce3;
}
h1,h2,h3,h4{
    color:white;
}
h1{
    font-size: 3rem;
    margin-bottom: 0;
}
i{
    font-size: 1.5rem;
}
.opener{
    margin-bottom: 5rem;
    margin-top: 5rem;
}
ul {
    color: white;
}
.container{
    padding: 0, 10rem;
    width: 85%;
    margin: auto;
    max-width: 85rem;
}
.holder {
    padding: 0, 10rem;
    width: 85%;
    margin: auto;
    max-width: 85rem;
}
.project-image{
    width: 12rem;
    height: 7rem;
    border-radius: 2%;
    transition: 0.2s ease-in-out;
}

.project-table-image {
    width: 10rem;
    height: 5rem;
    margin-top: 2rem;
}

.project-card:hover {
    transition: 0.2s ease-in-out;
    border: 1px solid white;
    border-radius: 5px;
    padding: 0.7rem;
    box-shadow: 2px 2px 10px #262729;
}

.project-image:hover {
    border: 1px solid #7ce0eb;
}
.horizontal-list {
    display: flex;
    flex-flow: row wrap;
    width: fit-content;
    list-style: none;
    padding: 0;
    max-width: 85%;
}
.horizontal-list li{
    padding: 0.5rem;
}
.horizontal-list li:hover{
    color:aquamarine;
}
.horizontal-list a:visited{
    color: inherit
}
.horizontal-list a{
    color: white;
}
.card-flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.card-flex div:last-child{
    width: 70%;
}
.skills-list li {
    color: #7ce0eb;
    background-color: rgba(0, 186, 0, 0.1);
    margin: 0.5rem;
    width: fit-content;
    border-radius: 10%;
    font-size: 0.8rem;
}
.experience-sec{
    margin-top: 8rem;
}
.resume {
    text-decoration: none;
    color: #d0cce3;
}
.resume:hover{
    transition: 0.2s ease-in-out;
    color: cadetblue;
}
.arrow-link {
    position: relative;
    padding-right: 15px; /* Adjust padding as needed to accommodate the arrow */
}

.arrow-link::after {
    content: "\2197"; /* Unicode for a diagonal arrow (top-right) */
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 12px; /* Adjust size of arrow */
    color: white;; /* Adjust color */
}
.projects-sec{
    margin-top: 8rem;
    margin-bottom: 5rem;
}

.transition-fade {
    animation: transitionright 1.5s;
    transform-origin: right;
}

.transition-fade-down {
    animation: transitionIn 1.5s;
    transform-origin: left;
}

@keyframes transitionIn {
    from {
        opacity: 1;
        transform: translateY(-50%);
    }

    to {
        opacity: 1;
    }
}

@keyframes transitionright {
    from {
        opacity: 1;
        transform: translateX(50%);
    }

    to {
        opacity: 1;
    }
}
footer{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    max-width: 85rem;
    margin: auto;
}
footer p{
    font-size: 0.7rem;
    margin: auto 0;
}
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    z-index: -999;
}
label{
    color: white;
}
.form {
    background-color: #0d0f12;
    width: fit-content;
    padding: 2rem;
    border-radius: 2%;
    box-shadow: 2px 2px 10px grey;
    z-index: 99999;
    margin: 1rem;
}
.pop-up{
    display: none;
}
.pop-up-create {
    display: none;
}

.form input[type=email], input[type=password], input[type=text], input[type=url], input[type=number], input[type=date]{
    background-color:#15171a;
    padding: 0.5rem;
    width: 19rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 2px;
    color: white;
}
textarea {
    background-color: #15171a;
    padding: 0.1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 2px;
    color: white;
    min-height: 200px;
    min-width: 300px;
}
.form h3{
    width:fit-content;
    margin: auto;
    font-size: 1.5rem;
}
.form .cancel-update-button {
    background-color: navajowhite;
    width: 70%;
    padding: 0.4rem;
    margin-left: 3rem;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
    transition: 0.2s ease-in;
}
.form .submit-button{
    width: 70%;
    padding: 0.4rem;
    margin-left: 3rem;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
    background-color: #334345;
    color: white;
    transition: 0.2s ease-in;
}
.submit-button {
    width: 70%;
    padding: 0.4rem;
    margin-left: 3rem;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
    background-color: #334345;
    color: white;
    transition: 0.2s ease-in;
}
.form input[type=submit]:hover {
    border: 1px solid white;
}
input[type=file] {
    color: white;
    margin: 0.7rem 0;
}
.active {
    padding-right: 7rem;
    font-size: 1.1rem;
    color: blue;
    transition: ease-in-out;
}
.active > a {
    color: peachpuff;
}

.navigation{
    list-style: none;
}

a:visited{
    color: white;
}
.navli a {
    transition: ease-in-out;
    text-decoration: none;
    color: white;
}
.navli {
    transition: ease-in-out;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid white;
    width: fit-content;
}
.navli a:hover {
    text-decoration: none;
    color: peachpuff;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}
footer  button {
    width: fit-content;
    background-color: rgba(0, white, 0, 0.3);   
}
td {
    color: white;
    font-size: 0.9rem;
    margin: 5rem 5rem;
    padding: 0.8rem;
}
tr {
    border-bottom: 1px solid #333230;
  
}

table {
    width: 100%;
    margin: 3rem auto;
    border-collapse: collapse;
    width: 100%;
}
.add-button td{
    padding-bottom: 1.5rem;
}
.formcontainer {
   display: none;
}
.show-form {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 90%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-top: 5rem;
}
.fa-trash{
    color: indianred;
}
.delete-confirm {
    width: 50%;
    height: 10rem;
    margin: auto;
    box-shadow: 2px 2px 10px grey;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 25%;
    top: 25%;
    background-color: #111112;
}
.cancel-button {
    padding: 0.5rem;
    border-radius: 10%;
    margin-left: 30%;
}
.delete-button {
    padding: 0.5rem;
    background-color: #d91431;
    border-radius: 10%;
    color: white;
}
.hide-form{
    display: none;
}
.p-name{
    color: lightblue;
}
.activate {
    color: white;
    padding: 0.3rem;
    background-color: darkslateblue;
    border-radius: 10%;
}
.flex-tech{
    display: flex;
}
.flex-tech div{
    margin: 0.5rem;
}

details {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1rem 2rem;
    margin: 10px 0;
    width: fit-content;
    min-width: 40%;
}

summary {
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    padding: 5px;
    color: white;
}

summary::marker {
    color: mediumpurple; /* Custom color for the marker */
}

details[open] summary {
    color: mediumpurple;
}
/*Bigger than 1168px */
@media (min-width: 1168px) {
    .container{
        display: flex;
        justify-content: space-between;
    }
    .about{
        margin: auto;
    }
    .opener{
        width: 40%;
        position: fixed;
    }
    .second-half {
        width: 55%;
        font-size: 0.9rem;
        margin-left:auto;
        margin-top: 6rem;
    }
    .card-flex {
        font-size: 0.9rem;
    }

    .card-flex div:last-child {
        width: 70%;
    }
    .project-image {
        width: 10rem;
        height: 5rem;
        margin-top: 2rem;
    }
   
   
}
/*Smaller than 780px */
@media (max-width: 780px) {
    .card-flex{
        flex-flow: column;
        justify-content: center;
    }
    .navigation{
        display: none;
    }
   
}

/*Smaller than 1000px */
@media (max-width: 1000px){
    .hide-row {
        display: none;
        background-color: red;
    }
}
@media (max-width: 800px){
    .hide-more {
        display: none;
        background-color: red;
    }
}
/*Smaller than 1000px */
@media (max-width: 1168px) {
    .navigation {
        display: none;
    }
}