body {
    font-family: 'Roboto';
    font-weight: 100; 
}

#logoText {
	padding-top: 20px;
	padding-bottom: 20px;
	width: 200px;
}

#intro {
    width: 300px;
    opacity: 0;
    -webkit-animation: slideIn .75s 0s 1 forwards;
    -moz-animation: slideIn .75s 0s 1 forwards;
    -o-animation: slideIn .75s 0s 1 forwards;
}

#intro p {
    font-size: 35px;   
    color: #000000;   
}

@-webkit-keyframes slideIn {
    0% {
        padding-left: 500px;
    }
    100% {
        padding-left: 0px;
        opacity: 1;
    }
}
@-moz-keyframes slideIn {
    0% {
        padding-left: 500px;
    }
    100% {
        padding-left: 0px;
        opacity: 1;
    }
}
@-o-keyframes slideIn {
    0% {
        padding-left: 500px;
    }
    100% {
        padding-left: 0px;
        opacity: 1;
    }
}

.menu {
    margin-bottom: 5px;
    
}

.menu a {
    color: #000000;
    font-size: 30px;
    font-weight: 100;
    margin-top: 0px;
    margin-bottom: 0px;
	text-decoration: none;
}

#begin {
    margin-right: 300px;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    border-color: #000000;
    margin-top: 10px;
    width: 180px;
    opacity: 0;
    -webkit-animation: slideIn1 .5s .5s 1 forwards;
    -moz-animation: slideIn1 .5s .5s 1 forwards;
    -o-animation: slideIn1 .5s .5s 1 forwards;
}

@-webkit-keyframes slideIn1 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}
@-moz-keyframes slideIn1 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}
@-o-keyframes slideIn1 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}

#instructions {
    margin-left: 100px;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    border-color: #000000;
    width: 180;
    opacity: 0;
    -webkit-animation: slideIn2 .5s 1s 1 forwards;
    -moz-animation: slideIn2 .5s 1s 1 forwards;
    -o-animation: slideIn2 .5s 1s 1 forwards;
}

@-webkit-keyframes slideIn2 {
    0% {
        margin-left: 500px;
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}
@-moz-keyframes slideIn2 {
    0% {
        margin-left: 500px;
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}
@-o-keyframes slideIn2 {
    0% {
        margin-left: 500px;
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}

#questions {
    margin-right: 300px;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    border-color: #000000;
    width: 180;
    opacity: 0;
    -webkit-animation: slideIn3 .5s 1.5s 1 forwards;
    -moz-animation: slideIn3 .5s 1.5s 1 forwards;
    -o-animation: slideIn3 .5s 1.5s 1 forwards;
}

@-webkit-keyframes slideIn3 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}
@-moz-keyframes slideIn3 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}
@-o-keyframes slideIn3 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}

#about {
    margin-left: 100px;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    border-color: #000000;
    width: 180;
    opacity: 0;
    -webkit-animation: slideIn2 .5s 2s 1 forwards;
    -moz-animation: slideIn2 .5s 2s 1 forwards;
    -o-animation: slideIn2 .5s 2s 1 forwards;
}

@-webkit-keyframes slideIn2 {
    0% {
        margin-left: 500px;
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}
@-moz-keyframes slideIn2 {
    0% {
        margin-left: 500px;
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}
@-o-keyframes slideIn2 {
    0% {
        margin-left: 500px;
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}

#practice {
    margin-right: 300px;
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    border-color: #000000;
    width: 180;
    opacity: 0;
    -webkit-animation: slideIn3 .5s 2.5s 1 forwards;
    -moz-animation: slideIn3 .5s 2.5s 1 forwards;
    -o-animation: slideIn3 .5s 2.5s 1 forwards;
}

@-webkit-keyframes slideIn3 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}
@-moz-keyframes slideIn3 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}
@-o-keyframes slideIn3 {
    0% {
        margin-right: 500px;
    }
    100% {
        margin-right: 0px;
        opacity: 1;
    }
}