stylehg.css

#img
		{
			height: 90vh;
			width: 90vw;
			position: absolute;
			top: 5vh;
			left: 5vw;
		}
		body,html
		{
			margin:0;
		}
		body
		{
			background-color: #30475e;
		}
		.box
		{
			background-color: aqua;
			opacity: 0.5;
			width: 60vw;
			height: 100vh;
			box-shadow: 5px 5px 10px black;
			animation: shift 4s ease;
			animation-fill-mode: forwards;
		}
		#skills
		{
			font-family: 'Open Sans Condensed', sans-serif;
			font-size: 8vh;
			color: white;
			border: 2px solid white;
			padding: 1vh;
			width: 20vw;
			border-radius: 7vh;
		}
		@keyframes shift
		{
			0%
			{
				width: 0vw;
			}
			60%
			{
				width: 60vw;
			}
			
			100%
			{
				width: 100vw;
			}
		}
		#span
		{
			font-size: 8vh;
			text-align: left;
			font-family: 'Varela Round',sans;
			position: absolute;
			left: 7vw;
			top: 7vh;
		}
		#frame1
		{
			width: 100vw;
			height: 350px;
			margin: 0;
		}
		
		html {
  scroll-behavior: smooth;
}
#box1
{
    width: 15vh;
    height: 15vh;
    border: 4px solid white;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    position: absolute;
    left: 45vw;
    top: 45vh;    

}
.box-inner
{
    position: relative;
    top: 0;
    animation-name: inner;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background-color: white;
    width: 100%;
    
}
@keyframes rotate
{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }   
    100%{
        transform: rotate(360deg);
    }
}
@keyframes inner
{
    0%
    {
        height: 0px;
    }
    50%
    {
        height: 15vh;
    }
    100%
    {
        height: 0px;
    }
    
}
#myDiv
{
	display: none;
}
.animate-bottom {
  position: relative;
  animation-name: animatebottom;
  animation-duration: 1s
}
.links
{
	float: right;
	right: 0;
	display: inline-block;
	position: absolute;
	color: black;
	text-decoration: none;
	margin: 4vh;
}
.links a
{
	margin: 4vh;
	color: black;
	text-decoration: none;
	font-family: 'Odibee Sans', sans-serif;
	font-size: 5vh;
}


@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
.special-link
{
	border: 2px solid black;
	border-radius: 3.5vh;
	padding: 1vh;

}
.images
{
	display: inline-block;
    left: 28vw;
    margin-bottom: 5vh;
    bottom: 5vh;
    
    
}
.images img
{
	width: 7vh;
	height: 7vh;
	position: relative;
	margin-bottom: 2vh;
	margin-left: 2vh;
	margin-right: 2vh;
	top: 75vw;
}
.special-link:hover
{
	background-color: black;
	color: white;
	box-shadow: 5px 5px 10px black;
}
#frame2
{
	height: 70vw;
	width: 70vw;
	position: absolute;
	left: 15vw;
}