body{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    font-size: large;
    font-weight: bold;
}

p{
    padding: 0 20vw;
}

h3{
    text-align: center;
    font-weight: bold;
}

.btn{
    background-color: #11999E;
    color: white;
    font-weight: bolder;
    width: 20vw;
    padding: 0 4px;
    margin: 16px 0;
}

.btn:hover{
    background-color: #E4F9F5;
    color: black;
}

/*Navbar styling*/
.icon{
    height:15vh;
    width: 12vw;
}

/*Intro styling*/
.intro{
    text-align: center;
    margin-top: 1vh;
}

.first-header{
    font-family: 'Dancing Script', cursive;
    font-weight: bolder;
    font-size: 3em;
    color: white;
    text-align: center !important;
    background-color: #11999E;
    padding: 5px;
}

/* Form styling */
.form-center{
    display:flex;
    justify-content: center;
}

.akan-form{
    background-color: #E4F9F5;
    padding: 2vw 4vw;
}

.form-control{
    font-weight: bold;
}

/* Display section name */
.error  {
    color: #11999E;
    padding: 2px;
    text-align: left;
}

#display-name{
    text-align: center;
    font-weight: bolder;
    font-kerning: auto;
    font-size: 4em !important;
    padding: 0 32px;
    animation-name: display;
    animation-delay: 0;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes display{
    0%{color: #03045E;}
    25%{color: #00B4D8; transition: cubic-bezier(0.075, 0.82, 0.165, 1);}
    50%{color: #90E0EF;}
    75%{color: #00B4D8;}
    100%{color: #03045E;}
}