body,
html {
	height: 100%;
	margin: 0;
	padding: 0;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.avatar {
	/* overflow: hidden; */
    position: relative;
    left: -110px;
	transform: translatey(0px);
	animation: float 2s ease-in-out infinite;
	img { width: 200%; height: auto; }
}

.content {
	width: 100%;
	max-width: 600px;
	padding: 20px 40px;
	box-sizing: border-box;
	text-align: center;
}

.loader {
    margin-top: 50px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #017DB9;
    border-top-color: transparent;
    animation: rotation 1s linear infinite;
 }    
 @keyframes rotation {
    from {
       transform: rotate(0deg);
    }
    to {
       transform: rotate(360deg);
    }
 }    

 @media  only screen and (max-width: 432px){
    .avatar{
        left: -25px;
        img { width: 120%; height: auto; }
    }
    .loader{
        margin-top: 20px;
        width: 30px;
        height: 30px;
    }
}