* { margin: 0px; padding: 0px; }

/* GLOBAL STYLES */
body {
	background:linear-gradient(45deg,#030330,#324a9a);
	color:#fdfdfd;
	font-family: 'Montserrat';
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}



#main-content{
	min-height: 100vh;
	width: 100%;
	background-image: url('../images/Motif-H14.png');
	display: flex;
	justify-content: center;
	flex-direction: column;
}

h1{
    font-size: 34px;
    letter-spacing: 1px;
    font-weight: 300;
    line-height: 26px;
}

h3{
	font-size: 24px;
	font-weight: 300;
}

.bold{
	font-weight: 500;
}

.baseline{
	padding-top: 25px;
}

.hashtag{
	display: flex;
	align-items: center;
}

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

.center-content img{
	width: 315px;
}

/* style writer */

.writer-container{
	display: flex;
	margin-top: 32px;
	justify-content: center;
}

.typewriter{
	display: table;
}

.typewriter h1 {
	font-family: Open sans;
	overflow: hidden; 
	border-right: .3px solid #fdfdfd;
	white-space: nowrap;
	text-transform: uppercase;
}

.step-1{
	animation: 
	    typing 1s steps(10, end),
	    blink-caret .5s step-end infinite;
}

.step-2{
	animation: 
	    remove 1s steps(10, end),
	    blink-caret .5s step-end infinite;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

/* The typing effect */
@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}


/* The removing effect */
@keyframes remove {
	from { width: 100% }
	to { width: 0px }
}


/* The typewriter cursor effect */
@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: orange }
}