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


h1{font-size: 15vw;}
.work{font-size: 18px;}
.about-text p{font-size: 18px;}

/* main_content */

.container{
display: flex;
border-bottom: 2px solid #0000ff;
flex-direction: column;
height: 100%;
}

.col-1{
display: flex;
flex-direction: column;
width: 100%;
border-right: 0;
position: relative;
justify-content: space-between;
}

.about-title{
box-sizing: border-box;
text-transform: uppercase;
line-height: 1em;
padding-top: 20px;
padding-left: 20px;
width: 90%;
}

.eye-container{
align-self: center;
}

.eye{
width: 35vw;
animation: roll-mobile 4s ease infinite running alternate;
margin-right: 0px;
}

.me{
width: 200px;
opacity: 0%;
position: absolute;
z-index: 1;
top: 25%;
left: 50%;
transition: opacity 0.5s, transform 0.5s;
margin-left: -100px;
}

.eye-container:hover .me{
opacity: 100%;
}

.col-2{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}

.about-text{
padding: 30px 20px 30px 10px;
}

.work{
	text-decoration: underline;
}

.work:hover{
	color: #00ff00;
}

.about-text p{
padding-bottom: 30px;
}

.skills{
	display: flex;
	border-top: 2px solid #0000ff;
	align-items: center;
	background-color: blue;
}

.skills p{
font-size: 16px;
padding: 3vw 10px;
border-right: 2px solid #0000ff;
background-color: white;
align-self: stretch;
}

/* floating_banner */

.marquee-about {
display: flex;
align-items: center;
width: 100%;
height: 11vw;
padding: 5px 0 5px 0;
text-align: center;
overflow: hidden;
}

.marquee-about h4{
font-size: 6vw;
text-transform: uppercase;
}

.italic{
font-style: italic;
color: white;
}

.marquee-title-about{
color: white;
}

.marquee-about .marquee-wrapper-about {
width: 10000px;
animation: marqueeAnimation_2 30s linear 0s infinite running;
}

.marquee-about h4 .marquee-title-about {
margin-right: 20px;
float: left;
}

/* animation */

@keyframes roll-mobile {
   from  { transform: translateX(70px)     rotate(0deg) }
   to    { transform: translateX(-70px) rotate(-180deg) }
}

@keyframes roll {
   from  { transform: translateX(0)     rotate(0deg) }
   to    { transform: translateX(-250px) rotate(-200deg) }
}

@keyframes marqueeAnimation_2 {
100% {
  transform: translateX(-2000px);
}
}

@media (min-width: 500px){

h1{font-size: 15vw;}
.work{font-size: 3vw;}
.about-text p{font-size: 3vw;}

/* main_content */

.container{
display: flex;
border-bottom: 2px solid #0000ff;
flex-direction: column;
}

.col-1{
display: flex;
flex-direction: column;
width: 100%;
border-right: 0;
position: relative;
justify-content: space-between;
}

.about-title{
text-transform: uppercase;
padding-top: 5px;
padding-left: 20px;
width: 90%;
}

.eye-container{
align-self: center;
}

.eye{
width: 25vw;
animation: roll-mobile 4s ease infinite running alternate;
margin-right: 40px;
}


.me{
width: 40vw;
opacity: 0%;
position: absolute;
z-index: 1;
top: 20%;
left: 40%;
transition: opacity 0.5s, transform 0.5s;
}

.col-2{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}

.about-text{
padding: 30px 20px 0px 20px;
}

.about-text p{
padding-bottom: 30px;
}

.space{
}

.skills{
	display: flex;
	border-top: 2px solid #0000ff;
	align-items: center;
	background-color: blue;
}

/* floating_banner */

.marquee-about {
display: flex;
align-items: center;
width: 100%;
padding: 5px 0 5px 0;
text-align: center;
overflow: hidden;
}

.marquee-about h4{
font-size: 6vw;
text-transform: uppercase;
}

.italic{
font-style: italic;
color: white;
}

.marquee-title-about{
color: white;
}

.marquee-about h4 .marquee-title-about {
margin-right: 20px;
float: left;
}

.marquee-wrapper-about:hover{
	animation-play-state: paused;
}


	

}

@media (min-width: 900px){
	

h1{font-size: 9vw;}
.work{font-size: 2vw;}
.about-text p{font-size:2vw;}
	

.container{
flex-direction: row;
}

.col-1{
width:50%;
border-right: 2px solid #0000ff;
}

.about-title{
width: 100%;
padding-top: 15px;
}
	
.eye-container{
padding-bottom: 20px;
align-self: flex-end;
}
	
.eye{
width: 15vw;
animation: roll 4s ease infinite running alternate;
}

.eye:hover{
animation-play-state: paused;
}

.me{
width: 20vw;
opacity: 0%;
position: absolute;
z-index: 1;
top: 20%;
left: 30%;
transition: opacity 0.5s, transform 0.5s;
margin-left: 0px;
}
	

.col-2{
width: 50%;
}

.about-text{
padding: 20px;
}

.about-text p{
}

.marquee-about {
padding: 5px 0 5px 0;
height: 6vw;
}

.marquee-about h4{
font-size: 3vw;
}

/* floating banner */

.marquee-about .marquee-wrapper-about {
width: 10000px;
animation: marqueeAnimation_2 20s linear 0s infinite running;
}
	
.marquee-wrapper-about:hover{
	animation-play-state: paused;
}

}