@font-face {
  font-family:Noto-sans;
  src:url(./Fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf);
}

* {
  margin:0px;
  padding:0px;

  font-family:Noto-Sans;
  font-weight:200;
}

h1 {
  font-weight: 300;
}

a {
  text-decoration: none;
  color: black;
  transition-duration: 0.75s;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: none;
  color: darkblue;
}
/* ========== NAVIGATION ========== */
#nav_bar {
  width: 100svw;
  height: 4rem;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#branding {
  width: 40svw;

  text-align: center;
  font-weight: 400;
}
.nav_element {
  width: 20%;

  padding: 0.5rem;
  text-align: center;
}
@media(max-width: 480px) {
#nav_bar {
  flex-direction: column;
  height: auto;
  padding-bottom: 1rem;
}
#branding {
  width: 100svw;
  font-size: 1.85rem;
}
.nav_element {
  width: 100svw;
  text-align: center
}
}

/* ========== BANNER ========== */
#banner {
  width: 100svw - 24rem;
  height: 35rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;

  color: white;

  background-image: linear-gradient(
    90deg,
    rgba(7, 73, 181, 0.5) 30%,
    rgba(0, 212, 255, 0.3) 100%),
    url("./Images/banner.jpg");
  background-size: cover;
  background-position: left;

  padding-left: 12rem;
  padding-right: 12rem;

}
#banner h1 {
  font-weight: 200;
}
#banner p {
  font-size: 3rem;
  font-weight: 500;
}
#call_to_action {
  background-color: #FAD961;
  background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
  transition-duration: 0.75s;

  border-radius: 30px;
  border: 1px solid white;

  font-weight: 500;
  color: white;

  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#call_to_action:hover {
  font-weight: 900;
  border: 1px solid white;
}
@media(max-width: 900px) {
#banner {
  width: 100svw - 12rem;

  padding-left: 6rem;
  padding-right: 6rem;
}
}
@media(max-width: 600px) {
#banner {
  width: 100svw - 4rem;

  padding-left: 2rem;
  padding-right: 2rem;
}
#banner h1 {
  font-size: 1.5rem;
}
#banner p {
  font-size: 2rem; 
}
}
@media(max-width: 400px) {
#banner {
  width: 100svw - 2rem;
  padding: 1rem;
}
#banner h1 {
  text-align: left;
  font-size: 1.5rem;
}
}
/* ========== CONTENT ========== */
#content {
  display: flex;
  flex-diretion: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
article {
  width: 35%;
  margin: 1rem;
  text-align: justify;
}
#intro {
  width: 80%;
  margin: 2rem;
}
#outro {
  width: 80%;
  margin: 2rem;
}
article h3 {
  font-weight: 500;
  text-align: left;
}
@media(max-width: 900px) {
article {
  width:80%;
}
}
@media(max-width: 600px) {
.mobile {
  display: none;
}
}
/* ========== FOOTER ========== */
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100svw;
  background-color: blue;
  color: white;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-image: linear-gradient(
    90deg,
    rgba(7, 73, 181, 0.5),
    rgba(0, 212, 255, 0.3)),
    url(./Images/footer.jpg);
  background-size: cover;
  background-position: center;
  text-align: center;
}
footer a {
  color: white;
  font-weight: 500;
}
footer a:visited {
  color: white;
}
footer p {
  font-weight: 500;
}