application.css

:root {
  --text-1: 0.5rem;
  --text-2: 1rem;
  --text-3: 1.5rem;
  --text-4: 2rem;
  --text-5: 2.5rem;
  --text-6: 3rem;
  --main: #03045e;
  --main-comp-1: white;
  --main-comp-2: #cddfdf;
  --main-comp-3: #a8c7c7;
  --main-comp-4: #406464;
  --main-comp-5: #304b4b;
  --gs-1: #ffffff;
  --gs-2: #f5f5f5;
  --gs-3: #e0e0e0;
  --gs-4: #c2c2c2;
  --gs-5: #858585;
  --gs-6: #5c5c5c;
  --gs-7: #474747;
  --gs-8: #292929;
  --gs-9: #1f1f1f;
  --main-acc-1: #fdc872;
  --main-acc-2: #fcb84a;
  --main-acc-3: #fca822;
  --main-acc-4: #f19604;
  --comp-acc-1: #ba3b46;
  --comp-acc-2: #8c2c34;
  --comp-acc-3: #6d2228;
  --comp-acc-4: #4e181d;
  --button: #deb72b;
  --button-text: #ffffff;
  --button-hover: #c29f1e;
  --button-hover-text: #ffffff;
  --glass: 29, 29, 32;
  --text: #292929;
  --header-font: "Raleway", sans-serif;
}

html {
  font-size: 18px;
  background: var(--main-comp-1);
}

form {
  padding: 1rem 1rem;
}

.header-container {
  display: flex;
  justify-content: center;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.invalid {
  color: red;
  caret-color: black;
}

.valid {
  background-color: rgb(0, 128, 0, 0.3);
  caret-color: black;
}

.center {
  display: flex;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
}

/************** MOBILE HEADER *************/
/******************************************/

.mobile-container {
  margin: auto;
  background-color: var(--main);
  height: 500px;
  color: white;
}

.topnav {
  overflow: hidden;
  background-color: var(--main);
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  text-align: center;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.mobile-visible {
  display: none;
  justify-content: center;
  margin: 1rem 0;
}

.mobile-header-logo {
  display: none;
  max-width: 2rem;
  align-self: flex-start;
  height: auto;
}

.burger {
  display: none;
  cursor: pointer;
  align-self: center;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 38rem) {
  .mobile-visible {
    display: flex;
    margin: 0 0;
    justify-content: space-between;
  }

  .mobile-header-logo {
    display: block;
    max-width: 2rem;
    margin: 0.5rem 0.5rem;
  }

  .burger {
    display: block;
    font-size: var(--text-3);
    margin-right: 1rem;
  }
}

/*********************** DESKTOP HEADER / NAV BAR ****************/
/*****************************************************************/

.my-header {
  padding: 1.2rem 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  z-index: 1;
}

#sticky {
  position: sticky;
  width: 100%;
  top: 0;
  padding: 0 0;
  border-bottom: solid 2px gray;
}

.my-logo {
  transform: translate(0, 0.5rem);
  font-size: 2rem;
  margin-left: 1rem;
}

.my-nav-container {
  margin: 0rem 3rem 0rem 0rem;
  font-size: var(--text-3);
}

@media only screen and (max-width: 50rem) {
  .my-nav-container {
    margin: 0rem 1rem 0rem 0rem;
    font-size: var(--text-2);
    font-weight: bolder;
  }

  .my-logo {
    width: 60%;
  }
}

@media only screen and (max-width: 38rem) {
  .my-header {
    display: none;
  }
}

.my-nav-container .donate-nav {
  background-color: ;
}

.my-nav-container a {
  color: var(--comp-acc-1);
  padding: 1rem 1rem;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: 200;
}

.my-nav-container a:hover,
.my-nav-container a:focus {
  color: var(--comp-acc-1);
  padding: 1rem 1rem;
  font-style: italic;
}

.title-area {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  color: var(--gs-2);
  background-color: var(--main);
  border-top: var(--comp-acc-1) 6px solid;
  padding-bottom: 1rem;
}

.name-banner {
  text-align: center;
  font-size: var(--text-4);
  margin: 0.75rem 0;
  font-weight: 800;
}

body {
  position: relative;
}