*{
	margin:0;
	padding: 0;
	font-family: 'Poppons',sans-serif;
	box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

*,*:before,*:after{box-sizing:border-box}

body{
  min-height:100vh;
  font-family: 'Raleway', sans-serif;
  background-color: black;
}

.container{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  
  &:hover,&:active{
    .top, .bottom{
      &:before, &:after{
        margin-left: 200px;
        transform-origin: -200px 50%;
        transition-delay:0s;
      }
    }
    
    .center{
      opacity:1;
      transition-delay:0.2s;
    }
  }
}

.top, .bottom{
  &:before, &:after{
    content:'';
    display:block;
    position:absolute;
    width:200vmax;
    height:200vmax;
    top:50%;left:50%;
    margin-top:-100vmax;
    transform-origin: 0 50%;
    transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
    z-index:10;
    opacity:0.65;
    transition-delay:0.2s;
  }
}

.top{
  &:before{transform:rotate(45deg);background:#e46569;}
  &:after{transform:rotate(135deg);background:#ecaf81;}
}

.bottom{
  &:before{transform:rotate(-45deg);background:#60b8d4;}
  &:after{transform:rotate(-135deg);background:#3745b5;}
}

.center{
  position:absolute;
  width:400px;
  height:400px;
  top:50%;left:50%;
  margin-left:-200px;
  margin-top:-200px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:30px;
  opacity:0;
  transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  transition-delay:0s;
  color: #333;

}


.hero{
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card{
	width: 500px;
	background: #fff;
	padding: 40px;
	border-radius: 15px;
	text-align: center;
	color: #333;
}
.card h1{
	font-weight: 500;
	color: #e3362c;
}
.card p{
	font-weight: 500;
	color: #60b8d4;
	}
.card img{
	width: 250px;
	height: 250px;
	border-radius: 50%;
	margin-top: 40px;
	margin-bottom: 30px;
}
label{
	display: block;
	width: 200px;
	background: #e3362c;
	color: #fff;
	padding: 12px;
	margin: 10px auto;
	border-radius: 5px;
	cursor: pointer;
}
input{
	display: none;

}