*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    font-family: var(--mainfont);
    padding: 0;
    font-weight: normal;
    max-width: 100vw;
}


.screen-reader-text {
    position: absolute;
    left: -1000vw;
  }

  .screen-reader-text:focus {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
   
  }

  header nav {
    display: flex;
    width: fit-content;
    margin: 5vh auto;
    
  }
  .navmenulist img{
    max-width: 10vw;
    display: block;
    
  }

  .navmenulist {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    gap: 2.5vw;
    width: 100%;
    align-items: center;
    background-color: var(--lightblue);
    border-radius: 1000px;
    padding: 0 1vw 0 0;
  }
  .fancylink  {
    text-decoration: underline;
    transition: all 0.5s ease-out;
    padding: 1rem;
    background-color: var(--lightblue);
    box-shadow: 1px 1px 3px var(--black);
    border-radius: var(--main-border-radius);
    }

    @media (prefers-reduced-motion: reduce) {
    a, .fancylink{
        transition:none;
        
    }
}
    
.fancylink *, .fancylink {
    font-size: var(--step-1);
}

.fancylink:hover, .fancylink:focus {
    background-color: var(--white);
    box-shadow: 1px 1px 10px var(--black);
}

.fancylink:nth-child(odd){
    background-color: var(--lightpink);
}
.fancylink:nth-child(odd):hover, .fancylink:nth-child(odd):focus{
    
    background-color: var(--white);
}

a{
    color: var(--black);
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
    
}


.navmenulist a:hover {


}

a:hover, .navmenulist .active {
    text-decoration: overline;
    
}
img {
    max-width: 100%;
}
a:hover img, .active img {
    filter: drop-shadow(0px 0px 3px var(--black));
}



.primarycontentwrapper{
    display: flex;
    justify-content: center;
max-width: 50vw;
margin: 0 auto;
}
.textcentered {
    text-align: center;
    width: 100%;
}
.marginallycentered {
    margin: 0 auto;
}
.justifiablycentered {
    display: flex;
    justify-content: center;
}


.text-color-red {
    color: var(--red);
}

.uppercased {
    text-transform: uppercase;
}


.textbox{
    padding: var(--step-5);
    word-wrap: break-word;
}
.textbox p:last-child {
    margin-bottom: 0;
}

.lavenderbg {
    background-color: var(--lavender);
}
.pastelbluebg{
    background-color: var(--pastelblue);
}
.graybg {
    background-color: var(--gray);
}
.pastelpinkbg {
    background-color: var(--pastelpink);
}

.pinktext {
    color: var(--lightpink);
}
.blackpinkbuttonwrapper {
    display: flex;
    }
.blackpinkbutton {
    margin: 0 auto;
padding: var(--step-2);
background-color: var(--black);
color: var(--white);
text-decoration: none;
border-radius: 5px;
}
.blackpinkbutton:hover, .blackpinkbutton:focus {
background-color: var(--lightpink);
color: var(--black);
text-decoration: none;
}

.EmergencyExitButton {
    position: fixed;
    bottom: 3vh;
    right: 1vw;
    text-decoration: none;
    background-color: var(--red);
    padding: var(--step-1);
    font-size: var(--step-1);
    color: var(--white);
    border-radius: 1000px;
}
.EmergencyExitButton:hover{
    text-decoration: none;
    box-shadow: inset 0px 0px 3px 3px var(--black);
}

.margin-bottom-none{
    margin-bottom: 0;
}
.margin-bottom-xs {
    margin-bottom: var(--step-0);
}
.margin-bottom-s {
    margin-bottom: var(--step-2);
}
.margin-bottom-m {
    margin-bottom: var(--step-3);
}
.margin-bottom-l {
    margin-bottom: var(--step-5);
}
.margin-bottom-xl {
    margin-bottom: var(--step-6);
}

.margin-left-l {
    margin-left: var(--step-5);
}


.font-size-xl{
    font-size: var(--step-6);
}
.font-size-l{
    font-size: var(--step-5);
}
.font-size-m{
    font-size: var(--step-3);
}
.font-size-s{
    font-size: var(--step-2);
}
.font-size-xs{
    font-size: var(--step-0);
}
.font-size-xxs{
    font-size: var(--step--2);
}