*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}

body,
html {
  height: 100%;
  scroll-behavior: smooth;
}

@font-face {
  font-family: "Lato";
  src: url("./Lato-Regular.ttf");
}

html,
body {
  background: #1a1a1a;
  height: 100%;
  font-family: "Lato", sans-serif;
  color: #fff;
}

html {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 1000px;
}

.nt-header {
  position: relative;
  width: 100%;
}

.nt-header-background {
  width: 100%;
  height: auto;
}

.nt-header-logo {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 40%;
  margin-left: -20%;
}

.nt-main {
  width: 100%;
}

.nt-social {
  position: relative;
  height: 200px;
  margin-top: -100px;

  background: #20262d;
  background: linear-gradient(
    to bottom,
    rgba(32, 38, 45, 0),
    rgba(32, 38, 45, 1) 50%,
    #20262d 50%
  );

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.nt-social-icon {
  width: 50px;
}

.nt-social-link:hover .nt-social-icon path {
  fill: #e4dcc4;
}

.nt-section-header {
  padding-top: 70px;
  padding-bottom: 40px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.nt-section-body {
  background: #1b1d20;
  padding: 0;

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

section {
  padding: 0 40px;
  background: #20262d;
}

footer {
  width: 100%;

  display: flex;
  flex-direction: column;
}

.nt-footer {
  background: #1b1d20;
  padding: 40px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

h2 {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 700;
}

h3 {
  font-size: 17px;
  letter-spacing: 10px;
  text-transform: uppercase;
}

.nt-footer-contact {
  font-size: 30px;
}

p {
  font-size: 14px;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #e4dcc4;
}

@media (max-width: 1000px) {
  body {
    max-width: 100%;
  }

  .nt-social {
    gap: 35px;

    height: 100px;
    margin-top: -50px;
  }

  .nt-social-icon {
    width: 35px;
  }

  .nt-section-header {
    height: auto;
    padding: 20px;
    padding-top: 40px;
    gap: 15px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 11px;
    letter-spacing: 7px;
  }

  .nt-footer-contact {
    font-size: 20px;
  }

  p {
    font-size: 10px;
  }

  .nt-section-body iframe {
    width: 100%;
  }

  .nt-footer {
    padding: 20px;
    padding-top: 30px;
    gap: 10px;
  }

  .nt-yt-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.nt-yt-container {
  position: relative;
  width: 100%;
  padding-bottom: 52.5%;
  height: 0;
  overflow: hidden;
}

.nt-item-list {
  background: #20262d;
  display: flex;
  /* distance between items 20px, vertical*/
  gap: 20px;
  flex-direction: column;
}

.nt-section-body-spotify {
  /* css gradient, first half is #1f1f1f, second half is #121212*/
  background: linear-gradient(to bottom, #1f1f1f 50%, #121212 50%);
}


@media (max-width: 500px) {
  .nt-social {
    gap: 13px;
  }
}