/* Rot logo gray: #a7a9ac */
body {
  color:#414042; 
  font-family: 'Assistant', sans;
  letter-spacing:.05em;
  font-size: var(--fs-200);
}

/*  Typography  */
:root {
  --fs-100: clamp(0.84rem, calc(0.94rem + -0.13vw), 0.91rem);
  --fs-200: clamp(1.09rem, calc(1.08rem + 0.06vw), 1.13rem);
  --fs-300: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);
  --fs-400: clamp(1.58rem, calc(1.41rem + 0.83vw), 2rem);
  --fs-500: clamp(1.89rem, calc(1.59rem + 1.51vw), 2.67rem);
  --fs-600: clamp(2.27rem, calc(1.77rem + 2.51vw), 3.55rem);
  --fs-700: clamp(2.72rem, calc(1.94rem + 3.93vw), 4.74rem);
  --fs-800: clamp(3.27rem, calc(2.08rem + 5.95vw), 6.31rem);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display SC', serif;
    letter-spacing:.3em;
    font-weight:200;
    color:#757575;
    text-transform:uppercase;
    text-align:center;
}

h1 {
    letter-spacing:.3em;
    font-weight:100;
    font-size: var(--fs-300);
    text-align:center;
}

a {
    color:#005789;
}

p {
    padding:.2em;
    font-size: var(--fs-200);
    line-height:var(--fs-300);
}

/* END TYPOGRAPHY */

/* LAYOUT  */

main {
     font-size: var(--fs-200);
     padding:var(--fs-100);
}

.container {
  width: min(calc(100% - 2rem), 60rem);
  margin-inline: auto;
  
.flexList {
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.flexRow {
    display:flex;
    flex-direction:row;
    gap:.01rem;
    align-items:flex-start;
    place-items:center;
}

}
/* HEADER/BANNER */

header {
    margin-top:1rem;
    margin-bottom:1rem;
    display:flex;
    flex-direction:column;
    place-items:center;
    
}
header  img {
    width:150px;
}

nav {
    display:flex;
    flex-direction:row;
    gap:2rem;
    margin-top:2rem;
    font-weight:100;
    font-size: var(--fs-100);
    font-family: 'Playfair Display SC', serif;
    letter-spacing:.3em;
    border-top:1px solid #a7a9ac;
    border-bottom:1px solid #a7a9ac;
    
}
nav a {
    color:#757575;
    text-decoration:none;
    padding:.4rem 0;
}

/* END HEADER/BANNER */


/* SPECIAL */

.highlight {
    color:#005789;
    font-weight:600;
}


section h3 {
    font-weight:400;
    margin-top:2em;
}

#legend {
    padding:1rem;
    background:#f7f7f7;
}

#legend h3 {
    margin-top:0;
    color:#414042;
}

#legend .highlight {
     font-size: var(--fs-200);
}

.text {
    font-size: var(--fs-200);
    line-height:var(--fs-300);
}

.text-sm {
    font-size: var(--fs-100);
    line-height:var(--fs-200);
}

.hidden {
    display:none;
}
.border {
    padding-bottom:1rem;
    border-bottom:1px solid #a7a9ac;
}
/* END SPECIAL */




/* FOOTER */
footer {
    margin: 1em 0;
    padding:1em;
    background:#f7f7f7;
    font-size: var(--fs-100);
    display:flex;
    flex-direction:column;
    gap:1rem;
}

footer img {
    width:30px;
}
.flexRowFoot {
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   gap:.5rem;
   align-items:center;
}
/* END FOOTER */

/* FORM */
.flex-outer li {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    padding:.5em;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 270px;
}
 
.flex-outer > li > label + * {
  flex: 1 0 270px;
  padding:.25em;
}

.buttonWrapper {
    margin-top:1em;
    display:flex;
    flex-direction:row;
    flex-grow:0;
    flex-wrap:wrap;
    gap:1em;
    justify-content:center;
    align-items:center;
}

input.button {
  max-width:30%;
  padding:1em 2em;
  background:#f7f7f7;
  border:none;

}

input.text {
  min-width:100%;
  line-height: var(--fs-300);
}

/* END FORM */