@import url("https://use.typekit.net/xjp7rtu.css");
/*
Let's get the font minimum and preferred font-sizes and screen widths in pixels
We know that we want the font size at the root level to be 10px for the design screen size of 430px.
We will use rem units in the individual elements to scale this size.
By trial and error, we find that for the minimum supported screen size (320px) to be 7.6px
*/
/*
Consider a graph with screen size as the x axis, and the font size as the y axis.
We can plot a line with the two points (min-screen-width, min-font-size), (preferred-screen-width, preferred-font-size)
Note that formula for a line is:
y = mx + b
where
m is the slope of the line
    m = (y2 - y1)/(x2 - x1)
b is the y intercept
    y - y1 = m(x - x1)
    at the y intercept, x = 0, y = b
    b - y1 = m(0 - x1)
    b = -m(x1) + y1
Calculate those values
*/
:root {
  /*
  First, we clamp the font size by making sure it never goes below the minimum (47.5% of 16px)
  and above the maximum (72.5% of 16px)
  Next, we calculate the font size - note that we have calculated the slope and intercept of the graph above
  As specified, the graph takes the screen width on the x axis, and font size for the y axis. Solving for y
  y = mx + b
  = (slope * screen width) + intercept
  = (slope * 100vw) + intercept
  Finally, plugging in this final equation into the clamp preferred option
  */
  font-size: clamp(47.5%, 2.1818181818vw + 0.6181818182px, 72.5%);
}

body {
  background: black;
}

body::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

@font-face {
  font-family: "futura";
  src: url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "futura";
  src: url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Regular.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Medium.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Bold.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
header,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "futura", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

body {
  font-size: 1.6rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

div,
section,
p,
ul,
span,
button {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

header,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

a,
button {
  text-decoration: none;
  cursor: pointer;
}

p,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
  padding: 0;
}
figure img {
  margin: 0;
}

.template {
  overflow-x: hidden;
}

.nav-header {
  background-color: #1F1F1F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7rem;
  padding: 0 1.5rem;
  width: 100vw;
  z-index: 1;
  transition: opacity 0.5s, transform 0.5s, height 0.3s;
}
@media screen and (min-width: 1023px) {
  .nav-header {
    width: 100%;
    background-color: #1a1a1a;
    box-shadow: 0px 0px 5px black;
    overflow: visible;
    height: 9rem;
  }
}
.nav-header .logo-holder {
  display: flex;
  align-items: center;
  transition: width 0.3s;
  overflow: hidden;
}
.nav-header .logo-holder img {
  width: 4.8rem;
  object-fit: contain;
}
@media screen and (min-width: 1023px) {
  .nav-header .logo-holder img {
    width: 5rem;
  }
}
.nav-header .logo-holder h5 {
  font-size: 2.9rem;
  color: #E8E8E8;
  letter-spacing: 0.2rem;
  font-weight: 200;
  transition: font-size 0.3s;
  font-family: "Oswald", sans-serif;
}
@media screen and (min-width: 1023px) {
  .nav-header .logo-holder h5 {
    font-size: 2.5rem;
    color: rgb(245.4, 245.4, 245.4);
  }
}

.nav-header .nav-links {
  display: none;
}
@media screen and (min-width: 1023px) {
  .nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #DEDEDE;
  }
  .nav-header .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  .nav-header .nav-links .social-media-links {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .nav-header .nav-links .social-media-links a {
    margin: 0;
    padding: 0;
  }
  .nav-header .nav-links .social-media-links a img {
    color: #DEDEDE;
    width: 1.4rem;
    height: 1.4rem;
  }
  .nav-header .nav-links a {
    text-decoration: none;
    color: #DEDEDE;
    font-size: 1.4rem;
  }
}

/*# sourceMappingURL=style.css.map */