@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&display=swap');
:root
{
   --primary-color:#14b8a6;
   --secondary-color:#5eead4;
   --off-white-color:#f0fdfa;
}
body
{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}
header
{
    background-color: var(--primary-color);
    margin-top: -1.5rem;
    padding: 2rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
header h1
{
    text-align: center;
    color: var(--off-white-color);
}
input
{
    margin: 1rem auto;
    display: block;
    padding: 1rem;
    font-size: medium;
    max-width: 20rem;
    text-align: center;
    border-radius: 1rem;
    background-color: var(--secondary-color);
    border-color: transparent;
}
main h2
{
    text-align: center;

}
main h2 span{
    color: var(--primary-color);
}
#output
{
    background-color: #5eead4;
    height: 10rem;
    max-width: 20rem;
    display: block;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 1rem;

}
#submit
{
    display: block;
    margin: auto;
    padding: 1rem;
    font-family: inherit;
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    border-radius: 1rem;
}
#loading {
    width: 2rem;
    height: 2rem;
    border: 5px solid var(--off-white-color);
    border-top: 6px solid var(--primary-color);
    border-radius: 100%;
    margin: auto;
    visibility: hidden;
    animation: spin 1s infinite linear;
    margin-top: 1rem;
}
#loading.display 
{
    visibility: visible;
}
@keyframes spin 
{
    from 
    {
        transform: rotate(0deg);
    }
    to 
    {
        transform: rotate(360deg);
    }
}