@charset "UTF-8";
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= THESE STYLES DESIGNED AND BUILT WITH LOVING CARE -=-=-=
=-=-=-=- ENTIRELY BY HAND JUST FOR YOU BY IAN BESLER -=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

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

	* {
		margin: 0;
		padding: 0;
		font-family: Helvetica, Arial, sans-serif;
	}

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

	html {
		scroll-behavior: smooth;
	}

	header,section,footer {
		width: 78vw;
		height: 98vh;
		padding: 2vh 20vw 0 2vw;
	}

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

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

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

		ol {
			list-style-type: none;
		}

		a:link {
			display: inline-block;
			width: 2vw;
			height: 2vw;
			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;
			}

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