/*------------------------------------------------------------
    Basic CSS Reset to give us a clean starting point
    Based closely on https://github.com/jgthms/minireset.css
  ------------------------------------------------------------*/

/* Size block borders logically and set a base text size */ 

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

/* Set a base text size. All other text defined in REMs */ 
html
{
    font-size: 16px;
    font-family: 'Segoe UI', 'Geneva', 'Verdana', 'sans-serif';
}

/* Clear gaps between and within blocks */ 
html, body, header, main, footer,
h1, h2, h3, h4, h5, h6, p,
ol, ul, li, dl, dt, dd,
blockquote, figure, fieldset, legend, textarea, pre
{
    margin: 0;
    padding: 0;
}

/* Enforce heading sizes, some browsers change them */
    h1 {font-size:2.0rem;}
    h2 {font-size:1.75rem;}
    h3 {font-size:1.5rem;}
    h4 {font-size:1.17rem;}
    h5 {font-size:0.83rem;}
    h6 {font-size:0.67rem;}

/* Clear default list styling */
ol, ul
{
    list-style: none;
}

/* Stop images breaking out of containers */
img, picture, video, canvas, svg
{
    max-width: 100%;
    height: auto;
}

/* Remove default spacing on tables */
table
{
    border-collapse: collapse;
    border-spacing: 0;
}

td, th
{
    padding: 0;
}

/* Remove default spacing for form elements */
button, input, select, textarea
{
    margin: 0;
    display: block;
    outline: none;
    font-size: 1em;
    background-color: rgba(255, 255, 255, 0.25);

    &:hover
    {
        background-color:rgba(255, 255, 255, 0.4);
    }
    &:active
    {
        background-color:rgba(128, 128, 128, 0.25);
    }
}

button { border: none;cursor:pointer; }

textarea { resize: none; }

:disabled, .disabled
{
    filter: saturation(0.5);
    opacity: 0.5;
}

@media screen and (min-width: 750px)
{
    /* ============ TABLET ============ */

    h1 {font-size:2.5rem;}
    h2 {font-size:2rem;}
    h3 {font-size:1.5rem;}
    h4 {font-size:1.17rem;}
    h5 {font-size:0.83rem;}
    h6 {font-size:0.67rem;}
}

@media screen and (min-width: 1200px) and (pointer: fine)
{
    /* ============ DESKTOP ============ */
    
    h1 {font-size:2.5rem;}
    h2 {font-size:2rem;}
    h3 {font-size:1.5rem;}
    h4 {font-size:1.17rem;}
    h5 {font-size:0.83rem;}
    h6 {font-size:0.67rem;}
}