/* ================== FONTS ================== */
@font-face {
  font-family: "CoolFont";
  src: url("uglyhandwriting.ttf") format("truetype");
  font-display: swap;
}



/* ================== GLOBAL ================== */
body {
  background-color: #141414;
  overflow-x: hidden;
  margin: 0;
  
}

a {
  font-family: "CoolFont", sans-serif;
  text-decoration: none ;
}

hr {
  border: 4px solid #181818;
  border-radius: 5px;

}

p {
  padding: 10px;
  text-align: center;
  font-family: "CoolFont", sans-serif;
  font-size: clamp(8px, 4vw, 26px);
  color: white;

  -webkit-text-stroke: 4px #070707;
  paint-order: stroke fill;
}

em {
  font-family: "CoolFont", sans-serif;
  font-size: clamp(8px, 4vw, 28px);
  color: rgb(232, 232, 72);
}

::-webkit-scrollbar {
  width: auto;
  background-color: #e1fd64;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: rgb(27, 27, 27); 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #000000; 
}

/* ================== NAVBAR ================== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #181818;
  z-index: 5;
}

.navbar a {
  font-family: "CoolFont", sans-serif;
  display: block;
  color: #f2f2f2;
  font-size: 20px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s ease;
}

.navbar a:hover {
  background: #f3e97e;
  color: black;
  border-radius: 50px;
  transform: scale(1.2);
}

/* ================== LAYOUT ================== */
.main {
  margin-top: 60px; 
  
}

.other {
  background-image: url("https://github.com/tvvistee/testing/blob/main/background2.png?raw=true");
  background-size: cover;
  background-repeat: repeat-x;
  background-position: 0 0;

  animation: moveBg 35s linear infinite;
}

.main img:hover {
  transform: scale(1.2);
  transition: 0.3s ease;
}

.main img:active {
  transform: scale(1.3);
  transition: 0.3s ease;
}

.main img:not(:hover) {
  transform: scale(1.0);
  transition: 0.3s ease;
}

@keyframes moveBg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 830px 0;
  }
}

.maintitleimage {
  display: block;
  margin: auto;
  width: 100%;
  padding-left: 10px;
  background-color: #141414;
  
}

.links {
  text-align: center;
}


.link:hover {
  transform: scale(1.2);
  transition: 0.4s ease;
}

.link:not(:hover) {
  transform: scale(1);
  transition: 0.4s ease;
}

.link:active {
  transform: scale(1.3);
  transition: 0.4s ease;
}


.youtube {
  padding:5px;
  background-color: #181818;
  border-radius: 5px;
  text-decoration: none;
  color: rgb(206, 65, 65);
}

.aoty {
  padding:5px;
  background-color: #181818;
  border-radius: 5px;
  text-decoration: none;
  color: rgb(99, 99, 99);
}

.spotify {
  padding:5px;
  background-color: #181818;
  border-radius: 5px;
  text-decoration: none;
  color: rgb(68, 135, 95);
}

.soundcloud {
  padding:5px;
  background-color: #181818;
  border-radius: 5px;
  text-decoration: none;
  color: rgb(255, 121, 44);
}

.applemusic {
  padding:5px;
  background-color: #181818;
  border-radius: 5px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.youtube:hover {
  color: rgb(118, 36, 36);
}

.spotify:hover {
  color: rgb(18, 66, 21);
}

.soundcloud:hover {
  color: rgb(118, 72, 2);
}

.applemusic:hover {
  color: rgb(148, 147, 147);
}

.aoty:hover {
  color: rgb(47, 47, 47);
}


.video {
  display: block;
  margin: auto;
}

.albumart {
  display:block;
  width: 50%;
  margin: auto;
  box-shadow: #000000;
  padding-bottom: 25px;
}

.paragraph1 {
  width: 75%;
  margin: auto;
}

.header__inner {
  line-height: 0%;
  text-decoration: none;
}

.fboxcontainer {
  display: flex;
  flex-direction: row;        
  gap: 12px;                  

  width: 100%;
  height: 300px;            

  overflow-x: auto;           
  overflow-y: hidden;

  padding: 20px;
  box-sizing: border-box;
}

.item {
  padding-top: 30px;
  flex: 0 0 auto;           
  width: 200px;            
  height: 80%;
}


.item:hover {
  transform: scale(1.1);
  transition: 0.4s ease;
}

.item:not(:hover) {
  transform: scale(1);
  transition: 0.4s ease;
}


.item:active {
  transform: scale(1.1);
  transition: 0.4s ease;
}

.amusic {
  display: block;
  margin: auto;
}