html,
button,
input,
select,
textarea { color: hsla(0, 0%, 10%, 1); }

body {
    background-color: hsla(50, 20%, 95%, 1);
    background-image: -webkit-radial-gradient(hsla(50, 20%, 95%, 1), hsla(50, 20%, 75%, 1));
    background-image: -moz-radial-gradient(hsla(50, 20%, 95%, 1), hsla(50, 20%, 75%, 1));
    background-image: -ms-radial-gradient(hsla(50, 20%, 95%, 1), hsla(50, 20%, 75%, 1));
    background-image: -o-radial-gradient(hsla(50, 20%, 95%, 1), hsla(50, 20%, 75%, 1));
    background-image: radial-gradient(hsla(50, 20%, 95%, 1), hsla(50, 20%, 75%, 1));
}

a { color: hsla(35, 100%, 40%, 1); }
a:hover { color: hsla(35, 100%, 40%, 1); }
a:active { color: hsla(35, 100%, 40%, 1); }


/* ########## buttons ########## */

.button {
    border-radius: .25em;
    background-color: hsla(40, 100%, 50%, 1);
    background-image: url(/img/icon-chevronright-black.svg);
    color: hsla(0, 0%, 10%, 1) !important;
}


/* ########## images ########## */

.brand-image {
    display: inline-block;
    background-image: url(logo.svg);
}
i.brand-image {
    width: 10rem !important;
    height: 5.625rem !important;
}


/* ########## form elements ########## */

input[type=text],
input[type=file],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
select,
textarea {
    -webkit-box-shadow: .0625em .0625em .25em hsla(0, 0%, 0%, 0.125);
    -moz-box-shadow: .0625em .0625em .25em hsla(0, 0%, 0%, 0.125);
    box-shadow: .0625em .0625em .25em hsla(0, 0%, 0%, 0.125);
    border-radius: 0;
}


/* ########## header ########## */

#header {
    background: transparent;
    color: hsla(0, 0%, 10%, 1);
}
#header-title a { color: hsla(0, 0%, 10%, 1); }
#header-title i { display: none; }
#header nav li a { color: hsla(0, 0%, 10%, 1); }
#header nav li a:hover {
    border-radius: .25em;
    background-color: hsla(0, 0%, 100%, 0.5);
    color: hsla(0, 0%, 0%, 1);
}
#header nav li a.selected {
    border-radius: .25em;
    background-color: hsla(0, 0%, 100%, 0.9);
    color: hsla(0, 0%, 10%, 1);
}
#header nav li a:active {
    border-radius: .25em;
    background-color: hsla(0, 0%, 100%, 1);
    color: hsla(0, 0%, 10%, 1);
}


/* ########## footer ########## */

#footer {
    background: transparent;
    color: hsla(0, 0%, 10%, 1);
}
#footer a { color: hsla(0, 0%, 10%, 1); }
#footer nav li a:hover,
#footer nav li a:active { color: hsla(0, 0%, 10%, 1); }
#footer-brand i { }



/* ############################################################################################################################################
   viewport width > 48.063em
############################################################################################################################################### */


@media only screen and (min-width: 48.063em) {


    body { background-image: url(bg.jpg); }

    .panel {
        border-radius: .5em;
        background-color: hsla(0, 0%, 100%, 0.9);
    }


}