/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
    /* border: 0;
    */
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
}
 body {
     line-height: 1;
}
 ol, ul {
     list-style: none;
}
 blockquote, q {
     quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}
/*DEFAULT STYLES*/
/** {
     border: 1px solid red;
}
*/
 h1 {
     font-family: 'Alegreya Sans', sans-serif;
     font-size: 2em;
     padding: 3%;
     text-align: center;
     font-weight: bold;
     color: #B4B8B5;
}
 header h2 {
     text-align: center;
     font-family: 'Exo 2', sans-serif;
     font-style: italic;
     color: #B4B8B5;
     padding: 1%;
     padding-top: 0;
     border-left: 0.5px solid #B4B8B5;
     border-right: 0.5px solid #B4B8B5;
     width: 29%;
     margin: auto;
}
 h2 {
     font-family: 'Exo 2', sans-serif;
     font-style: italic;
     padding: 8%;
     padding-bottom: 1%;
     font-size: 1.2em;
}
 #about {
     padding-left: 10%;
     padding-right: 5%;
     font-family: 'Alegreya Sans', sans-serif;
     font-weight: bolder;
     background-color: #2B2B2E;
     margin: 6%;
     padding-bottom: 20px;
}
 #about h2 {
     font-size: 1.1em;
     padding-left: 0;
}
 #about p {
     font-size: 1.3em;
     padding: 4%;
}
 #left {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     grid-gap: 0.5px;
     text-align: center;
     background-color: #222224;
}
 #left a {
     padding: 5%;
     text-decoration: none;
     font-family: 'Exo 2', sans-serif;
     background-color: #2B2B2E;
     color: #B4B8B5;
     transition: background 350ms ease-in-out;
     transition: color 350ms ease-in-out;
}
 #wrapper{
     background-color: #222224;
     margin: 0px;
     padding-bottom: 30px;
}
 #left .current {
     color: #E04C36;
     background-color: #222224;
}
 #left a:hover{
     color: white;
     background-color: #222224;
}
 #left .current:hover{
     color: #E04C36;
}
 #return {
     text-decoration: none;
     font-family: 'Exo 2', sans-serif;
     display: block;
     text-align: center;
     padding: 5%;
     color: #B4B8B5;
     padding-top: 1px;
}
 #return:hover {
     color: #E04C36;
}
 span {
     text-align: center;
     margin: auto;
     display: block;
}
 footer {
     font-family: 'Alegreya Sans', sans-serif;
     text-align: center;
     font-size: 0.9em;
}
 * {
     color: #B4B8B5;
}
 #arth2 {
     text-align: center;
}
 #digital {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 5%;
     padding: 3%;
}
 .gallery, img{
     width: 100%;
}
 .desc {
     font-family: 'Alegreya Sans', sans-serif;
     text-align: center;
}
 #remix-video {
     margin: auto;
     text-align: center;
     width: 100%;
     padding: 5%;
}
 #animated-video {
     margin: auto;
     text-align: center;
     width: 100%;
     padding: 5%;
}
 #videoh2 {
     text-align: center;
     font-size: 1.5em;
}
 #firsth2 {
     text-align: center;
     font-size: 1.5em;
}
 #arth2 {
     font-size: 1.5em;
}
 #video {
     margin: auto;
     text-align: center;
     width: 100%;
}
 span {
     padding-top: 50px;
}
 #web-link p{
     font-size: 1.2em;
     font-family: 'Alegreya Sans', sans-serif;
     padding-top: 5%;
     padding-bottom: 8%;
     padding-left: 5%;
     width: 80%;
}
 #web-link a{
     font-size: 1.2em;
     font-family: 'Exo 2', sans-serif;
     text-align: center;
     padding-left: 3%;
}
 #webfoot {
     padding-top: 26%;
}
 #webh2 {
     text-align: center;
     font-size: 1.5em;
     padding-bottom: 20px;
}
 #fine {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 5%;
     padding: 3%;
}
/*Tablet Styles*/
 @media only screen and (min-width:600px) and (max-width:950px) {
     #remix {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10%;
    }
     #animated {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10%;
    }
}
/*desktop Styles*/
 @media only screen and (min-width:951px) {
     #wrapper {
         display: grid;
         grid-template-columns: 1fr 4fr;
         padding-top: 10%;
    }
     h1 {
         font-size: 4em;
    }
     #left {
         display: grid;
         grid-template-rows: 50px 50px 50px 50px 50px 50px;
         grid-template-columns: 1fr;
    }
     #left a {
         text-align: center;
         padding-top: 5%;
         background-color: #222224;
         font-size: 1.2em;
    }
     #digital {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         justify-content: center;
         grid-gap: 5%;
        /* Adjust as needed */
         padding: 3%;
    }
     #content {
         display: flex;
         flex-direction: column;
         align-items: center;
    }
     .gallery, img:hover{
         width: 102%;
    }
     #remix {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10%;
    }
     #animated {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10%;
    }
     #firsth2 {
         text-align: center;
         font-size: 1.5em;
         margin-top: -150px;
    }
     #website {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-gap: 20%;
         padding: 10%;
    }
     #web-link p{
         width: 100%;
         padding-left: 0px;
    }
     #webfoot {
         padding-top: 35%;
    }
     #webh2 {
         text-align: center;
         font-size: 1.5em;
         margin-top: -100px;
         padding-bottom: 0px;
    }
     #fine {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         justify-content: center;
         grid-gap: 5%;
        /* Adjust as needed */
         padding: 3%;
    }
     h1 {
         margin-top: -60px;
    }
     header h2 {
         width: 18%;
    }