@charset "UTF-8";

/*
    <!-- 
                _ _ _                                                _ _ _              _
              /_/_/_/   _     _    _ _ _       _ _ _     _   _ _   |_|_|_|_     _ _    |_|  
            /_/       /_/   /_/  /_/_/_/     /_/  /_/  /_/_/_/_/   |_|   |_|  _|_|_|_   _   
            /_/_/    /_/   /_/  /_/   /_/  /_/_/_/_/  /_/          |_|-|-|_  |_|   |_| |_|  
          _ _ _/_/  /_/   /_/  /_/   /_/  /_/        /_/           |_|_ _|_| |_|_ _|_| |_| 
        /S/I/D/     /_/_/_/   /_/_ _/      /_/_/_/  /_/            |B|O|I|     |_|_|   |_|  
                             /_/                                 
                            /_/     
     -->
*/

/*;.;.;.;.;.;.;.;.;.;.;
.;.;.; CSS RESET ;.;.;.
;.;.;.;.;.;.;.;.;.;.;*/


*{
    margin: 0;
    padding: 0;
}

/*;.;.;.;.;.;.;.;.;.
.;.;.; CANVAS .;.;.;
;.;.;.;.;.;.;.;.;.*/

body{
    background-image: url('../images/gradient-wallpaper-9.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;}

h1{
    width: 49vw;
    margin: 2vw auto 0 auto;
    text-align: Left;
    font-family: "Calibri", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.center{
    margin: 0;
    position: absolute;
    left: 49vw;
    right: 2.5vw;
    margin: 0 auto 0 auto;
}

main#canvas{
width: 100vw;
height: 60vw;
margin: 0vh auto 0 auto;
}

/*;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; ARTIST CREDIT ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;*/

figcaption{
    width: 41vw;
    margin: 0.5vw auto 0 auto;
    font-size: 12pt;
    text-align: right;
    font-family: "Calibri", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; HTML5 SEMANTIC TAGS ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

section{
    width: 45%;
    height: 100%;
    margin-left: 25%;
    float: left;
}

article{
    width: .825%;
    height: 85%;
    margin-top: 10%;
    margin-left: 0%;
    float: left;
}

/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; CSS COLOR CLASSES ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

.white{
    background-color: #e7e7e9;
}

.salmon{
    background-color: #da6165;
}

.salmon0{
    background-color: #da6165;
    margin-left: 6.5%;
}

.teal{
    background-color: #5fafaf;
}


.denim{
    background-color: #829ace;
}

.gold{
    background-color: #cf9045;
}

.black{
    background-color: #1a232a;
}


/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; HOVER PSEUDO-CLASS INTERACTIONS ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

.white:hover{
    background-color: black;
}

.salmon:hover{
    background-color: #65da61;
}

.salmon0:hover{
    background-color: #65da61;
}


.teal:hover{
    background-color: #af735f;
}


.denim:hover{
    background-color: #cea282;
}


.gold:hover{
    background-color: #5145cf;
}


.black:hover{
    background-color: white;
}