/** Add any CSS you need to this file. */
body {
    background-color: #dae1e7;
    color: #dd6b4d;
}

header {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    position: relative;
    left: 2em;

}

#navbartop {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    z-index: 3;
}

#navbartop ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1c4b82;
    border-radius: 10px 30px;
}

#navbartop li {
    float: left;
}

#navbartop li a {
    display: block;
    text-align: center;
    padding: 0.7em;
    margin: 0.3em;
    text-decoration: none;
    color: #dae1e7;
}

#navbartop li a:hover {
    background-color: #183661;
    border-radius: 10px 30px;
}

#navbartop .active {
    background-color: #dd6b4d;
    border-radius: 10px 30px;
}

#navtopstart {
    margin-left: 2%;
}

#navlogo {
    display: block;
    margin-left: 60%;
    margin-top: 12%;
    width: 2em;
    -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 6s; /* Firefox < 16 */
    animation: fadein 6s;

}

#shake1 {
    border-radius: 50px;
    padding: 2em;
    width: 50vw;
    z-index: 1;
}

#slide {
    position: absolute;
    left: 0;
    -webkit-animation: slide 4s forwards;
    -moz-animation: slide 4s forwards;
    animation: slide 4s forwards;
}

header h1 {
    -webkit-animation: slide 4s forwards;
    -moz-animation: slide 4s forwards;
    animation: slide 4s forwards;
}

#description {
    z-index: 2;
    padding: 2em;
    width: 42vw;
    position: sticky;
    top: 4rem;
    float: right;
    -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 8s; /* Firefox < 16 */
    animation: fadein 8s;
}

#description p {
    font-family: 'Mukta', sans-serif;
    color: #183661;
}

#description h2 {
    font-family: 'Montserrat', sans-serif;
    color: #dd6b4d;
}

#toplogo {
    width: 3em;
    position: relative;
    left: -3em;
    bottom: 0.5em;
    float: right;
    -webkit-animation: fadein 14s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 14s; /* Firefox < 16 */
    animation: fadein 14s;
}

@-webkit-keyframes slide {
    from {
        margin-left: 50%;
        width: 100%;
    }
    to {
        margin-left: 0;
        width: 300%;
    }
}

@-moz-keyframes slide {
    from {
        margin-left: 50%;
        width: 100%;
    }
    to {
        margin-left: 0;
        width: 300%;
    }
}

@keyframes slide {
    from {
        margin-left: 50%;
        width: 100%;
    }
    to {
        margin-left: 0;
        width: 300%;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}