form {
    border: 2px solid #ffc801;
    padding: 1rem;
}

.lora {
    font-family: "Lora", serif;
    font-weight: 400;
    font-style: normal;
  }

.allotrope  {
    font-family: "allotrope", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.container {
    display: flex;
}
header { 
    background-color: #06258f;
    height: 7.5rem;
}

#logo {
    width: 3rem;
    height: auto;
    flex: 1;
    margin-top: 4px;
    padding-left: 0px;
    margin-left: 6px;
  }

header div {
    color: #ffc801;
    font-family: 'allotrope', sans-serif;
    font-size: 2rem;
    margin-top: -3.9rem;
    text-align: center;
    width: 235px;
    margin-left: 2.9rem;
  
}

h1 {
color: #ffc801;
font-family: 'allotrope', sans-serif;
font-size: 1.8rem;
margin: 1rem;
}

h2 {
    color: #FFE999;
    font-family: 'allotrope', sans-serif;
    margin: 1rem;
    font-size: 1.3rem;

}

p {
    color: #FFFFFF;
    font-family: 'Lora', serif;
    padding: 1rem;
    border: 1px solid #FFE999;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

footer p {
    border: none;
    font-size: 0.7rem;
    color: #FFFFFF;
}

footer {
    background-color: #06258f;
    text-align: center;
    margin-top: 1rem;

}

footer nav ul { 
    padding: 0;
    text-align: center;
}

footer nav ul li {
    display: inline;
    margin: 0 10px;
}

footer nav ul li a {
    font-family: 'allotrope', sans-serif;
    color:white;
}

body img {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

legend {
    color: #FFFFFF;
    font-family: 'lora', sans-serif;
}

body {
    background-color: #031652;
}

fieldset {
    border: 1px solid #ffc801;
    margin: 0 0.5rem 2rem 0.5rem;
    padding: 1rem;
}

label, input {
    display: block;
    width: 100%;
    color: #FFFFFF;
    font-family: 'lora', sans-serif;
}

input[type="text"],
input[type="tel"] {
    margin: 0.125rem 0 1.2rem 0;
}

textarea {
    width: 100%;
    margin: 0.125rem 0 1.2rem 0;
}

.button {
    width: 5rem;
    color: white;
    border-radius: 0.5rem;
}

.button:hover {
    filter: opacity(0.5);
}

.align-right {
    display: flex;
    justify-content: end;
}

input[type="submit"] {
    margin: 0 0.55rem;
    background-color: forestgreen;
}

input[type="reset"] {
    background-color: darkred;
}

nav ul.navigation {
    list-style-type: none;
    position: relative;
    justify-content: space-between; 
    
    }
    
nav {
    margin: 0 auto;  
}

nav ul li {
    display: flex;
    height: 0;
    line-height: 0;
    flex: 1;
    text-align: center; 
    padding: 1rem;
    margin-top: 0.5rem;
    }
    
nav ul li a {
        display: block;
        height: 100%;
        width: 100%;
    }

button#menu-button {
        height: 2rem;
        width: 2rem;
        display: block;
        border: none;
        background-image: url('data:image/svg+xml,<svg fill="none" height="800" viewBox="0 0 24 24" width="800" xmlns="http://www.w3.org/2000/svg"><path d="m11.5697 12.5532.592.4605zm-.2555-8.90734.6923.28846zm7.2408 10.85864c.2786-.3065.256-.7808-.0505-1.0595-.3065-.2786-.7808-.256-1.0595.0505zm-.8463-.1841-.5549-.5045zm3.5339-3.5778.5347-.526-.0043-.0043zm.2105 1.2834c.2905.2953.7653.2991 1.0606.0086.2953-.2904.2992-.7653.0087-1.0606zm-15.7204 7.0168c-.41422 0-.75.3358-.75.75s.33578.75.75.75zm-2.2327-3.2928c-.41421 0-.75.3358-.75.75s.33579.75.75.75zm4.69231-12.39425c.15931-.38235-.0215-.82145-.40385-.98077-.38235-.15931-.82145.0215-.98077.40385zm-1.38462 11.93275c.15932.3823.59842.5631.98077.4038s.56316-.5984.40385-.9808zm4.19231-9.5385c-.4142 0-.75.33579-.75.75s.3358.75.75.75zm8.876 11.166c.2297.3447.6954.4378 1.04.208.3447-.2297.4378-.6954.208-1.04zm-7.876-4.166h.0917v-1.5h-.0917zm-.592-1.2105-.4303.5533 1.184.9209.4303-.5532zm-.1003-9.82796-.6858 1.64585 1.3846.57693.6858-1.64586zm6.1373 11.78396-.2912.3204 1.1099 1.009.2913-.3204zm3.263-2.2269.7451.7574 1.0693-1.052-.7451-.7573zm-3.5542 2.5473c-2.87 3.157-7.19294 5.2269-11.4211 5.2269v1.5c4.6884 0 9.403-2.2771 12.531-5.7179zm-6.5319-10.45851c-1.23151 2.95569-.95495 6.32483.7421 9.04011l1.272-.795c-1.4395-2.30321-1.6741-5.16105-.6295-7.66818zm.3558 8.73541c-1.79477 2.3075-4.55436 3.6572-7.4777 3.6572v1.5c3.38622 0 6.5828-1.5634 8.6617-4.2363zm-4.17001-9.31397c-1.67692 4.02461-1.67692 8.48497 0 12.50967l1.38462-.577c-1.52308-3.6553-1.52308-7.70036 0-11.35575zm4.19231 4.47117c3.6428 0 7.1364 1.4471 9.7123 4.023l1.0607-1.0607c-2.8572-2.85716-6.7324-4.4623-10.773-4.4623zm1.0917 5.5c3.128 0 6.0491 1.5633 7.7843 4.166l1.248-.832c-2.0133-3.02-5.4027-4.834-9.0323-4.834z" fill="%23fff"/><path d="m3.33874 6.99805c.84839-1.47229 2.08381-2.74787 3.66122-3.65859 4.78294-2.761421 10.89884-1.12267 13.66024 3.66026 2.7614 4.78288 1.1227 10.89878-3.6602 13.66028-4.783 2.7614-10.89887 1.1226-13.66029-3.6603-.91072-1.5774-1.34284-3.2998-1.34142-4.999" stroke="%23fff" stroke-linecap="round" stroke-width="1.5"/></svg>'); 
        background-repeat: no-repeat;
        background-size: cover;
    }

#menu {
        display: none;
    }

#menu.show-nav {
        display: block;
        position: absolute;  /* position the menu */
        z-index: 100;
        top: 0;
        right: 0.6rem;

        background-color: #FFE999;  /* style the dropdown menu */
        padding: 1rem;
        width: 95%;
        margin: 0 auto;
        border: 1px solid #003CFF;
        height: 16.5rem;
    }  

#menu-button {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        padding: 0;
        background-color: transparent;
        z-index: 10;
    }

#menu-button:hover {
        cursor: pointer;
    }

.hide-text {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        padding: 0;
    }

.icon a img {
        width: 2rem;
        height: auto;
    }

li.icon a {
        display: flex;  /* place logo and span side by side */
        justify-content: start; /* align left */
        align-items: center; /* vertically align */
        
        font-family: arial, helvetica, sans-serif; /* style span text as desired */
        font-weight: bold;
        text-decoration: none;  /* remove underline */
        font-size: 1.5rem;
        margin: 0; 
        height: 1.5rem;
    }

@media only screen and (min-width: 64em) {
        button#menu-button {
            display: none;
        }

        #menu {
            display: flex;
        }
    }