*{
	font-family: "Athiti", sans-serif;
	font-weight: 500;
    padding: 0;
    margin: 0;
}

.bungee-regular {
  font-family: "Bungee", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.athiti-light {
  font-family: "Athiti", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.athiti-regular {
  font-family: "Athiti", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.athiti-medium {
  font-family: "Athiti", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.athiti-semibold {
  font-family: "Athiti", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.athiti-bold {
  font-family: "Athiti", sans-serif;
  font-weight: 700;
  font-style: normal;
}

a {
	font-family:"Playfair","Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  color: #FFD4E9;
}

p {
    font-family: "Athiti", sans-serif;
        font-weight: 400;
        margin-left: 11rem;
        margin-right: 10rem;
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: 1.2rem
}
body{
    font-family: "Athiti", sans-serif;
    font-weight: 300;
    line-height: 1;
    padding: 3rem;
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
	background: linear-gradient(-45deg, #898198ff, #6c955fff, #8ebf4aff, #dcd318ff, #dbcc49ff, #a7ca66ff, #72c0b4ff, #80ccdbff, #8cbbdbff, #8fa6d8ff);
    background-size: 1000% 1000%;
    animation: gradient 60s linear infinite;
    color: #F9EEF4;
}
header{
    font-family: "Athiti", sans-serif;
    font-weight: 700;
    line-height: 2;
    padding: 3rem;
}

.intro{
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 6rem;
}

.name{
    font-family: "Bungee", sans-serif;
    color: white;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0.3rem;
    padding-top: 3rem;
    animation-name: moveToRight, floater;
    animation-duration: 2s, 5s;
    animation-delay: 0s, 2s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: 0,0; /*1, 2;*/
}

.description{
    color: white;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.15rem;
    padding-top: 0.4rem;
    /*animation: moveToLeft 2s ease-in-out;*/
}



@keyframes gradient{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

.contact{
    text-decoration: none;
    background-color: #fff;
    padding: 1rem 3rem;
    border-radius: 10rem;
    display: inline-block;
    margin-top: 5rem;
	margin-right: 4rem;
    color: #9D81A3;
    font-size: 1.1rem;
    letter-spacing: .1rem;
/*    transition: all 2s;
    animation: moveUp 2s ease-in-out 2s;
    animation-fill-mode: backwards;*/
}
.right_button{
    text-decoration: none;
    background-color: #fff;
    padding: 1rem 5rem;
    border-radius: 10rem;
    display: inline-block;
    margin-top: 5rem;
    color: #9D81A3;
    font-size: 1.1rem;
    letter-spacing: .1rem;
    /*transition: all 2s;
    animation: moveUp 2s ease-in-out 2s;
    animation-fill-mode: backwards;*/
}

.profilePhoto {
	background-color: rgba(230,233,240,1.00);
	width: 550px;
	border-radius: 50%;
	height: 550px;
	clear: both;
	margin-bottom: 7rem;
	
}
img{ 
 display: block;
 margin-left: auto;
 margin-right: auto;
	padding-top: 5rem;
	margin-bottom: auto
} 
header .profileHeader h1 {
	font-family: 'Montserrat', sans-serif;
	color: rgba(146,146,146,1.00);
	font-size: 30px;
	font-weight: 700;
	line-height: 24px;
	margin-left: 15rem;
}

.contact:hover{
    transform: translateY(-1rem);
    box-shadow: 0px 1rem 2rem rgba(0,0,0,0.3);
}

.right_button:active{
    transform: translateY(-.25rem);
    box-shadow: 0px 1rem 2rem rgba(0,0,0,0.3);
}

.right_button:hover{
    transform: translateY(-1rem);
    box-shadow: 0px 1rem 2rem rgba(0,0,0,0.3);
}

.contact:active{
    transform: translateY(-.25rem);
    box-shadow: 0px 1rem 2rem rgba(0,0,0,0.3);
}

@keyframes moveToRight{
    0%{
        opacity: 0;
        transform: translateX(-10rem);
    }
    80%{
    transform: translateX(1rem);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveToLeft{
    0%{
        opacity: 0;
        transform: translateX(10rem);
    }
     80%{
    transform: translateX(-1rem);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes moveDown{
    0%{
        transform: translateY(-5rem);
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes moveUp{
    0%{
        opacity: 0;
        transform: translateY(3rem);
    }
     100%{
        opacity: 1;
        transform: translateY(0);
    }
    }

@keyframes floater{
    0%{
        transform: translateY(0);
        text-shadow: .1rem 0 0 rgba(0,0,0,0.2);
    }
    50%{
        transform: translateY(-2rem);
        text-shadow: 0 0.5rem 0 rgba(0,0,0,0.2);
    }
    100%{
        transform: translateY(0);
        text-shadow: .1rem 0 0 rgba(0,0,0,0.2);
    }
}