body {
    margin: 0;
    padding: 0;
}

* {
  box-sizing: border-box;
}

/* Colors */
:root {
  --dkGreen: #002615;
  --green: #00CC73;
  --blue: #00DFCD;
  --beige: #F6F6E7;
}

/* Fonts */
@font-face {
    font-family: 'Gazzetta';
    src: 
      url(../fonts/Gazzetta-BlackSlanted.ttf) format('truetype'),
      url(../fonts/Gazzetta-BlackSlanted.woff2) format('woff2'), 
      url(../fonts/Gazzetta-BlackSlanted.woff) format('woff'),
      url(../fonts/Gazzetta-BlackSlanted.otf) format('opentype');
    font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url(../fonts/Outfit-VariableFont_wght.ttf) format('truetype');
}

/* Text styles */
h1 {
    font-family: 'Gazzetta', Arial, Helvetica, sans-serif;
    text-transform: uppercase;

    font-size: 6rem;
    font-weight: 400;
    line-height: .9;
    margin: 1vh 0 1vh 0;
  
}

h2 {
    font-family: 'Gazzetta', Arial, Helvetica, sans-serif;
    text-transform: uppercase;

    font-size: 4.75rem;
    font-weight: 400;
    line-height: .9;
    margin: 1vh 0 1vh 0;
}

h3 {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;

    font-size: 2rem;
    font-weight: 400;
    line-height: 100%;
    margin: 1vh 0 1vh 0;
}

h4 {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    text-transform: uppercase;

    font-size: 1.25rem;
    font-weight: 500;
    line-height: 130%;
    margin: 0;
    margin-bottom: 1vh;
}

h5 {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;

    font-size: 1.25rem;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
    margin-bottom: 1vh;
}

p {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;

    font-size: 1rem;
    line-height: 130%;
}

/* Navigation bar */
.nav-bar {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: 16px 64px;

    border-bottom: solid 1px rgba(0, 204, 115, 0.15);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2;

    transition: top 0.3s;
}

.nav-bar .nav-text {
    display: block
}

.nav-text li {
    list-style: none;
    padding: 0 16px;
    float: left;
}

.nav-text a {
    color: white;
    text-decoration: none;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    opacity: .75;
}

.nav-text a:hover {
    opacity: 1;
}

.nav-bar .buttonDefault {
    font-size: 0.875rem;
}

.active {
  opacity: 1;
}

/* Buttons */
.buttonDefault {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    background-color: var(--blue);
    border: 1px solid var(--blue);
    color: white;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.buttonDefault:hover {
    background-color: white;
    border: 1px solid var(--dkGreen);
    color: var(--dkGreen);
    transition: 0.25s ease 0s;
}

.buttonLight {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    background-color: white;
    border: none;
    color: var(--dkGreen);
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.buttonLight:hover {
    background-color: var(--dkGreen);
    color: white;
    transition: 0.25s ease 0s;
}

.buttonOutline {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    background-color: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.buttonOutline:hover {
    border: 1px solid var(--dkGreen);
    color: var(--dkGreen);
    transition: 0.25s ease 0s;
}

.left, .right {
    width: 100%;
    height: 100%;
}

.overlay {
  position: fixed;
  height: 100%;
  width: 0;
  background-color: var(--green);
  
  z-index: 3;
  overflow-x: hidden;
  transition: width 0.5s ease 0s;
}

.overlay a {
  padding: 15px;
  font-size: 36px;
  display: block;
  transition: color 0.3s ease 0s;
}

.overlay a:hover,
.overlay a:focus {
  color: #0088a9;
}

.nav-bar .icon {
  display: none;
}

.nav-logo:hover {
  cursor: pointer;
}

.X{
  display:none;
}

.nav-bar-mobile {
  display: none;
}

/* Footer */
.footer {
    background-color: var(--dkGreen);
    padding: 64px 128px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.footer .linkContainer {
    display: flex;
    flex-direction: row;
    gap: 64px;
}

.footer a {
    color: var(--green);
    text-decoration: none;

    font-family: 'Outfit', Arial, Helvetica, sans-serif;

    font-size: 1rem;
    font-weight: 500;

    text-align: center;
}
.footer a:hover {
    text-decoration: underline;
    cursor: pointer;
}


/* Mobile version */
@media screen and (max-width: 900px){

h1 {font-size: 5rem;}

h2 {font-size: 4rem;}

h3 {font-size: 1.5rem;}

.X{
  display: none;
  z-index: 5;
  position: fixed;
  top: 16px;
  right: 32px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.nav-bar-mobile {
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  justify-content: flex-end;
  align-items: left;
  flex-direction: column;
  padding: 0 24px 32px 24px;
}

.nav-bar-mobile li {padding: 1.25rem 0;}

.nav-bar-mobile li a {
  font-size: 5em;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  line-height: .9;

  color: white;
  font-family: 'Gazzetta', Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

/* the whole navigation bar */
.nav-bar {
  padding: 2.5vh 7vw 2.5vh 7vw;
}


.nav-bar li {
  display: none;
  float: none;
}

.nav-bar .buttonDefault {
    display: none;
}

.nav-bar .icon {
  display: flex;
  color: white;
  z-index: 100;
  transform: scale(1.4);
}

/* the navigation bar text container */
.nav-text {
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.footer {
  flex-direction: column;
  padding: 48px 24px;
  gap: 48px;
}
.footer .linkContainer {
    flex-direction: column;
    gap: 16px;
}

}