/* Mobile (Default) */
.about-me-grid {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-family: 'JetBrain Mono', Arial, Helvetica, sans-serif;
}

.introduction {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.introduction p {
    background-color: #00000054;
    border: 2px solid transparent;
    border-radius: 15px;
    padding: .5rem;
}
.donut {
    color: #04f03f; 
    font-family: monospace; 
    font-size: 8px; 
    line-height: 8px; 
    text-align: center; 
    font-weight: bold;
}

.about-education {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.education-item {
    border-left: 5px solid #04f03f;
    padding: .75rem;
    background-color: #00000050;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.about-techstack {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.techstack-display {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    justify-items: center;
}
.techstack-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5px auto;
    padding: .75rem;
    border: 2px solid white;
    border-radius: 10px;
    background-color: #00000050;
    transition: all 0.3s ease;
}
.icon-frame {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.techstack-item img {
    width: 5rem;
}

.about-projects {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.project-carousel {
    position: relative;
    display: flex;
    margin-top: -6rem;
    gap: 20px;
    align-items: center;
    width: 100%;
}
.project-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 2rem 0;
    scrollbar-width: none;
}
.project-track::-webkit-scrollbar {
    display: none;
}
.project-item {
    border: 2px solid #fff;
    border-radius: 20px;
    padding: .75rem;
    min-width: 100vw;
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.project-item:hover {
    position: relative;
    border-color: #04f03f;
    z-index: 10;
    transform: scale(1.05);
}
.project-item h3,
.project-item h4,
.project-item h5 {
    font-family: 'JetBrain Mono', Arial, Helvetica, sans-serif;
    color: #ffffff8c;
}

/* Ipad */
@media (min-width: 728px) {
    .techstack-display {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {

    .education-item:hover {
        border-left: 5px solid #ff0909;
        background-color: #000;
        transform: scale(1.1);
        z-index: 999;
    }

    .techstack-display {
        grid-template-columns: repeat(5, 1fr);
    }

    .techstack-item:hover {
        border-color: #04f03f;
        background-color: #000;
        transform: scale(1.1);
        z-index: 999;
    }

    .icon-frame {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-carousel-btn {
        display: block;
    }

    .project-item {
        min-width: 31.5vw;
    }
}