/* -=-=-=-=-=-=-=-=-=-=
-=-=-= CSS RESET =-=-=-
=-=-=-=-=-=-=-=-=-=- */

*{
	margin:0;
	padding:0;
	list-style-type: none;
}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= HTML5 SEMANTIC TAGS =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

html {
	scroll-behavior: smooth;
}

header,section,footer {
		width:100vw;
		height: 100vh;
		padding: 2vh 20vw 0 2vw;

}

nav {
	 position:fixed;
	 top:25vh;
	 right:2vw;

}

h1,h3, {
			font-size: 10vw;
			font-weight: normal;
		}

h2		{ 
			font-size:8vw;
			font-weight:normal;

		}

li {color: #e6c2d9;
		font-family: "Courier";
		font-size: 18pt; 
		text-align: left;
		padding-bottom:3vh;
	}

a:link {
			display: inline-block;
			width: 2.5vw;
			height: 2.5vw;
			border: 0.2vw solid black;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.2);
			margin-bottom: 2vh;
			text-decoration: none;
			color: #000;
		}

span {
			display: block;
			text-align: right;
			width: 10vw;
			font-size: 1.2vw;
			right: 0;
			opacity: 0;
			position: relative;
			top: 0.2vw;
			transition: right 0.2s, opacity 0.2s;
			background-color: yellow;
			}

a:hover span {
			font-size: 2.2vw;
			right: 11vw;
			opacity: 1;
				}