.project-video-container {
    margin-top: 12rem;
    display: flex;
    flex-direction: column;
}

.project-video-container iframe{
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 0 15px var(--main-color);
    border-radius: 20px;
    border: 1px solid var(--main-color);
}

.project-video-container p {
    margin-top: 1.5rem;
    font-size: 1.3rem;
    font-style: italic;
    text-align: center;
}

.home-details{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 56dvw;
}

.home-details-links{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.8rem;
    font-weight: 600;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
    width: fit-content;
}

.social-icons a {
    margin: 0;
}

.more-details-button{
    margin-left: auto;
    background: none;
    color: white;
    font-size: 1.5rem;
}

.more-details-button:hover{
    cursor: pointer;
}

.details-panel{
    max-height: 0;
    overflow: hidden;
    border: 2px solid var(--main-color);
    background: var(--second-bg-color);
    border-radius: 20px;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 0;
}

.details-panel.show {
    max-height: 500px;
    opacity: 1;
}

.details-panel .content{
    padding: 20px;
}

.details-panel .content-value{
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
}

.details-panel .property{
    font-size: 1.8rem;
    color: var(--main-color);
    font-weight: 600;
}

.details-panel .property-value{
    font-size: 1.5rem;
    align-content: center;
}

section{
    padding-top: 2rem;
}

section:nth-child(even){
    background: var(--bg-color);
}

section:nth-child(odd){
    background: var(--second-bg-color);
}

.about .about-content-container{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--bg-color);
    border: 2px solid var(--main-color);
    box-shadow: 0 0 10px var(--main-color);
    border-radius: 20px;
    padding: 2rem;
    transition: 0.3s ease-in-out;
}

.about .about-content-container:hover{
    box-shadow: 0 0 20px var(--main-color);
}

.about .about-content-box{
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 4rem;
}

.about .about-content-box:nth-child(odd){
    text-align: left;
}

.about .about-content-box:nth-child(even){
    text-align: right;
    flex-direction: row-reverse;
}

.about p{
    font-size: 2.2rem;
}

.about .about-last-para{
    padding: 20px;
}

.about img{
    width: 30dvw;
    border-radius: 20px;
    border: 1px solid var(--main-color);
}

.features h3{
    font-size: 5rem;
    color: var(--main-color);
    text-shadow: 0 0 2px var(--main-color);
    transition: 0.4s ease-in-out;
}

.features h3:hover{
    text-shadow: 0 0 10px var(--main-color);
    scale: 1.03;
}

.features .feature-category-list{
    border: 2px solid var(--main-color);
    border-radius: 20px;
    margin: 2rem auto 4rem auto;
    padding: 4rem;
    transition: 0.4s ease-in-out;
}

.features .feature-category-list:hover{
    background: var(--second-bg-color);
    box-shadow: 0 0 25px var(--main-color);
    scale: 1.03;
}

.features ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.features li{
    font-size: 2rem
}

.devlog {
    font-size: 2.2rem;
}

.footer{
    background: var(--bg-color);
}


@media(max-width: 950px){

    .home-details {
        width: 100%;
        margin-top: 8%;
    }

    .about .about-content-box{
        display: flex;
        flex-direction: column;
    }

    .about .about-content-box:nth-child(even){
        flex-direction: column;
    }

    .about p{
        text-align: left;
        hyphens: auto;
    }

    .about .about-last-para{
        padding: 2px;
    }

    .about img{
        width: 70dvw;
    }

    .features h3{
        font-size: 4rem;
        color: var(--main-color);
        text-shadow: 0 0 2px var(--main-color);
        transition: 0.4s ease-in-out;
    }
}