/*

Colors

#fbf7ff
#f6dcff
#e7b7f7
#9664A0
#7636a5
#5f1d80
#530064

*/

.tabDIV
{
    min-height: 60vh;
}

.tabNote
{
    color: #555;
    font-style: italic;
}

.insideTabDIV
{
    width: 100%;
}

#settingsTabDIV
{
    border: none;
    background-color: #FFF;
}

.tabViewport
{
    overflow-y: auto;
    border-top: unset;
    margin-top: clamp(-10em, -1vh, -1em);
}







/*
------------------------------------ ASPECT RATIO DRIVEN RULES
----------------------
---------------------- PORTRAIT RULES
*/

.tabDIV
{
    padding-bottom: 4vh;
}

.projectTabDIV
{
    top: 0.5vw;
}

#projectsInsideTabDIV,
#mediaInsideTabDIV
{
    margin-top: 2vw;
}

.tabNote
{
    font-size: 1.8vw;
}

.tabViewport
{
    height: clamp(10em, 70vh, 80em);
}



/*
---------------------- LANDSCAPE RULES
*/

@media (min-aspect-ratio: 1)
{
    .tabViewport
    {
        height: clamp(10em, 64vh, 53em);
    }
}

/*
------------------------------------ MAXIMUMS/LIMITS
*/


@media screen and (min-width: 56em)
{
    
    .projectTabDIV
    {
        top: 0.2em;
    }
    
    #projectsInsideTabDIV,
    #mediaInsideTabDIV
    {
        margin-top: 1.5em;
    }
    
    .tabNote
    {
        font-size: 0.8em;
    }
}

@media screen and (max-height: 32em)
{
    
}