@font-face {
  font-family: "Poppins";
  font-weight: 400;
  src: 
    local("Poppins"),
    url("fonts/Poppins-Regular.ttf") format("TrueType");
}

@font-face {
  font-family: "Poppins SemiBold";
  font-weight: 700;
  src: 
    url("fonts/Poppins-SemiBold.ttf") format("TrueType");
}

@font-face {
  font-family: "Poppins ExtraBold";
  font-weight: 800;
  src: 
    url("fonts/Poppins-ExtraBold.ttf") format("TrueType");
}


:root {
  --text-font: "Poppins", sans-serif;
  --title-font: "Poppins ExtraBold", sans-serif;
  --bold-font: "Poppins SemiBold", sans-serif;


  --dark-blue: #183d4d;
  --energy-orange: #fcad06;
  --cloud-white: #eeeeee;
  --full-black: #000000;
  --light-grey: #999999;
  --ultra-light-grey: #eeeeee;

  --text-light: var(--full-black);
  --text-dark: var(--ultra-light-grey);

  --body-light: var(--cloud-white);
  --body-dark: var(--dark-blue);

  --primary-color: var(--dark-blue);
  --secondary-color: var(--cloud-white);
  --accent-color: var(--energy-orange);

  --logo-max-width: 200px;

  --box-shadow: 0 0 5px black inset;
  --text-shadow-color: var(--full-black); 
}

body {
  font-family: var(--text-font);
  color: var(--text-light);
  background-color: var(--ultra-light-grey);
}

body > * {
  max-width: 960px;
  margin:0 auto;
  box-sizing: border-box;
  padding: 1rem;
}

nav {
  display: grid;
  grid-template-columns:1fr;
  grid-gap: 2rem;
  margin-top: 2rem;
}


/*Mobile First*/
nav div { display: none; }

nav a {
  color: var(--primary-color);
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--bold-font);
}

header {
  width:100%;
  background-color: var(--primary-color);
  background-image: url('/images/background_office_fadded.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  margin-top: 2rem;  
}

header h1 {
  text-shadow: 0px 0px 8px var(--text-shadow-color);
  color: var(--secondary-color);
  font-size: 3rem;
}

header h2 {
  text-shadow: 0px 0px 8px var(--text-shadow-color);
  color: var(--accent-color);
  text-transform: uppercase;
}

footer {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color);
  color: var(--text-dark);
  margin-top:2rem;
  border-radius:1rem;
  box-shadow: var(--box-shadow);
}

footer p {
  font-size: 0.6rem;
}

footer a {
  color: var(--secondary-color);
  font-family: var(--bold-font);

}

h1, 
h2, 
h3, 
h4 {
  font-family: var(--title-font);
  font-weight: normal;
  color: var(--primary-color);
}

strong {
  font-family: var(--bold-font);
}

#logo {
  max-width: var(--logo-max-width);

}

img#community {
  max-width: 64px;
  margin: 1rem 0; 
}

hr {
  color: var(--primary-color);
  opacity: 0.1;
}

.button {
  padding:1rem;
  background-color: var(--primary-color);
  color: var(--accent-color);
  border-radius: 1rem;
  margin: 0 auto;
  display: inline-block;
  text-decoration: none;
  font-family: var(--bold-font);
}

@media screen and (min-width: 720px) {
  nav {
    grid-template-columns: var(--logo-max-width) 1fr;
    grid-gap: 2rem;
  }

  nav div {
    display:flex;
    align-items: end;
    justify-content: end;
    gap: 2rem;
  }

  header {
    padding: 6rem 2rem;
  }

  header div {
    grid-template-columns: var(--logo-max-width) 1fr;
    align-items: end;
  }

  header h1 { 
    margin:0;
    font-size:4rem;
  }

  
  h3 { font-size: 2rem;}
}

@media screen and (min-width: 1080px) {
  header {
    padding-left:6rem;
    margin-bottom: 2rem;
    max-width: calc(960px + 8rem);
  }

}