@charset "utf-8";
/* CSS Document */

/*
SANTIAGO BAROCIO'S ASCII FOR 2022 :
                                                                                                
 ad88888ba       88   888b      88    ad888888b,     ,a8888a,    8b        d8          
d8"     "8b    ,d88   8888b     88   d8"     "88   ,8P"'  `"Y8,   Y8,    ,8P           
Y8,          888888   88 `8b    88           a8P  ,8P        Y8,   Y8,  ,8P            
`Y8aaaaa,        88   88  `8b   88        ,d8P"   88          88    "8aa8"             
  `"""""8b       88   88   `8b  88      a8P"      88          88     `88'              
        `8b      88   88    `8b 88    a8P'        `8b        d8'      88    aaa  
Y8a     a8P      88   88     `8888   d8"           `8ba,  ,ad8'       88    "88  
 "Y88888P"       88   88      `888   88888888888     "Y8888P"         88    d8'  
                                                                           8"                                                                        
 ad888888b,    ,a8888a,    ad888888b,  ad888888b,  
d8"     "88  ,8P"'  `"Y8, d8"     "88 d8"     "88  
        a8P ,8P        Y8,        a8P         a8P  
     ,d8P"  88          88     ,d8P"       ,d8P"   
   a8P"     88          88   a8P"        a8P"      
 a8P'       `8b        d8' a8P'        a8P'        
d8"          `8ba,  ,ad8' d8"         d8"          
88888888888    "Y8888P"   88888888888 88888888888                                                     
*/
 
	* {
		margin: 0;
		padding: 0;	}


	@font-face{
		font-family: sans-serif;
		font-weight: bold;}

	h3 {
		padding: 2% 0 0 2%;}


	figure {
		width: 50vw;
		margin: 5vh auto;}


	.red {
		background-color: red;}
	
	.orange {
		background-color: orange;}
	
	.yellow {
		background-color: yellow;}
	
	.green {
		background-color: green;}
	
	.blue {
		background-color: blue;}
	
	.purple {
		background-color: purple;}

	.black {
		background-color: black;}

.nav {
    display: flex;
    justify-content: space-between;
    width:100%;
    align-items: center;
    list-style: none;
    background: rgba(0, 0, 0, 1);}

.nav-ul {
    font-size:1.15em;
    display: flex;
    list-style: none;
    align-items: center;
    padding-right: 5%;
    width: 70%;
    margin:0.2em;}

.nav ul li{
    width:5vw;
    float:left;
    padding:1.5vw;
    margin:0.5vw auto;
    text-align: center;}

.nav ul li a{
    text-decoration: none;
    color:white;}

.nav ul li:hover{ background-color:red; }
.nav ul li a:hover{ color:yellow; }

.body {background-color: black;}


.nav-logo:hover {
				-ms-transform: translateY(10px);
				-webkit-transform: translateY(0px);
				transform: translateY(10px);
				animation: mymove 5s infinite; }

@keyframes mymove {
  0%   {top: 0px; background: yellow; width: 100px;}
  100% {top: 200px; background: red; width: 300px;}    }

.greeting {color: red;
	font-weight: bolder; 
	align-items: center;
}