* {
    padding: 0;
    margin: 0;
    
}

:root { color-scheme: normal;
--red: #CE4431;
--blue: #3B7080;
--yellow: #F0A202;
--black: #1f0A07;
--white: #fff8eb;
--shadow: light-dark(black, #131313);
}
@font-face {
  font-family: 'Norwester';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/norwester@latest/latin-400-normal.woff) format('woff'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/norwester@latest/latin-400-normal.woff2) format('woff2');
}
@font-face {
    font-family: "Bree Serif W04 Regular";
    src: url("https://db.onlinewebfonts.com/t/eb4e3ea21916ccceedccb322d63d9992.eot");
    src: url("https://db.onlinewebfonts.com/t/eb4e3ea21916ccceedccb322d63d9992.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/eb4e3ea21916ccceedccb322d63d9992.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/eb4e3ea21916ccceedccb322d63d9992.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/eb4e3ea21916ccceedccb322d63d9992.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/eb4e3ea21916ccceedccb322d63d9992.svg#Bree Serif W04 Regular")format("svg");
}

body {
    background-color: var(--white);
    color: var(--black);
    font-family: 'Bree Serif W04 Regular';

}

h1, h2, h3, ul, a {
    font-family: 'Norwester';
}

/* norwester-latin-400-normal */



    
section {
    padding-bottom: 2rem;
}

p {
    font-family: 'Bree Serif W04 Regular';
}

main {
    text-align: center;
    
}


header a {
    color: var(--white);
}
header a:hover {
    color: var(--black);
}
a:hover, a:focus {
	color: var(--black); 
	font-weight: bold; 
    font-size: 1.5em;
    text-decoration: none;
    padding: 0.5rem;
	outline: none;
}
:focus-visible {outline: .2em solid var(--white); outline-offset: .2em;}
::selection {color: var(--white); background-color: var(--black);}



.logoLeftCorner img{
    max-width: 13%;
    position: fixed;
    border-style: solid;
     color: var(black);
}
.threeLines img{
    max-width: 15%;
    position: fixed;
    top: 0%;
    right: 0%;
    border-style: solid;
     color: var(black);
     padding: 0.5rem;
}
.threeLines a img{
    border: none;
    max-width: 10%;
}

 .logoLeftCorner a img {
    border-color: var(--black);

}
.header-grid-container {
    display: grid;
    grid-template-columns:  1fr 1fr 1fr 1fr; 
    margin-inline: auto;
    padding-bottom: 10rem;
    background-color: var(--blue);
    color: var(--white);
    list-style-type: none;

width: 100%;
height: 35%;
padding: 1rem;
position: fixed;
top: 0;
font-size: 4vw;

}

.header-grid-container a {
    text-decoration: none;
    color: white;
    
}

.dropdown {
    position: relative;
}

.dropdownContent {
  display: none;
  position: relative;

}

.dropdown:hover .dropdownContent {
      display: grid;

}


.header-grid-container a:hover {
    color: var(--yellow);
}




.navSublist {
    list-style-type: none;
    font-size: 3vw;
}


.pageTitle {
    color: var(--black);
    font-size: 3em;
}
.sectionHeader {
color: var(--white);
    background-color: var(--red);
    text-align: center;
}

.mainPageContent{
font-size: 1em;
width: 70%;
margin: auto;
}
.mainPageContent img {
    width: 100%;
}


.buttonContainer {
    align-items: center;
    
}
button:hover {
    color: black;
}

#what_is {
    text-align: left;
}
#what_is li {
    margin: 1rem
}
#points_of_unity {
    text-align: left;

}
#currentPage:link {
    color: var(--black);
}