/*
      --01 TYPOGRAPHY SYSTEM

      font-weight: 
      400 (default)
      medium - 500
      semi-bold - 600
      bold - 700 

      line-height: 
      1(default)
     small: 1.05
      medium : 1.2
      paragraph default : 1.6
      large: 1.8

      letter-spacing:
      -0.5px
      0.75px

      FONT-SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

      --02 COLORS

      Primary color: #FFE427

      tints: #fffdeb;
      shades: #e0c600
       #fff8c2;

      
      accents:
      gray:
      #aaa(Lightest gray allowed on #000)
      #888
      #555
      #333
      rgba(153, 153, 153, 0.16)
   
 
      --03 SHADOWS
        box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

      --04 BORDER-RADIUS
      default: 9px
      meedium: 11px

      --05 WHITESPACE

            Spacing-system(px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.3%;

  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body {
  font-family: "rubik", sans-serif;
  background-color: black;
  color: #555;
  font-weight: 400;
  line-height: 1;
  overflow-x: hidden !important;
}

.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.margin-rt {
  margin-right: 1.2rem;
}

.unordered-list {
  list-style: none;
}

/* HEADER NAVIGATION */

header {
  display: flex;
  justify-content: space-between;
  padding: 3.2rem 4.8rem;
  margin: 0 auto;
  max-width: 100%;
}

.logo {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.6rem;
  color: #fff;
  padding: 0.4rem;
  text-decoration: none;
}

.nav-link-box {
  display: flex;
  gap: 6.4rem;
}

.nav-link:link,
.nav-link:visited {
  text-decoration: none;
  color: #fff;
  font-size: 1.6rem;
  padding: 0.4rem;
  transition: all 0.3s;
}

.nav-link:hover,
.nav-link:active {
  color: #ffe427;
  box-shadow: 0px 1px 0px #ffe427;
}

.nav-link-box .active {
  color: #ffe427;
}

/* *************************** */
/* MOBILE */
/* *************************** */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #fff;
}

.close-btn {
  display: none;
}

*:focus {
  outline: none;
  /* box-shadow: 0 0 0 0.8rem #fff8c290; */
}

footer {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.8rem;
  padding: 3.2rem;

  background-color: #555;
}

.copy-right {
  font-size: 1.2rem;
  color: #aaa;
}

.copy-right a:link,
.copy-right a:visited {
  color: #ffe427;
  text-decoration: none;
}

.copy-right a:hover,
.copy-right a:active {
  color: #e0c600;
}