@font-face{
    font-family: Sen;
    src: url("../fonts/Sen-Regular.ttf");
}
@font-face{
    font-family: SenBold;
    src: url("../fonts/Sen-Bold.ttf");
}
*{
    padding: 0;
    margin: 0;
}

html{
    width: 100%;
    height: 100%;

    overflow-x: hidden;
}

li{
    list-style-type: none;
    font-size: 2.1em;
}
a{
    text-decoration: none;
    color: rgb(216, 216, 216);
}
a:hover{
    text-decoration: underline;
}

h1, li, a, p{
    word-wrap: none;
    white-space: nowrap;
}

body{
    font-family: Sen;
    color: white;

    background-color: #111111;

    width: 100%;
    height: 100%;

	display: flex;
	flex-direction: column;
}

header{
/*	height: 400px;
	min-height: 400px; */
}
.header{
    width: 100%;
    height: 100%;

    background-color: rgb(34, 34, 34);

    text-align: center;

    border-bottom: 5px solid white;
}

.header-text{
    font-size: 6em;
    font-family: SenBold;
}

nav{
    margin-bottom: 40px;
}

.container{
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.menu ul{
    display: flex;
    justify-content: space-between;
}
.menu ul li{
    margin-top: 2%;
}

section{
    padding-bottom: 20px;
}

.container-items{
    font-size: 4em;
    font-family: SenBold;
    text-align: center;    
}
.container-items p{
	opacity: 0;
    animation-duration: 1.75s;
    animation-fill-mode: forwards;
}

@keyframes leftSlide{
    0%{
        opacity: 0;
        transform: translateX(-150%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.container-items p:nth-child(odd){
    animation-name: leftSlide;
}

@keyframes rightSlide{
    0%{
        opacity: 0;
        transform: translateX(150%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.container-items p:nth-child(even){
    animation-name: rightSlide;
}

.container-item1{
    margin-right: 30%;
}
.container-item2{
    margin-left: 30%;
    animation-delay: 0.25s;
}
.container-item3{
    margin-right: 20%;
    animation-delay: 0.5s;
}
.container-item4{
    margin-left: 10%;
    animation-delay: 0.75s;
}

footer{
	flex-shrink: 0;
	bottom: 0;
	background-color: black;
	width: 100%;
	height: 80px;
}

.push{
	flex: 1 0 auto;
}

.social{
	display: flex;
	align-items: center;
	justify-content: center;
}

.email-icon{
	width: auto;
	height: 50px;

	cursor: pointer;

	margin-right: 20px;
}

.github-icon{
	width: auto;
	height: 35px;

	cursor: pointer;

	margin-right: 23px;
}

.linkedin-icon{
	width: auto;
	height: 40px;

	cursor: pointer;
}

.noUnderline{
	text-decoration: none !important;
	color: black;
}