@media (max-width: 1420px) {

/**********/
/**info**/
/**********/
.title-container {
    max-width: 100%;
}


/*************/
/*projects*/
/*************/
#projects .project-list a {
flex-direction: column;
    
}

#projects a .stack .label {
    font-size: 12px;
}
#projects a h3 {
    font-size: 16px;
}

#projects a h3, #projects a .project-description, #projects a .stack {
    width: 100%;
            margin: 3px;
}
#projects a:hover .stack {
    top: 16%;
}

}









/* Under 1040px */
@media (max-width: 1039px) {
.container {
    max-width: 90%;
}

.side-nav {
    flex: 0 0 140px;
}

.side-nav a {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 4px;
    margin: 6px 0;
    padding: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    opacity: 0.4;
    transition: opacity 0.25s ease;
}





}



/*************************************************************/
/* Under 850px */
/*************************************************************/


@media (max-width: 849px) {

/**********/
/**info**/
/**********/

.info-container {
    flex-direction: column;
       align-items: center;
}
.title-container {
    max-width: 100%;
        text-align: center;
         
}
#info h2 {
    font-size: 17px;
            margin: 0 auto 30px auto;
}

#info p.bio {
    font-size: 14px;

}

    #info p.location {
        border-left: 0;
        font-size: 14px;
        border-bottom: 3px solid #ff50c4;
        width: fit-content;
                margin: 23px auto 20px auto;
        padding: 5px 0;
    }

    

/*************/
/*education*/
/*************/

 #education .education-school .card p.title {
    font-size: 16px;
    margin: 0;
}
#education .education-school .card p.title {
    font-size: 16px;
    margin: 0;
    margin-top: 4px;
}
#education .education-school .card {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 0px;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}
#education .education-school .card h3 {
    font-size: 14px;
    margin-bottom: 4px;
}
#education .education-school .card p.current {
    font-size: 12px;
    margin: 0;
    margin-top: 8px;
}

#education .education-school, #education .education-seminars {
    padding: 20px 20px;
        padding-top: 0;
}

#education .seminars-list {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#education .seminars-list .card {
    padding-right: 20px;
}
#education .seminars-list .card p {
    color: rgb(255 255 255 / 50%);
    margin-bottom: 10px;
    font-size: 12px;
}

#education .seminars-list .card h3 {
    font-size: 16px;
    font-weight: 100;
    margin-bottom: 8px;
    margin-top: 12px;
}



/*************/
/*skills*/
/*************/
#skills .card h3 {
    font-size: 16px;
}
#skills .card p {
    margin: 0;
    font-size: 14px;
}
#skills .card {
    padding: 16px 16px;
}


/*************/
/*experience*/
/*************/
#experience h2 {
           margin-top: 35px;        
}


#experience .card {
    flex-direction: column;
    padding: 14px;
}
#experience .card h3 {
    font-size: 18px;
    margin: 0;
}
#experience .card p.place {
    margin: 0;
    font-size: 14px;
        margin-top: 3px;
    margin-bottom: 3px;
}
#experience .card p.date.current {
    font-size: 12px;
}


#experience .card:first-of-type {
   border-top: 0;
}
#experience .card:last-of-type {
   border-bottom: 0;
}




/*************/
/*websites*/
/*************/
#websites .project-list .card {
    font-size: 16px;
            width: 100%;
}
#websites .project-list .card .follow-icon {
    opacity: 1;
    visibility: visible;
    margin-right: 0;     
    transform: translateY(2px);
}
#websites .project-list .card .follow-icon svg{
    width: 16px;
    height: 16px;
}
#websites .project-list {
    flex-direction: column;
    gap: 10px;
}



/*************/
/*contact*/
/*************/
#contact h2{
    font-size: 20px;
}
#contact .contact-container {
    display: flex;
    gap: 8px;
    margin-top: 28px;
    flex-direction: column;
}
#contact .email , #contact .linkedin{
    font-size: 16px;
    width: 210px;
    margin: 0 auto;
}
#contact .email::after {
    bottom: 100%;
    top: unset;
}



}



/*************************************************************/
/* Under 640px */
/*************************************************************/

@media (max-width: 639px) { 

        .side-nav {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(280px, 80vw);
        height: 100vh;
        padding: 80px 20px 20px;
        background: rgba(80, 67, 238, 0.2);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.35s ease,
            visibility 0.35s ease,
            backdrop-filter 0.35s ease,
            -webkit-backdrop-filter 0.35s ease;
    }

    .side-nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
                padding-top: 0px;
    }
    .section-navigator{
    display:flex;
}
.menu-toggler {
    display: block;
}


.side-nav a{
    font-weight: 800;
    margin: 8px;
}

.side-nav a.active{
       border-bottom: 5px solid #ff50c4;
    
}
.side-nav a .nav-number {
   display: none;
}

.container{
    max-width: 100%;
    padding-right: 0%;
            display: block;
}
.content {
    margin-left: 0%;
        overflow: scroll;
        min-width: 100vw;
            height: stretch;
            position: initial;
}

.content section.active {
    display: block;
        height: fit-content;
        position: relative;
}
    
h2 {
    font-size: 26px;
}


/*************/
/*info*/
/*************/
.info-container {
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: center;
    flex-direction: column;
}


    #info h1 span {
        display: block;
        margin-right: 0;
    }
#info p.hello {
    
    text-align: center;
}

    #info h1 {
        margin-bottom: 8px;
        text-align: center;
    }

#info h2 {
       font-size: 16px;
        margin: 31px auto 25px auto;
}

    #info p.bio {
        max-width: 100%;
        font-size: 14px;
                text-align: center;
    }

    #info p.location {
    border-left: 0;
    font-size: 14px;
    border-bottom: 3px solid #ff50c4;
    width: fit-content;
       margin: 23px auto 0 auto;
    padding: 5px 0;
}

.title-container {
    max-width: 100%;
}


/*************/
/*experience*/
/*************/
#experience h2 {
           margin-top: 35px;        
}


#experience .card {
    flex-direction: column;
    padding: 14px;
}
#experience .card h3 {
    font-size: 18px;
    margin: 0;
}
#experience .card p.place {
    margin: 0;
    font-size: 14px;
        margin-top: 3px;
    margin-bottom: 3px;
}
#experience .card p.date.current {
    font-size: 12px;
}


#experience .card:first-of-type {
   border-top: 0;
}
#experience .card:last-of-type {
   border-bottom: 0;
}




/*************/
/*projects*/
/*************/
#projects .project-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0px;
    flex-direction: column;
}
#projects a{
    width: 100%;

}
#projects a .stack .label {
    font-size: 12px;
}
#projects a h3 {
    font-size: 16px;
}

}