.teko-description {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}
body {
  color: #1c110a;
  background-color: #e4d6a7;
  /* color: #13262f; */
  /* background-color: #b0a084; */
}
.navi {
  background-color: #9b2915;
  /* border: solid #751605; */
  border-bottom: solid #881c09;
  /* margin-bottom: 10px; */
  color: #ebc06a;
  position: sticky;
  top: 0;
  z-index: 1;
  /* border: solid black; */
}

.g {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}
.g:hover {
  color: #e4af45;
  transform: scale(1.1);
  font-weight: bold;
  text-decoration: underline #58a4b0;
  text-decoration-thickness: 2px;
  /* font-size: larger; */
}

.guitars {
  color: #1c110a;
  /* background-color: palegreen; */
  display: flex;
  flex-direction: column;
  /* justify-items: center; */
  align-items: center;
  /* padding: 1rem; */
  /* margin: 120px 250px; */
  margin: 120px 400px;
  gap: 4rem;
  /* width: 1000px; */
  /* padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  max-width: 1200px;
  margin: 0 auto;
  padding: 0; */
}

.guitar-image {
  object-fit: contain;
  height: 400px;
  width: 600px;
  /* border-radius: 20px;
  overflow: hidden;
  height: auto; */
  /* background-color: #9b2915; */
  /* mix-blend-mode: color-burn; */
  /* height: auto; */
}

.dues,
.esp,
.epi,
.nebu,
.frank,
.iba {
  /* border-radius: 10px; */
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-items: center; */
  align-items: center;
  background-color: #ebc06a;
  border: solid #f1b335;
}

.dues {
  /* background-color: palevioletred; */
  /* background-color: #335c67; */
  /* background-color: #e09f3e; */
  /* color: #540b0e; */
  /* background-color: #ebc06a; */
  transition: transform 0.3s ease-in-out;
  /* transition: rotate 0.5s ease-in-out;  ROTATE THE IMAGEEEEE*/
}
.dues:hover {
  /* transform: translate(400px, 200px); */
  /* transform: skew(45deg); */
  transform: scale(1.01);
}
.esp {
  /* background-color: #eddea4; */
}
.epi {
  /* background-color: #f3c677; */
}
.nebu {
  /* background-color: #9bc59d; */
}
.frank {
  /* background-color: blueviolet; */
}
.iba {
  /* background-color: wheat; */
}

@font-face {
  font-family: "GameOfSquids";
  src: url("/fonts/game_of_squids-webfont.woff") format("woff"),
    url("/fonts/game_of_squids-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "lingkawi_south";
  src: url("/fonts/lingkawi_south-webfont.woff") format("woff"),
    url("/fonts/lingkawi_south-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "VarentGrotesk";
  src: url("/fonts/varentgrotesk-bold-webfont.woff") format("woff"),
    url("/fonts/varentgrotesk-bold-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "NeueMetana-Bold";
  src: url("/fonts/neuemetana-bold-webfont.woff") format("woff"),
    url("fonts/neuemetana-bold-webfont.woff2") format("woff2");
}

@font-face {
  font-family: "MangoGroteque";
  src: url("/fonts/mangogrotesque-extbdita-webfont.woff") format("woff"),
    url("fonts/mangogrotesque-extbdita-webfont.woff2") format("woff2");
}

.navi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  font-weight: bold;
}

.navi h1 {
  font-family: "GameOfSquids", "sans-serif";
  font-size: 60px;
  transition: all 0.3s ease-in-out;
}
.navi h1:hover {
  transform: translate(-390px, 55px) rotate(360deg) scale(1.1);
  /* font-weight: bold; */
}
.navi h2 {
  font-family: "lingkawi_south";
  padding-top: 13px;
}

.name {
  font-family: "VarentGrotesk";
  /* font-family: "NeueMetana-Bold"; */
  /* font-family: "MangoGroteque"; */
  font-size: 40px;
  font-weight: 500;
  padding: 20px 0;
}

.description {
  font-family: "Teko", sans-serif;
  font-weight: 500; /* Adjust weight as needed */
  font-size: 22px;
  padding: 20px 25px;
}

.guitar-link {
  text-decoration: none;
  color: #1c110a;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}
.guitar-link:hover {
  border-bottom: solid #9b2915;
  /* color: #58a4b0; */
  /* color: #af1b3f; */
  transform: scale(1.03);
  /* border-bottom: solid #2b3b85; */
  font-weight: bold;
  text-decoration-thickness: 2px;
}
.artist-link {
  text-decoration: none;
  color: #9b2915;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  font-weight: bold;
  font-family: "MangoGroteque";
  font-size: 24px;
}
.artist-link:hover {
  transform: scale(1.1);
  transform: rotate(360deg);
  /* transform: translate(8px, -5px); */
  padding: 2px;
  border: solid #9b2915;
}

.footerr {
  background-color: #1c110a;
  border-top: solid #110701;
  width: auto;
  height: 300px;
  color: #ebc06a;
  font-family: "Teko", sans-serif;
  margin-bottom: 0;
  position: relative;
}
.footer-content {
  /* background-color: #9b2915; */
  width: auto;
  height: 170px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.f-section {
  /* background-color: aquamarine; */
}
.f-header {
  /* background-color: coral; */
  font-family: "GameOfSquids", "sans-serif";
  font-size: 27px;
  padding: 22px;

  /* font-family: "MangoGroteque"; */
}
.f-links {
  /* background-color: violet; */
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 1000px; */
  /* margin-top: 10px; */
}
.f-link {
  /* background-color: chartreuse; */
  text-decoration: none;
  color: #ebc06a;
  /* margin: 10px;
  padding: 10px; */
  /* font-weight: bold; */
  /* font-family: "NeueMetana-Bold"; */
  /* line-height: 2; */
  font-size: 20px;
}
.footer-bottom {
  /* background-color: #58a4b0; */
  width: auto;
  height: 80px;
  text-align: center;
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  padding-top: 44px;
  border-top: solid #110701;
}
.social-links {
  text-align: center;
  gap: 20px;
  font-size: 27px;
}
.icon {
  padding: 0 7px;
  text-decoration: none;
}