* {
    box-sizing: border-box;
}

html,
body{
    height:100%;
}

body{
    background-color: #EFEFEF;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    color: #1E1E1E;
    font-family: "Roboto", sans-serif;;
}

/* LAYOUT - MOBILE FIRST */
main {
    display: grid;
    grid-template-rows: repeat(8, minmax(0, 1fr));
    height: 100dvh;  
    overflow: hidden;
}

/* OPEN AND CLOSE TRANSITION */
.hidden {
    display: none !important;
}

/* mobile first */
.profile-container-shrink{
    grid-row: 1/2 !important;
    padding: 1em !important;
    background-color: #EEE785;
    cursor: pointer;
}

.profile-container-shrink:hover {
    background-color: #62ADE3;
    cursor: pointer;
}

.projects-container-flex:hover {
    background-color: #62ADE3;
    cursor: pointer;
}

.projects-container-expand{
    grid-row: 2/9 !important;
    overflow-y: auto;
    background-color: #EFEFEF !important;
    padding: 2em;
    min-height: 0;
    cursor: auto;
    

    .projects-content{
        display: grid;
        gap: 1em; 
    }

    .projects-container {
        border: none;
    }
}



/* tablet & desktop */
@media(min-width: 300x){
    .projects-container-expand{
        border-top: none;
    }
}

@media(min-width: 768px){
    .projects-container-expand{
        grid-column: 2/13 !important;
        grid-row: 1/9 !important;
    }

    .profile-container-shrink{
        grid-column: 1/2 !important;
        grid-row: 1/9 !important;
    }
}


@media (min-width: 1024px){
    .projects-container-expand{
        grid-column: 2/13 !important;
        grid-row: 1/9 !important;
        padding-top: 0.8em;

        .projects-content {
            padding: 1em;
            gap: 1em;
            width: 84%;
            margin: 0 auto;
            grid-template-columns: repeat(3, 1fr)

        }

        .project-item {
            width: 100%;
        }
    }

    .profile-container-shrink{
        grid-column: 1/2 !important;
        grid-row: 1/9 !important;
    }
}