/*
                  __   __ 
            ___  / /__/_/
           / _ \/ //_/ / 
          /  __/ .< / /  
          \___/_/|_/_/  
       ___           ___
     /     \       /     \
    /  :::  \_____/  :::  \
   |                       |
   |                       |
   |   ===           ===   |
   |                       |  _____
   |    ~      Y      ~    | / ||| \
   |           |           ||       |
    \          ^          /.|       |.
     \___________________/ /        /
     /________(o)________\/        /
    /                     \       /
   |                       |     /
   |                       |    /
   | ______         ______ |___/
   |/      \       /      \|
   |        |     |        |
   |        |     |        |
   |__||||__|_____|__||||__|  
       
   designed by esmé kim-ison

                 			*/




@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Slab:wght@300&display=swap');


/* CSS RESET */

	* {
		margin: 0;
		padding: 0;
		color: #000;
	}

/*CANVAS*/

	main#canvas {
		width: 46vw;
		height: 50vw;
		margin: 5vh auto 5vh auto;
	}

/* ARTIST CREDIT */

	figcaption {
		font-size: 12pt;
		text-align: right;
		font-family: "Roboto Slab", serif;
	}


/* HTML5 SEMANTIC TAGS */

  section {
    width: 100%;
    float: left;
  }

    article {
      width: 100%;
      float: left;
    }

      figure {
        width: 14%;
        height: 40%;
        margin: 7% 0% 0% 9%; 
        float: left;
      }

/* CSS CLASSES */

section#background {
    width: 100%;
    height: 100%;
    background-color: #000000;
    float: left;
}

.offwhite {
  background-color: #F3F3F3;
}

.grey {
  background-color: #BEBFC1;
}

.lightgrey {
  background-color: #E8E8EB;
}

.red {
  background-color: #D83C09;
}

.yellow {
  background-color: #F5F28F;
}

.rowthin {
  height: 2%;
}

.rowmedium {
  height: 9%;
}

.rowdemi {
  height: 11%;
}

.rowlarge {
  height: 23.5%;
}


/* HOVER PSEUDO-CLASS INTERACTIONS */



.offwhite:hover {
  background-color: #E8E8EB;
}

.grey:hover {
  background-color: #D83C09;
}

.lightgrey:hover {
  background-color: #F5F28F;
}

.red:hover {
  background-color: #BEBFC1;
}

.yellow:hover {
  background-color: #F3F3F3;
}