:root{

    /* Font sizes: */
    font-size:          10px;
    --ff-serif:         'Poppins', sans-serif;
    --ff-sans:          'Poppins', sans-serif;
    --ff-mono:          'Martian Mono', monospace;


    /* COLOR: Black */ 
    --black-h:  000deg; --black-s:  000%; --black-l:  000%;

    /* Variations: */
    --color-black-1:    
        calc(var(--black-h)         ), 
        calc(var(--black-s)         ),
        calc(var(--black-l) + 2%    ); 

    --color-black-2:    
        calc(var(--black-h)         ), 
        calc(var(--black-s)         ),
        calc(var(--black-l) + 4%    );  
                            
    --color-black-3:    
        calc(var(--black-h)         ), 
        calc(var(--black-s)         ),
        calc(var(--black-l) + 6%    ); 

    /* COLOR: White */ 
    --white-h:  000deg; --white-s:  000%; --white-l:  100%;

    /* Variations: */
    --color-white-1: 
        calc(var(--white-h)         ), 
        calc(var(--white-s)         ),
        calc(var(--white-l) - 2%    ); 


    --color-white-2: 
        calc(var(--white-h)         ), 
        calc(var(--white-s)         ),
        calc(var(--white-l) - 4%    ); 

    /* COLOR: Primary */ 
    --primary-h:  340deg; --primary-s:  100%; --primary-l:  058%;

    /* Variations: */
    --color-primary-1:   
        calc(var(--primary-h)           ), 
        calc(var(--primary-s)           ),
        calc(var(--primary-l) - 5%      ); 

    --color-primary-2:   
        calc(var(--primary-h)           ), 
        calc(var(--primary-s)           ),
        calc(var(--primary-l) - 10%     ); 

    --color-primary-3:   
        calc(var(--primary-h)           ), 
        calc(var(--primary-s)           ),
        calc(var(--primary-l) - 15%     ); 
                                
    /* COLOR: Info */ 
    /* Base color: */
    --info-h:  220deg; --info-s:  100%; --info-l:  045%;

    /* Variations: */
    --color-info-1:   
        calc(var(--info-h)          ), 
        calc(var(--info-s)          ),
        calc(var(--info-l) + 0%     ); 

    --color-info-2:   
        calc(var(--info-h)          ), 
        calc(var(--info-s)          ),
        calc(var(--info-l) + 10%    ); 

    --color-info-3:   
        calc(var(--info-h)          ), 
        calc(var(--info-s)          ),
        calc(var(--info-l) + 20%    ); 

    /* COLOR: Success */ 
    /* Base color: */
    --success-h:  088deg; --success-s:  085%; --success-l:  037%;

    /* Variations: */
    --color-success-1:   
        calc(var(--success-h)           ), 
        calc(var(--success-s)           ),
        calc(var(--success-l) + 0%      ); 

    --color-success-2:   
        calc(var(--success-h)           ), 
        calc(var(--success-s)           ),
        calc(var(--success-l) + 13.25%  ); 

    --color-success-3:   
        calc(var(--success-h)           ), 
        calc(var(--success-s)           ),
        calc(var(--success-l) + 25.50%  );          


    /* COLOR: Warning */
    /* Base color: */
    --warning-h:  045deg;--warning-s:  100%; --warning-l:  050%;

    /* Variations: */
    --color-warning-1:   
        calc(var(--warning-h)           ), 
        calc(var(--warning-s)           ),
        calc(var(--warning-l) + 0%      ); 

    --color-warning-2:   
        calc(var(--warning-h)           ), 
        calc(var(--warning-s)           ),
        calc(var(--warning-l) + 10%     ); 

    --color-warning-3:   
        calc(var(--warning-h)           ), 
        calc(var(--warning-s)           ),
        calc(var(--warning-l) + 20%     );  


    /* COLOR: Error */
    /* Base color: */
    --error-h:  346deg; --error-s:  100%; --error-l:  050%;   

    /* Variations: */
    --color-error-1:   
        calc(var(--error-h)           ), 
        calc(var(--error-s)           ),
        calc(var(--error-l) + 0%      ); 

    --color-error-2:   
        calc(var(--error-h)           ), 
        calc(var(--error-s)           ),
        calc(var(--error-l) + 10%     ); 

    --color-error-3:   
        calc(var(--error-h)           ), 
        calc(var(--error-s)           ),
        calc(var(--error-l) + 20%     ); 



    --box-shadow-tiny:
        0 1px 1px   hsla(var(--color-black-3), 0.11), 
        0 2px 2px   hsla(var(--color-black-3), 0.08), 
        0 3px 3px   hsla(var(--color-black-3), 0.05);

    --box-shadow-short:     
        0 1px 1px   hsla(var(--color-black-3), 0.11), 
        0 2px 2px   hsla(var(--color-black-3), 0.11), 
        0 4px 4px   hsla(var(--color-black-3), 0.11), 
        0 6px 8px   hsla(var(--color-black-3), 0.11), 
        0 8px 16px  hsla(var(--color-black-3), 0.11);

    --box-shadow-long:      
        0 2px 1px   hsla(var(--color-black-3), 0.09), 
        0 4px 2px   hsla(var(--color-black-3), 0.09), 
        0 8px 4px   hsla(var(--color-black-3), 0.09), 
        0 16px 8px  hsla(var(--color-black-3), 0.09),
        0 32px 16px hsla(var(--color-black-3), 0.09);

    --box-shadow-dreamy:    
        0 1px 2px   hsla(var(--color-black-3), 0.07), 
        0 2px 4px   hsla(var(--color-black-3), 0.07), 
        0 4px 8px   hsla(var(--color-black-3), 0.07), 
        0 8px 16px  hsla(var(--color-black-3), 0.07),
        0 16px 32px hsla(var(--color-black-3), 0.07), 
        0 32px 64px hsla(var(--color-black-3), 0.07);

    --box-shadow-sharp:     
        0 1px 1px   hsla(var(--color-black-3), 0.25), 
        0 2px 2px   hsla(var(--color-black-3), 0.20), 
        0 4px 4px   hsla(var(--color-black-3), 0.15), 
        0 8px 8px   hsla(var(--color-black-3), 0.10),
        0 16px 16px hsla(var(--color-black-3), 0.05);

    --box-shadow-diffuse:   
        0 1px 1px   hsla(var(--color-black-3), 0.08), 
        0 2px 2px   hsla(var(--color-black-3), 0.12), 
        0 4px 4px   hsla(var(--color-black-3), 0.16), 
        0 8px 8px   hsla(var(--color-black-3), 0.20);

    /* Document: */
    --margin:               3rem;
    --max-width:            78rem;
    --border-radius-small:  4px;
    --border-radius-medium: 8px;
    --border-radius-large:  12px;

    /* Transitions: */
    --transition-fast:      0.2s ease;
    --transition-medium:    0.4s ease;
    --transition-slow:      0.6s ease;

}

@media screen and (min-width: 1650px) {
    :root{
        font-size:              12px;
        --margin:               2.4rem;
        --max-width:            85rem;
    }
}

@media screen and (max-width: 600px) {
    :root{
        font-size:              9px;
        --margin:               1.8rem;
    }
}

@media screen and (max-width: 400px) {
    :root{
        font-size:              8px;
        --margin:               1.6rem;
    }
}

::selection {
    background:     hsla(var(--color-primary-1), 50%);
}

::-moz-selection {
    background:     hsla(var(--color-primary-1), 50%);
}


*, 
*::after, 
*::before{
    box-sizing:         border-box;
}

html, 
body{
    width:              100%;
    height:             100%;
    min-height:         100vh;
    background-color:   hsla(var(--color-white-2), 100%);
    font-family:        var(--ff-sans);
}

.viewport {
    display:                grid;
    min-height:             100vh;
    margin:                 0 var(--margin);
}