/*                                                                   
     .*   `MICHELLE.                      .MICHELLE'    .*             
	       888888888.               	.888888888                  
	       888888'  `888.           .888'  `888888                    
	        88888!  .88.  88.   .88  .88.  88888!                    
	*     `888  	      `8 ( ) 8'           888'                  
	         8888  '"        |U|        "'  8888       .*             
	        888888888888"'   |U|  `888888888888                           
	                .8'     8|U|8     '8.                              
	               .8' 88   8|U|8  88 '8.         .*                 
	            888  `'     8|U|8  `' 888                               
	             88888   .88 |U| 88.   88888                      
	            :8888888888' (U) '8888888888:        *           
	            '! 8888888'       '8888888 !'                     
	      .*        ERAZO          ERAZO                          
	               8                    8                          
	              8                      8                                 
		                       
	.  .._. __ .  ..___.   .   .___  .___.__ .__..___..__.
	|\/| | /  `|__|[__ |   |   [__   [__ [__)[__]  _/ |  |
	|  |_|_\__.|  |[___|___|___[___  [___|  \|  |./__.|__.
*/

* {
	margin: 0;
	padding: 0;
	color: white;
	text-decoration: none;
	font-family: "Futura", "Arial","Helvetica";
}


body#canvas {
	width: 100vw;
	height: 100vw;
	background: linear-gradient(#CFBAFF, white) no-repeat fixed center;
}
	header {
		position: static;
		width: 100%;
	}

	main {
		display: inline-block;
		width: 100%;
		margin-top: 9%;
	}
		h1 {
			padding: 2%;
			font-size: 36pt;
			font-weight: 800;
			text-align: center;
	}
		h2 {
			padding: 0.10%;
			font-size: 36pt;
			font-weight: 500;
			text-align: center;
			background: black;
			border-radius: 50px;
			margin-bottom: 40px;
		}
			h2 a:hover {
				color: cyan;

			}

		section {
			margin-top:1% ;
		}
			article {
				position: static;
			}
				img {
					display: block;
					margin: 0 auto 5% auto;
					width:80%;
				}
					.img2 {
						margin-bottom: 10%;
					}
				

nav {
	position: fixed;
	top: 45vh;
	right: 1vw;
}

ul {
	list-style-type: none;
	font-family: futura;
}
	figure {
		width: 2vw;
		height: 2vw;
		border: 0.2vw solid black;
		background-color: #CFBAFF;
		border-radius: 50%;
		margin-bottom: 2vw;
	}

	figure:hover {
		background-color: cyan;
		border-color: white;
	}

	span {
		font-size: 0;
		opacity: 0;
		position: relative;
		top: 0.2vw;
		right: 2vw;
		white-space: nowrap;
		transition: right 0.2s, opacity 0.2s;
	}

		a:hover span {
			font-size: 1.2vw;

			font-family: futura;
			color: #CFBAFF;
			opacity: 1;
			right: 8vw;
		}

/* media querie breakpoints */

 /*mobile*/

@media screen and (max-width: 479) {

	body {
		width: 375px;
		height: 627px;
	}

}

/*phable*/

@media screen and (min-width: 480px) and (max-width:  767px) {
	body {
		width: 480px;
		height: 768px;
	}
	header {
		height: 10%;
	}

	img {
		width: 90%;}
}


/*tableT*/

@media screen and (min-width:  768px) and (max-width:  1365px) {
	body{
		width: 768px;
		height: 1024px;
	}
	header {
		height: 6%;
	}
	img {
		width: 90%;
}

/*laptop*/

@media screen and (min-width: 1366px) and (max-width:  1919px) {
	body {
		width: 1366px;
		height: 768px;
	}
	header {
		height: 10%;
	}
	
	img {
		width: 50%;
	}
}

/*desktop or television*/

@media screen and (min-width:  1920px max-width: 2000px) {
	body {
		width: 1920px;
		height: 1080px;

	}
	header {
		height: 5%;
	}

	header {
		height: 15%;
	}

	img {
		width: 50%;
}