/*
                  __   __ 
            ___  / /__/_/
           / _ \/ //_/ / 
          /  __/ .< / /  
          \___/_/|_/_/  
       ___           ___
     /     \       /     \
    /  :::  \_____/  :::  \
   |                       |
   |                       |
   |   ===           ===   |
   |                       |  _____
   |    ~      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: 45vw;
		height: 46.8vw;
		margin: 5vh auto 5vh auto;
	}

/* ARTIST CREDIT */

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


/* HTML5 SEMANTIC TAGS */

article {
    display: block;
}

/* CSS CLASSES */

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

#limegreen-1 {
	background-color: #A4CD00;
	width: 40%;
    height: 28%;
    float: left;
}

#darkblue-1 {
	background-color: #00207F;
	width: 40%;
    height: 28%;
    float: left;
}

#neonpink-1 {
	background-color: #FF62A8;
	width: 20%;
    height: 21%;
    float: left;
}

#darkblue-2 {
	background-color: #003AB4;
	width: 24%;
    height: 37%;
    float: left;
}

#red-1 {
	background-color: #EF0101;
	width: 30%;
    height: 37%;
    float: left;
}

	
#limegreen-2 {
	background-color: #D4E700;
	width: 26%;
    height: 22%;
    float: left;
 }

 #red-2 {
	background-color: #E4021E;
	width: 20%;
    height: 21%;
    float: left;
    margin-top: -7.3%;
}

 #darkblue-3 {
	background-color: #0023A0;
	width: 20%;
    height: 30%;
    float: left;
 }

 #yellow {
	background-color: #FFDC00;
	width: 31%;
    height: 35.1%;
    float: left;
    margin-top: -7.2%;
}

#limegreen-3 {
	background-color: #D4E700;
	width: 23%;
    height: 35.1%;
    float: left;
    margin-top: -7.2%;
 }

 #neonpink-2 {
	background-color: #FF4F94;
	width: 26%;
    height: 22%;
    float: left;
    margin-top: -22.9%;
 }


  #red-3 {
	background-color: #FF030A;
	width: 46%;
    height: 28.2%;
    float: left;
}


/* HOVER PSEUDO-CLASS INTERACTIONS */

#limegreen-1:hover {
	background-color: #00207F;
}

#darkblue-1:hover {
  background-color: #FF62A8;
}

#neonpink-1:hover {
  background-color: #003AB4;
}

#darkblue-2:hover {
  background-color: #EF0101;
}

#red-1:hover {
  background-color: #D4E700;
}

  
#limegreen-2:hover {
  background-color: #E4021E;
 }

 #red-2:hover {
  background-color: #0023A0;
}

 #darkblue-3:hover {
  background-color: #FFDC00;
 }

 #yellow:hover {
  background-color: #D4E700;
}

#limegreen-3:hover {
  background-color: #FF4F94;
 }

 #neonpink-2:hover {
  background-color: #FF030A;
 }


  #red-3:hover {
  background-color: #A4CD00;
}