/* nav_css */

* {
  padding: 0;
  position: center;
}

/* Hide mobile nav on desktop */
@media (min-width: 768px) {
    .mobile-nav { 
        display: none !important;

    }
}

/* Hide desktop nav on mobile */
@media (max-width: 767px) {
    .desktop-nav { 
        display: none !important; 
    }
}


header {
  width: 400%;
  margin-top: 50px;
  background-color: black;
  justify-content: center;
  position: center;
}

#fp {
  position: relative; 
  top: -30px;
  left: -13px;
  font-size: 41px;
  color: goldenrod;
  border-right: 7.3px ridge goldenrod;
  border-bottom: 13.1px ridge rgb(255, 0, 0);
  border-left: 7.3px ridge goldenrod;
  padding: 0.82rem 0.13rem;
  margin: 1.125rem 0.525rem;
  text-align: center;
  width: 1503px;
  height: 25px;
  letter-spacing: 11px;
}

#fp:hover {  
  color: goldenrod;
  text-decoration: overline;
}

#fp:focus {
  color: rgb(255, 0, 0);
}

.linux #fp {
  position: relative; 
  top: -30px;
  left: -13px;
  font-size: 45px;
  color: goldenrod;
  text-decoration: underline;
  border-right: 7.3px ridge goldenrod;
  border-bottom: 7.3px ridge rgb(255, 0, 0);
  border-left: 7.3px ridge goldenrod;
  padding: 0.82rem 0.13rem;
  margin: 1.125rem 0.525rem;
  text-align: center;
  width: 1553px;
  height: 31px;
}


.linux #fp:hover {  
  color: goldenrod;
  text-decoration: underline overline;
}

.linux #fp:focus {
  color: rgb(255, 0, 0);
}

.linux .firefox #fp {
  position: relative; 
  top: -30px;
  left: -13px;
  font-size: 38px;
  color: goldenrod;
  text-decoration: underline;
  border-right: 7.3px ridge goldenrod;
  border-bottom: 7.3px ridge rgb(255, 0, 0);
  border-left: 7.3px ridge goldenrod;
  padding: 0.82rem 0.13rem;
  margin: 1.125rem 0.525rem;
  text-align: center;
  width: 1553px;
  height: 31px;
}


.linux .firefox #fp:hover {  
  color: goldenrod;
  text-decoration: underline overline;
}

.linux .firefox #fp:focus {
  color: rgb(255, 0, 0);
}
/* Sticky navigation */
.sticky {
  position: fixed;
  top: 0;
  left: 400%;
  width: 400%;
  z-index: 1000; /* Adjust as needed */
  background-color: #fff; /* Set background color to match your design */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
}

#Main-Nav {
  margin-top: -45px;
  text-decoration: none;
  color: white;
  background-color: rgb(0, 0, 0);
  text-align: center;
  position: center;
  display: flex;
  list-style: none;
  margin-right: 815px;
  word-spacing: 200px;
  letter-spacing: 2.5px;
  padding-left: 4px;
  font-family: arial, sans-serif;
  font-size: 18px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  /* Chrome-specific styles go here */
.linux .chrome #Nav-1 {
    text-decoration: none;
    list-style-type: none;
    color: white;
    background-color: rgb(255, 0, 0);
    padding: 31px 31px 13px 31px;
    letter-spacing: 1.31px;
    word-spacing: 10px;
    width: 400%;
    margin-right: -10px;
    margin-left: -10px;
    margin-top: 10px;
    margin-bottom: 25px;
    font-family: Roboto;
    font-size: 16.5px;
  }
.linux .chrome .sidebar-nav {
    position: relative;
    left: 31px;
  }
.linux .chrome #Nav-4-Link {
    position: relative !important;
    left: -757px !important;
  }
.linux .chrome #Nav-4-Link:hover {
    position: relative;
    left: -912px;
  }
.linux .chrome #Nav-4-Link:focus {
    position: relative;
    left: -912px;
  }
.linux .chrome #Nav-5-Link {
    position: relative;
    left: 170px;
  }
.linux .chrome #Nav-5-Link:hover {
    position: relative;
    left: 170px;
  }
.linux .chrome #Nav-5-Link:focus {
    position: relative;
    left: 170px;
  }
.linux .chrome #Nav-6-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: 462px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}
.linux .chrome #Nav-6-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  text-decoration: underline;
  color: yellow;
  left: 462px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}
.linux .chrome #Nav-6-Link:focus {
  position: relative;
  padding: 2px 5px;
  background-color: white;
  text-decoration: underline overline;
  color: black;
  left: 462px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
  }
.linux .chrome #Nav-7-Link {
    position: relative;
    left: -757px;
  }
.linux .chrome #Nav-7-Link:hover {
    position: relative;
    left: -757px;
  }
.linux .chrome #Nav-7-Link:focus {
    position: relative;
    left: -757px;
  }
.linux .chrome #Nav-8-Link {
    position: relative;
    left: -685px;
  }
.linux .chrome #Nav-8-Link:hover {
    position: relative;
    left: -685px;
  }
.linux .chrome #Nav-8-Link:focus {
    position: relative;
    left: -685px;
  }
.linux .chrome h1 {
    font-size: 52px;
  }
.linux .chrome h1:hover {
    font-size: 52px;
  }
.linux .chrome h1:focus {
    font-size: 52px;
  }

.linux .firefox #Nav-1 {
    text-decoration: none;
    list-style-type: none;
    color: white;
    background-color: rgb(255, 0, 0);
    padding: 31px 31px 13px 31px;
    letter-spacing: 1.31px;
    word-spacing: 10px;
    width: 400%;
    margin-right: -10px;
    margin-left: -10px;
    margin-top: 10px;
    margin-bottom: 25px;
    font-family: Roboto;
    font-size: 16.5px;
  }
.linux .firefox .sidebar-nav {
    position: relative;
    left: 52px;
  }
.linux .firefox #Nav-4-Link {
    position: relative !important;
    left: -562px !important;
  }
.linux .firefox #Nav-4-Link:hover {
    position: relative;
    left: -562px;
  }
.linux .firefox #Nav-4-Link:focus {
    position: relative;
    left: -562px;
  }
.linux .firefox #Nav-5-Link {
    position: relative;
    left: 170px;
  }
.linux .firefox #Nav-5-Link:hover {
    position: relative;
    left: 170px;
  }
.linux .firefox #Nav-5-Link:focus {
    position: relative;
    left: 170px;
  }
.linux .firefox #Nav-6-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}
.linux .firefox #Nav-6-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  text-decoration: underline;
  color: yellow;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}
.linux .firefox #Nav-6-Link:focus {
  position: relative;
  padding: 2px 5px;
  background-color: white;
  text-decoration: underline overline;
  color: black;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
  }
.linux .firefox #Nav-7-Link {
    position: relative;
    left: -1112px !important;
  }
.linux .firefox #Nav-7-Link:hover {
    position: relative;
    left: -1112px !important;
  }
.linux .firefox #Nav-7-Link:focus {
    position: relative;
    left: -1112px !important;
  }
.linux .firefox #Nav-8-Link {
    position: relative;
  }
.linux .firefox #Nav-8-Link:hover {
    position: relative;
  }
.linux .firefox #Nav-8-Link:focus {
    position: relative;
  }
.linux .firefox h1 {
    font-size: 52px;
  }
.linux .firefox h1:hover {
    font-size: 52px;
  }
.linux .firefox h1:focus {
    font-size: 52px;
  }



#Nav-1 {
    text-decoration: none;
    list-style-type: none;
    color: white;
    background-color: rgb(255, 0, 0);
    padding: 31px 31px 13px 31px;
    letter-spacing: 1.31px;
    word-spacing: 10px;
    width: 100%;
    margin-right: -10px;
    margin-left: -10px;
    margin-top: 10px;
    margin-bottom: 25px;
    font-family: Roboto;
    font-size: 16.5px;
}
  .linux .sidebar-nav {
    position: relative;
    left: 52px;
  }
  .linux #Nav-4-Link {
    position: relative;
    left: -1312px;
  }
  .linux #Nav-4-Link:hover {
    position: relative;
    left: -1312px;
  }
  .linux #Nav-4-Link:focus {
    position: relative;
    left: -1312px;
  }
  .linux #Nav-5-Link {
    position: relative;
    left: 170px;
  }
  .linux #Nav-5-Link:hover {
    position: relative;
    left: 170px;
  }
  .linux #Nav-5-Link:focus {
    position: relative;
    left: 170px;
  }
  .linux #Nav-6-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: 331px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}
.linux #Nav-6-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  text-decoration: underline;
  color: yellow;
  left: 331px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}
.linux #Nav-6-Link:focus {
  position: relative;
  padding: 2px 5px;
  background-color: white;
  text-decoration: underline overline;
  color: black;
  left: 331px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
  }
  .linux #Nav-7-Link {
    position: relative;
    left: -1112px;
  }
  .linux #Nav-7-Link:hover {
    position: relative;
    left: -1112px;
  }
  .linux #Nav-7-Link:focus {
    position: relative;
    left: -1112px;
  }
  .linux #Nav-8-Link {
    position: relative;
    left: -831px;
  }
  .linux #Nav-8-Link:hover {
    position: relative;
    left: -831px;
  }
  .linux #Nav-8-Link:focus {
    position: relative;
    left: -831px;
  }
  .linux h1 {
    font-size: 52px;
  }
  .linux h1:hover {
    font-size: 52px;
  }
  .linux h1:focus {
    font-size: 52px;
  }


#Nav-3-Link {
  position: relative;
  bottom: 36px;
  left: 170px;
}

#Nav-5-Link {
  position: relative;
  left: 186.5px;
  bottom: 35px;
}

#Nav-4-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: -964px;
  bottom: -7px;
  padding-top: 3px;
  margin-bottom: 3px;
}

#Nav-4-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: -964px;
  bottom: -7px;
  text-decoration: underline;
  color: yellow;
  padding-top: 3px;
  margin-bottom: 3px;
}

#Nav-4-Link:focus {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 0, 0);
  left: -964px;
  bottom: -7px;
  text-decoration: underline overline;
  background-color: rgb(255, 255, 255);
  padding-top: 3px;
  margin-bottom: 3px;
}

#Nav-7-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: -977px;
  bottom: -7px;
  padding-top: 3px;
  margin-bottom: 3px;
}

#Nav-7-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: -977px;
  bottom: -7px;
  text-decoration: underline;
  color: yellow;
  padding-top: 3px;
  margin-bottom: 3px;
}

#Nav-7-Link:focus {
  position: relative;
  padding: 2px 5px;
  color: rgb(255, 0, 0);
  left: -977px;
  bottom: -7px;
  text-decoration: underline overline;
  background-color: rgb(255, 255, 255);
  padding-top: 3px;
  margin-bottom: 3px;
}

#Nav-8-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: gold;
  font-weight: bolder;
  left: -830px;
  bottom: -7px;
  padding-top: 10px;
  margin-bottom: 3px;
  border-top: 5px solid black;  
}

#Nav-8-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: rgb(255, 0, 0);
  color: yellow;
  font-weight: bolder;
  left: -830px;
  bottom: -7px;
  text-decoration: underline;
  padding-top: 7px;
  margin-bottom: 3px;
  border-top: 5px solid black; 
}

#Nav-8-Link:focus {
  position: relative;
  padding: 2px 5px;
  background-color: rgb(255, 255, 255);
  color: red;
  font-weight: bolder;
  left: -830px;
  bottom: -7px;
  text-decoration: underline overline;
  padding-top: 5.25px;
  margin-bottom: 3px;
  border-top: 5px solid black; 
}

#Nav-6-Link {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  color: rgb(255, 255, 255);
  left: 300px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}

#Nav-6-Link:hover {
  position: relative;
  padding: 2px 5px;
  background-color: red;
  text-decoration: underline;
  color: yellow;
  left: 300px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
}


#Nav-6-Link:focus {
  position: relative;
  padding: 2px 5px;
  background-color: white;
  text-decoration: underline overline;
  color: black;
  left: 300px;
  bottom: 8px;
  border-bottom: 5px solid rgb(0, 0, 0);
  border-right: 5px solid rgb(0, 0, 0);
  border-left: 5px solid rgb(0, 0, 0);
  }

  #I3 {
    position: relative;
    bottom: -65px;
    left: -95px;
    padding: 3px;
    margin: -8px; /* <-- same as hover */
    border-top: 2.3px solid transparent;
    border-bottom: 5px solid transparent;
    transition: border-color 0.2s ease; /* optional smooth transition */
  }
  
  #I3:hover {
    border-top-color: rgb(255, 89, 0);
    border-bottom-color: yellow;
    background-color: black;
  }

#Nav-2 {
  text-decoration: none;
  list-style-type: none;
  color: white;
  background-color: rgb(255, 0, 0);
  padding: 31px;
  word-spacing: 10px;
  letter-spacing: 2px;
  width: 400%;
  margin-right: -10px;
  margin-left: -10px;
  margin-top: 10px;
  margin-bottom: 25px;
  padding-bottom: 3px;
}

/* Responsive Styles */
@media (max-width: 1024px) { /* Tablet */
#Main-Nav {
    flex-direction: column;
    word-spacing: normal;
}
#Nav-1 {
    width: 100%;
}
}

@media (max-width: 768px) { /* Mobile */
#Main-Nav {
    flex-direction: column;
    word-spacing: normal;
}
#Nav-1 {
    width: 100%;
    padding: 10px;
}
}



.Logo {
  width: 117px;
  height: 60px;
  border: 5px solid rgba(255, 0, 0, 0.443);
  border-radius: 13px;
  transition: transform 1.3s ease-in-out;
  -webkit-transition: transform 1.3s ease-in-out;
  -moz-transition: transform 1.3s ease-in-out;
}

.Logo:hover {
  transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
}
.Nav-1 {
    text-decoration: none;
    color: white;
    background-color: rgb(255, 0, 0);
    margin-top: -25px;
    margin-bottom: 17px;
    width: 400%;
}

.Nav-2 {
    text-decoration: none;
    color: white;
    background-color: rgb(255, 0, 0);
    text-align: center;
    position: center;
    display: flex;
    list-style: none;
    margin-right: 815px;
    word-spacing: 15px;
    padding-left: 4px;
    margin-bottom: 13px;
    width: 400%;
}

ul {
    list-style: none; 
    padding: 0; 
    margin: 0; 
  }

  li {
    display: inline;
  }
  
  li a {
    text-decoration: none;
  }

a::before {
    color: white;
}

a {
    text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: white;
}

.McCC-Color:focus {
  background-color: rgb(0, 225, 255) !important;
}

.Nav-1-Link{
    padding: 8px;
    background-color: rgb(255, 0, 0);
    position: relative;
    left: -115px;
    border-bottom: 3.1px solid black !important;
  }

.Nav-1-Link:hover{
    padding: 8px;
    background-color: rgb(255, 0, 0);
    color: yellow;
    position: relative;
    left: -130px;
}

.Nav-1-Link:focus{
  padding: 8px;
  background-color: yellow;
  color: black;
  position: relative;
  left: -130px;
}

#Nav-1-Link2{
    padding: 8px;
    background-color: rgb(255, 0, 0);
    position: relative;
    left: 0px;
    border-bottom: 3.1px solid black !important;
    color: yellow !important;
    text-decoration: underline;
    font-weight: bolder !important;
  }


#Nav-1-Link2:hover{
    padding: 8px;
    background-color: rgb(255, 0, 0);
    color: yellow;
    position: relative;
    left: 0px;
    text-decoration: underline;
    font-weight: bolder !important;
}

.Nav-1-Link2:focus{
  padding: 8px;
  background-color: yellow;
  color: black;
  position: relative;
  left: 0px;
  color: white !important;
  text-decoration: underline;
  font-weight: bolder !important;
}


button.Profile {
    background-color: red;
    border: none;
}

#profile {
  width: 30px;
  height: 30px;
  border-left: 5px solid black;
  background-color:rgb(255, 0, 0);
}

#message {
  width: 30px;
  height: 30px;
}

#notifications {
  width: 25px;
  height: 25px;
}

#menu {
  width: 30px;
  height: 30px;
  background-color: red;
  color: red;
}

button.More {
  color: red;
  background-color: red;
}

button.More {
  background-color: red;
  border: none;
}

/* Dropdown menu */
.dropdown {
    position: relative; /* Position relative for dropdown */
    display: inline-block; /* Display as inline block */
  }
  
  /* Dropdown content */
  .dropdown-content {
    padding: 15px 25px;
    display: none; /* Hide dropdown content by default */
    position: absolute; /* Position absolute for dropdown content */
    background-color: #000000; /* Background color of dropdown */
    min-width: 130px; /* Minimum width of dropdown */
    z-index: 1001; /* Set higher z-index for dropdown content */
    border: 9px solid black;
  }
  
  /* Show dropdown content on hover */
  .dropdown:hover .dropdown-content {
    display: block; /* Display dropdown content on hover */
  }
  
  /* Style dropdown links */
  .dropdown-content a {
    color: #fff; /* Text color of dropdown links */
    padding: 25px 25px; /* Padding for dropdown links */
    text-decoration: none; /* Remove underline from dropdown links */
    display: block; /* Display as block */
  }
  
  /* Change background color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #1e1e1e; /* Background color on hover */
  }

  .dropdown-2 {
    position: relative; /* Position relative for dropdown */
    display: inline-block; /* Display as inline block */
  }
  
  /* Dropdown content */
  .dropdown-content-2 {
    display: none; /* Hide dropdown content by default */
    position: absolute; /* Position absolute for dropdown content */
    background-color: #333; /* Background color of dropdown */
    min-width: 160px; /* Minimum width of dropdown */
    z-index: 1001; /* Set higher z-index for dropdown content */
  }
  
  /* Show dropdown content on hover */
  .dropdown-2:hover .dropdown-content-2 {
    display: block; /* Display dropdown content on hover */
  }
  
  /* Style dropdown links */
  .dropdown-content-2 a {
    color: #fff; /* Text color of dropdown links */
    background-color: black;
    padding: 12px 16px; /* Padding for dropdown links */
    text-decoration: none; /* Remove underline from dropdown links */
    display: block; /* Display as block */
  }
  
  /* Change background color of dropdown links on hover */
  .dropdown-content-2 a:hover {
    background-color: #000000; /* Background color on hover */
  }


 .dpd-Link:hover {
    color: rgb(255, 0, 0) !important;
  }

  .dpd-Link:focus {
    color: rgb(255, 0, 0);
    text-decoration: overline underline;
  }

  .btnbtn-primary {
    color: black;
    padding: 1.3px 0.5px 1.3px 0.5px;
    position: relative;
    left: -2px;
  }

  .btnbtn-primary:hover {
    color: rgb(255, 251, 0);
    text-decoration: underline;
    padding: 1.3px 0.5px 1.3px 0.5px;
  }

  .btnbtn-primary:focus {
    color: red;
    background-color: whitesmoke;
    text-decoration: underline overline;
    padding: 1.3px 0.5px 1.3px 0.5px;
  }

  .dropbtn {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }
  

  .sidebar-nav {
    display: flex;
    margin-top: -43px;
    margin-left: 1150px;
    position: right;
    width: 370px;
    height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 7px;
    padding-left: 13px;
    background-color: rgb(0, 0, 0);
    color: rgb(135, 0, 0);
    border: 5px ridge rgb(255, 89, 0);
}

.sidebar-nav li {
  color: rgb(255, 0, 0);
}


#Frontpage-Link:hover {
  color: red;
}

#Index-Link:hover {
  color: red;
}

.TopUp {
  border: 5px solid yellow;
  border-radius: 13px;
  background-color: black;
  color: rgb(0, 255, 0); 
  padding: 13px;
}

.TopUp:hover {
  border: 5px solid rgb(0, 255, 0);
  border-radius: 13px;
  background-color: black;
  color: rgb(0, 255, 0); 
  padding: 13px;
}

.TopUp:focus {
  border: 5px solid rgb(255, 0, 0);
  border-radius: 13px;
  background-color: black;
  color: rgb(0, 255, 0); 
  padding: 13px;
}

#Cash-Link:hover {
  color: red;
}

#Cash-Link2 {
  color: rgb(183, 0, 255);
}

#Cash-Link2:hover {
  color: red !important;
}

#Cash-Link2:focus {
  color: rgb(0, 255, 0) !important;
}


#Shop-Link:hover {
  color: red;
}

#Backpage-Link:hover {
  color: red;
}

.Nav-1-Link:hover {
  color: rgb(255, 0, 0);
  text-decoration: underline;
}

.live-search-box {
  color: rgb(255, 0, 0);
  background-color: rgb(0, 0, 0);
  text-decoration: none;
  border-radius: 13px;
  border: 5px solid rgb(0, 0, 0);
  font-weight: bolder;
  padding-left: 3px;
}

#live-search-box:hover {
  color: yellow;
  text-decoration: none;
  border-radius: 13px;
  font-weight: bold;
}

input.live-search-box:focus {
  border: 5px solid rgb(0, 0, 0);
  border-radius: 13px;
  color: rgb(0, 255, 0);
  outline: none; /* Removes the default outline, if needed */
  font-weight: bold;
}

.search {
  display: inline-block; 
  margin: 0;
  position: relative;
  left: 0px;
}

.search-B {
  display: inline-block; 
  margin: 0;
}

.search-submit {
  display: inline-block;
  margin-left: -15px;
  color: red; 
  background-color: red; 
  border: none;
}

.search-submit:hover {
  display: inline-block;
  margin-left: -15px;
  color: red; 
  background-color: red; 
  border: none;
}

.search-results {
  color: white;
}

.Nav-2-Link::before{
  color: rgb(129, 0, 0) !important;
  padding-left: 13px;
}


.Nav-2-Link:hover {
  color: orange;
  text-decoration: underline;
}

.Nav-2-Link-WB {
  border-right: 2px solid rgb(255, 255, 255);
}

.Nav-2-Link-WB:hover {
  color: orange;
  text-decoration: underline;
  border-right: 2px solid orange;
}

ul li  {
  color: red;
}

#SecondaryNavigation {
  position: relative !important;
  bottom: 23px;
}

nav#SecondaryNavigation2 {
  position: relative !important;
  height: 7px !important;
  top: 8px !important;
  margin-bottom: 28px;
}

div#AnalyticsProfile-Buttons {
  position: relative;
  top: -30px; /* Moves it up */
  left: -13px;
  width: 103%;
  background-color: rgb(255, 0, 0) !important;
  color: red;
  z-index: 10;
}

#AnalyticsProfile-Buttons {
    position: relative;
    top: -30px; /* Moves it up */
    background-color: red !important;
    color: red;
    z-index: 10;
}

#AnalyticsProfile-Buttons:hover {
    position: relative;
    top: -30px; /* Moves it up */
    background-color: rgb(255, 0, 0)!important;
    z-index: 10;
}

/* Ensure the hover effect applies correctly */
#Analytics-UserInteractions-Icon:hover {
  border-bottom: 5px solid yellow;
}

#Analytics-UploadedTracks-Icon:hover {
  border-bottom: 5px solid yellow;
}

#Followeds-Tracks-Icon:hover {
  border-bottom: 5px solid yellow;
}

#Followings-Tracks-Icon:hover {
  border-bottom: 5px solid yellow;
}

#Profile-Follows-Icon:hover {
  border-bottom: 5px solid yellow;
}

/* body_css */

body {
  background-color: rgb(0, 0, 0);
  overflow-x: hidden; /* Disable horizontal scrolling */
  overflow-y: auto; /* Enable vertical scrolling */
}

.container {
  color: white;
}

main {
  flex: 1;
  color: rgb(255, 255, 255);
  /* Add any additional styles for the main content */
}

.sidebar {
  width: 390px; /* Adjust the width as needed */
  background-color: rgb(24, 24, 24);
  margin-left: auto; /* Push the sidebar to the right */
  height: 773px;
  border-top: 2.25px solid grey;
  border-left: 4.5px ridge grey;
  border-right: 4.5px ridge grey;
  border-bottom: 4.5px ridge grey;
}

h1 {
  font-size: 22px;
  text-align: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.Username {
  color: rgb(255, 85, 0) !important;
  font-size: 50px;
  text-decoration: overline;
}

h3 {
  color: rgb(255, 0, 0);
  font-size: 23px;
  font-family: monospace;
}

#tracks-container {
  background-color: white;
}

/* footer_css */

footer {
  margin-top: 80px;
  background-color: rgb(0, 0, 0);
  color: white;
  border-top: 10px solid rgb(255, 0, 0);
}

footer p {
font-size: 15px;
}

.Logo {
    width: 90px;
    height: 90px;
}

.search-result {
    position: left;
    padding-top: 15px;
  }

  .Footer-Logo {

  }

  .Footer-Logo:hover {
    
  }

 .FD-Link {
    color: white;
 }

 .FD-Link:hover {
    color: red;
 }

 .Footer-Copyright {
  color: white;
}

.Footer-Copyright:hover {
  color: red;
}

#library0px {
  font-size: 0px;
}

/* Footer Logo */
.footer-logo {
text-align: center;
}

.footer-logo .logo {
max-width: 100%;
height: auto;
}

/* Button and Link Styling */
#frontpage-link {
text-decoration: none;
}

#frontpage-link .logo {
width: 100px; /* Adjust width as needed */
}

/* Dropup Menu */
.dropup {
position: relative;
display: inline-block;
}

.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropup:hover .dropup-content {
display: block;
}

/* Footer Links */
.musicchain-footer {
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #000;
margin-bottom: 10px;
}

.musicchain-footer:hover {
color: #007bff;
}

/* Social Icons */
.Instagram, .X, .Facebook, .GitHub, .Reddit {
text-decoration: none;
display: block;
padding: 5px 0;
color: #000;
width: 30px; 
height: 30px;
}

.iThree, .Instagram, .Discord {
width: 30px;
height: 30px;
}

.Hashtag {
color: yellow !important;
}

.instagram:hover {
color: #e4405f;
}

.x:hover {
color: #1da1f2;
}

.facebook:hover {
color: #3b5998;
}

.github:hover {
color: #333;
}

.reddit:hover {
color: #ff4500;
}

/* Footer Disclaimer */
.footer-disclaimer {
text-align: center;
font-size: 14px;
}

.fd-link {
color: #000;
text-decoration: none;
}

.fd-link:hover {
color: #007bff;
}

/* Footer Copyright */
.footer-copyright {
text-align: center;
font-size: 14px;
}

.footer-copyright .yellow {
color: yellow;
}

/* Footer iThree */
.footer-copyright-link {
color: #007bff;
text-decoration: none;
}

.footer-copyright-link:hover {
text-decoration: underline;
}

/* Footer iThree Dropdown */
.dropdown-3 {
position: relative;
display: inline-block;
}

.dropdown-content3 {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-3:hover .dropdown-content3 {
display: block;
}

/* iThree Social Icons */
.ithree, .instagram, .discord {
display: block;
padding: 5px 0;
color: #000;
}

.ithree:hover {
color: #ff6f61;
}

.discord:hover {
color: #7289da;
}


/* index_css */

.UL-Index {
  position: center;
  font-style: italic;
  font-family: arial;
}

.List-Index {
  display: block;
  padding: 3px;
  margin-left: 3px;
  margin-right: 3px;
}

.List-Index:hover {
  display: block;
}

#Index-Link-Index {
  text-decoration: underline;
}

/* login_css */

.Headline-1-Login2 {
  color: red;
  text-decoration: underline;
}

.container-Login {
  position: relative;
  width: 100%;
}

#Background-Login {
  z-index: 1;
  width: 80%;
  height: 100%;
}

img#Background-Login {
  display: block;
}

.container-Login {
  z-index: 2;
}

.form-container-Login {
  position: absolute;
  top: 50%;
  left: 38.5%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255);
  padding: 36px;
  margin: 10px;
  border-radius: 10px;
  text-align: center;
  color: rgb(255, 0, 0);
  z-index: 3; /* Ensure the form appears above the image */
}

label{
  padding: 20px 50px;
  border-radius: 12px;
}

#username_or_email{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#password{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#Button-SU {
  color: white;
  margin: 10px 35px;
  padding: 28px 41px;
  border: 3px solid rgb(143, 0, 0);
  border-radius: 12px;
  background-color: red;
  display: flex;
  position: center;
  cursor: pointer; 
}

#Button-SU:hover {
  color: white;
  border: 3px solid rgb(64, 0, 143);
  background-color: rgb(117, 4, 254);
}

#Button-SU:focus {
  color: rgb(255, 0, 0);
  border: 3px solid rgb(83, 1, 184);
  background-color: rgb(44, 0, 97);
}

.sidebarLogin {
  color: white;
  font-family: monospace;
}

.Headline-1-Login {
  color: red;
  text-decoration: underline;
  margin: 10px;
}

.Headline-3-Login {
  color: red;
  text-decoration: none;
  margin: 10px;
}

.Link-Signup {
  color: red !important;
  background-color: black;
  padding: 5px;
  margin: 3px;
  border: 5px ridge red;
  border-radius: 13px;
  text-decoration: underline;
}

.Link-Signup:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding: 5px;
  border-radius: 13px;
  border: 5px ridge orange;
  text-decoration: underline;
}

.Link-Signup:focus {
  color: orange;
  background-color: black;
  padding: 5px;
  border-radius: 13px;
  border: 5px ridge orange;
  text-decoration: underline;
}

/* logout_css */

.Headline-1-Logout2 {
  color: red;
  text-decoration: underline;
}

.container-Logout {
  position: relative;
  width: 100%;
}

#Background-Logout {
  z-index: 1;
  width: 80%;
  height: 100%;
}

img#Background-Logout {
  display: block;
}

.container-Logout {
  z-index: 2;
}

.form-container-Logout {
  position: absolute;
  top: 50%;
  left: 38.5%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255);
  padding: 36px;
  margin: 10px;
  border-radius: 10px;
  text-align: center;
  color: rgb(255, 0, 0);
  z-index: 3; /* Ensure the form appears above the image */
}

label{
  padding: 20px 50px;
  border-radius: 12px;
}

#username_or_email{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#password{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#Button-SU {
  color: white;
  margin: 10px 35px;
  padding: 28px 41px;
  border: 3px solid rgb(143, 0, 0);
  border-radius: 12px;
  background-color: red;
  display: flex;
  position: center;
  cursor: pointer; 
}

#Button-SU:hover {
  color: white;
  border: 3px solid rgb(64, 0, 143);
  background-color: rgb(117, 4, 254);
}

#Button-SU:focus {
  color: rgb(255, 0, 0);
  border: 3px solid rgb(83, 1, 184);
  background-color: rgb(44, 0, 97);
}

.sidebarLogout {
  color: white;
  font-family: monospace;
}

.Headline-1-Logout {
  color: red;
  text-decoration: underline;
  margin: 10px;
}

.Headline-3-Logout {
  color: red;
  text-decoration: none;
  margin: 10px;
}

.Link-Logout {
  color: red !important;
  background-color: black;
  padding: 5px;
  margin: 3px;
  border: 5px ridge red;
  border-radius: 13px;
  text-decoration: underline;
}

.Link-Logout:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding: 5px;
  border-radius: 13px;
  border: 5px ridge orange;
  text-decoration: underline;
}

.Link-Logout:focus {
  color: orange;
  background-color: black;
  padding: 5px;
  border-radius: 13px;
  border: 5px ridge orange;
  text-decoration: underline;
}

/* signup_css */

.container {
  position: relative;
  width: 100%;
}

#Background {
  z-index: 1; /* Ensure the image stays behind the form */
}

img#Background {
  display: block;
}

.container {
  z-index: 2;
}

.form-container {
  position: absolute;
  top: 70%;
  left: 40%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 21px;
  border-radius: 10px;
  text-align: center;
  color: rgb(255, 0, 0);
  z-index: 3; /* Ensure the form appears above the image */
}

label{
  padding: 20px 50px;
  border-radius: 12px;
}

#username{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#email{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#password{
  padding: 7px 20px;
  margin: 5px;
  border: 3px solid red;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 0, 0);
  display: flex;
  border-radius: 12px;
}

#username:hover{
padding: 7px 20px;
margin: 5px;
border: 3px solid yellow;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
border-radius: 12px;
}

#email:hover{
padding: 7px 20px;
margin: 5px;
border: 3px solid yellow;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
border-radius: 12px;
}

#password:hover{
padding: 7px 20px;
margin: 5px;
border: 3px solid yellow;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
border-radius: 12px;
}

#username:focus{
padding: 7px 20px;
margin: 5px;
border: 3px solid yellow;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
border-radius: 12px;
}

#email:focus{
padding: 7px 20px;
margin: 5px;
border: 3px solid yellow;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
border-radius: 12px;
}

#password:focus{
padding: 7px 20px;
margin: 5px;
border: 3px solid yellow;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
display: flex;
border-radius: 12px;
}


#Button-SU {
  color: white;
  margin: 10px 35px;
  padding: 28px 41px;
  border: 3px solid rgb(143, 0, 0);
  border-radius: 12px;
  background-color: red;
  display: flex;
  position: center;
  cursor: pointer; 
}

#Button-SU:hover {
  color: white;
  border: 3px solid rgb(64, 0, 143);
  background-color: rgb(117, 4, 254);
}

#Button-SU:focus {
  color: rgb(255, 0, 0);
  border: 3px solid rgb(83, 1, 184);
  background-color: rgb(44, 0, 97);
}

.sidebarSignup {
  color: white;
  font-family: monospace;
}

.Headline-1-Signup {
  color: red;
  text-decoration: underline;
  margin: 10px;
}

.Headline-3-Signup {
  color: red;
  text-decoration: none;
  margin: 10px;
}

.Link-Login {
  color: red !important;
  background-color: black;
  padding: 8px;
  margin: 5px;
  border: 5px ridge red;
  border-radius: 13px;
  text-decoration: underline;
}

.Link-Login:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding: 5px;
  border-radius: 13px;
  border: 5px ridge orange;
  text-decoration: underline;
}

.Link-Login:focus {
  color: orange;
  background-color: black;
  padding: 5px;
  border-radius: 13px;
  border: 5px ridge orange;
  text-decoration: underline;
}

/* trafficlights_css */

.green-light {
  width: 10px;
  height: 10px;
  background-color: rgb(0, 255, 0);
  box-shadow: 0 0 6px 2px rgb(0, 255, 0);
  border-radius: 50%;
  display: inline-block;
}

.red-light {
  width: 10px;
  height: 10px;
  background-color: rgb(255, 0, 0);
  box-shadow: 0 0 4.75px 2px rgb(255, 0, 0, 1) !important;
  border-radius: 50%;
  display: inline-block;
}

.orange-light {
  width: 10px;
  height: 10px;
  background-color: orange;
  border-radius: 50%;
  display: inline-block;
}

/* frontpage_css */

/* Main */
#FrontpageWrapper1 {
background-color: black;
}

#FrontpageWrapper2 {
background-color: white;
}

#FrontpageWrapper3 {
background-color: white;
}

h1 {
color: rgb(255, 0, 0);
text-decoration: overline;
font-size: 40px;
}

h1:hover {
color: rgb(255, 0, 0);
text-decoration: overline;
font-size: 40px;
}

h2 {
color: yellow;
text-decoration: underline;
font-size: 33px;
}

h2:hover {
text-decoration: underline;
font-size: 33px;
}

p {
font-size: 22px;
}

.FrontpageBox-1 {
display: inline-block;
color: red;
background-color: rgb(0, 0, 0);
padding: 18px;
padding-right: 75px;
padding-left: 30px;
padding-bottom: 25px;
margin-left: 5%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-1:hover {
display: inline-block;
color: yellow;
background-color: red;
padding: 18px;
padding-right: 75px;
padding-left: 30px;
padding-bottom: 25px;
margin-left: 5%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-1 p {
float: left;
}

.FrontpageBox-1 p:hover {
float: left;
color: yellow;
}

.dezentralized {
float: center;
width: 130px;
height: 130px;
margin-top: -15%;
margin-left: 78%;
background-color: yellow;
border: 5px solid black;
border-radius: 25px;
}

.dezentralized:hover {
float: center;
width: 130px;
height: 130px;
margin-top: -15%;
margin-left: 78%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
border-radius: 25px;
}

.FrontpageBox-2 {
display: inline;
float: right;
background-color: red;
padding: 18px;
padding-top: 30px;
padding-right: 30px;
padding-left: 160px;
padding-bottom: 30px;
margin-top: 12%;
margin-bottom: 12%;
margin-right: 5%;
margin-left: 45%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
background-image: url('/static/img/Blockchain_Background.jpg');
}

.blockchain {
float: center;
width: 130px;
height: 130px;
margin-left: -33%;
background-color: yellow;
border: 5px solid black;
border-radius: 25px;
}

.blockchain:hover {
float: center;
width: 130px;
height: 130px;
margin-left: -33%;
background-color: #383D63;
border: 5px solid black;
border-radius: 25px;
}


.FrontpageBox-2 p {
float: right;
}

.FrontpageBox-2 p:hover {
float: right;
color: yellow;
}

.FrontpageBox-3 {
display: inline;
float: left;
color: white;
background-color: red;
padding: 18px;
padding-right: 75px;
padding-left: 30px;
padding-bottom: 25px;
margin: 10%;
margin-right: 15%;
margin-left: 5%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-3:hover {
display: inline;
color: rgb(255, 0, 0);
background-color: #000000;
padding: 18px;
padding-right: 75px;
padding-left: 30px;
padding-bottom: 25px;
margin: 10%;
margin-left: 5%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-3 p {
float: left;
}

.FrontpageBox-3 p:hover {
float: left;
color: yellow;
}

.MusicChain-Coin {
float: center;
width: 130px;
height: 130px;
margin-top: -15%;
margin-left: 78%;
background-color: yellow;
border: 5px solid black;
border-radius: 25px;
}

.MusicChain-Coin:hover {
float: center;
width: 130px;
height: 130px;
margin-top: -15%;
margin-left: 78%;
background-color: rgb(255, 0, 0);
border: 5px solid black;
border-radius: 25px;
}

.FrontpageBox-4 {
display: inline;
float: right;
color: white;
background-color: #383D63;
padding: 18px;
padding-top: 25px;
padding-right: 30px;
padding-left: 160px;
padding-bottom: 25px;
margin-top: 12%;
margin-right: 5%;
margin-bottom: 12%;
margin-left: 50%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-4:hover {
display: inline;
float: right;
color: yellow;
background-color: red;
padding: 18px;
padding-top: 25px;
padding-right: 30px;
padding-left: 160px;
padding-bottom: 25px;
margin-top: 12%;
margin-right: 5%;
margin-bottom: 12%;
margin-left: 50%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-4 p {
float: right;
}

.FrontpageBox-4 p:hover {
float: right;
color: yellow;
}

.community {
float: center;
width: 130px;
height: 130px;
margin-left: -38%;
background-color: yellow;
border: 5px solid black;
border-radius: 25px;
}

.community:hover {
float: center;
width: 130px;
height: 130px;
margin-left: -38%;
background-color: #383D63;
border: 5px solid black;
border-radius: 25px;
}

.FrontpageBox-5 {
display: inline;
float: left;
background-color: red;
padding: 18px;
padding-right: 75px;
padding-left: 30px;
padding-bottom: 25px;
margin: 10%;
margin-top: 15%;
margin-right: 15%;
margin-left: 5%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
background-image: url('/static/img/Blockchain_Background2.jpg');
}

.FrontpageBox-5:hover {
display: inline;
color: yellow;
background-color: red;
padding: 18px;
padding-right: 75px;
padding-left: 30px;
padding-bottom: 25px;
margin: 10%;
margin-top: 15%;
margin-left: 5%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-5 p {
float: left;
}

.FrontpageBox-5 p:hover {
float: left;
color: yellow;
}

.gas {
float: center;
width: 130px;
height: 130px;
margin-top: -12%;
margin-left: 78%;
background-color: yellow;
border: 5px solid black;
border-radius: 25px;
}

.gas:hover {
float: center;
width: 130px;
height: 130px;
margin-top: -12%;
margin-left: 78%;
background-color: rgb(0, 0, 0);
border: 5px solid black;
border-radius: 25px;
}

.FrontpageBox-6 {
display: inline;
float: right;
background-color: red;
padding: 18px;
padding-top: 25px;
padding-right: 30px;
padding-left: 160px;
padding-bottom: 25px;
margin-top: 12%;
margin-right: 5%;
margin-bottom: 12%;
margin-left: 50%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-6:hover {
display: inline;
float: right;
color: red;
background-color: #383D63;
padding: 18px;
padding-top: 25px;
padding-right: 30px;
padding-left: 160px;
padding-bottom: 25px;
margin-top: 12%;
margin-right: 5%;
margin-bottom: 12%;
margin-left: 50%;
border: 5px solid rgb(255, 77, 0);
border-radius: 25px;
}

.FrontpageBox-6 p {
float: right;
padding-right: 15%;
}

.FrontpageBox-6 p:hover {
float: right;
color: yellow;
padding-right: 15%;
}

.bitcoin {
float: center;
width: 130px;
height: 130px;
margin-left: -38%;
background-color: yellow;
border: 5px solid black;
border-radius: 25px;
}

.bitcoin:hover {
float: center;
width: 130px;
height: 130px;
margin-left: -38%;
background-color: rgb(255, 0, 0);
border: 5px solid black;
border-radius: 25px;
}

button.Button-FP {
font-size: 22px;
padding: 13px;
margin-top: 13%;
color: white;
background-color: rgb(255, 102, 0);
border: 5px solid yellow;
border-radius: 25px;
cursor: pointer;
}

button.Button-FP:hover {
font-size: 22px;
padding: 13px;
color: red;
background-color: rgb(0, 0, 0);
border: 6px solid yellow;
border-radius: 25px;
cursor: pointer;
}

button.Button-FP:focus {
font-size: 22px;
padding: 13px;
color: red;
background-color: rgb(0, 0, 0);
border: 7px solid rgb(255, 255, 255);
border-radius: 25px;
cursor: pointer;
}

/* backpage_css */

.Backpage-Image {
top: -31px;
}

/* MusicChainCoin */
.Backpage-Image {
z-index: -5;
border-radius: 13px;
transition: transform 3.1s ease-in-out;
-webkit-transition: transform 3.1s ease-in-out;
-moz-transition: transform 3.1s ease-in-out;
}

.Backpage-Image:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
}


#ZeroB {
color: rgb(255, 0, 0); /* Applies red color to this specific ID */
}

p.BackpageBox-1 {
color: yellow !important;
font-weight: bolder;
font-size: 28px;
text-decoration: underline overline;
top: -23px;
position: relative
}

.Genre:hover {
text-decoration: underline;
}

.Artist:hover {
text-decoration: underline;
color: rgb(255, 81, 0) !important;
}

.User:hover {
text-decoration: underline;
color: rgb(255, 0, 0);
}

.Title:hover {
text-decoration: underline;
color: rgb(255, 81, 0) !important;
}

.Genre:focus {
text-decoration: underline overline;
}

.Artist:focus {
 text-decoration: underline overline;
}

.User:focus {
  text-decoration: underline overline;
 }

.Title:focus{
text-decoration: underline overline;
}

/* Start */

.Start-Register {
text-decoration: underline;
}

.Start-Register-2 {
display: flex;
text-align: center;
margin-left: 17.5px;
margin-top: -7px;
}

#Start-1 {
border: 5px solid yellow;
background-color: rgba(255, 255, 255, 0.096);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

#Start-1:hover {
border: 5px solid rgb(0, 255, 0);
background-color: rgb(0, 0, 0);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

.Start-1:hover {
color: yellow !important;
}

.Start-1:focus {
color: rgb(255, 0, 0) !important;
}

#Start-2 {
border: 5px solid yellow;
background-color: rgba(255, 255, 255, 0.096);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

#Start-2:hover {
border: 5px solid rgb(0, 255, 0);
background-color: rgb(0, 0, 0);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

.Start-2:hover {
color: yellow !important;
}

.Start-2:focus {
color: rgb(255, 0, 0) !important;
}

#Start-3 {
border: 5px solid yellow;
background-color: rgba(255, 255, 255, 0.096);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

#Start-3:hover {
border: 5px solid rgb(0, 255, 0);
background-color: rgb(0, 0, 0);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

.Start-3:hover {
color: yellow !important;
}

.Start-3:focus {
color: rgb(255, 0, 0) !important;
}

#Start-4 {
border: 5px solid yellow;
background-color: rgba(255, 255, 255, 0.096);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

#Start-4:hover {
border: 5px solid rgb(0, 255, 0);
background-color: rgb(0, 0, 0);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

.Start-4:hover {
color: yellow !important;
}

.Start-4:focus {
color: rgb(255, 0, 0) !important;
}

#Start-5 {
border: 5px solid yellow;
background-color: rgba(255, 255, 255, 0.096);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

#Start-5:hover {
border: 5px solid rgb(0, 255, 0);
background-color: rgb(0, 0, 0);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
margin: 3px;
}

.Start-5:hover {
color: yellow !important;
}

.Start-5:focus {
color: rgb(255, 0, 0) !important;
}

/* Charts */

/* ProfileFollowings/Follower */
.Profile ul {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Adjust the space between items */
padding: 0;
list-style-type: none;
}

.Profile li {
flex: 1 1 18%; /* This ensures 5 items per row */
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.profile-picture {
border-radius: 50%;
object-fit: cover;
max-width: 100%;
height: auto;
}

/* More */

.More {
list-style-type: decimal; /* Use numbers instead of bullets */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}

.More li {
margin: 10px 0; /* Add spacing between list items */
}

.More li a {
text-decoration: none; /* Remove underline from links */
color: #ffffff; /* Set text color (black as default, adjust as needed) */
font-size: 21px; /* Adjust font size */
display: block; /* Ensure links span the full width of the list item */
}

.More li a:hover {
color: #00ff00; /* Change text color on hover */
text-decoration: underline; /* Add underline on hover */
}

/* Start */

#MusicChain-Start {
color:rgb(0, 255, 0);
background-color: rgba(255, 255, 255, 0.096);
border: 5px solid yellow;
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
}

#MusicChain-Start:hover {
color:rgb(0, 255, 0);
background-color: rgb(0, 0, 0);
border: 5px solid orange;
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
}

#MusicChain-Start:focus {
color:rgb(255, 0, 0);
background-color: rgba(255, 255, 255, 0.096);
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding-right: 52px;
padding-left: 52px;
}

/* Radio */

#play-button2 {
margin-right: 10px;
background-color: black;
color: rgb(255, 255, 255);
background-color: red;
border-width: 5px;
border: 5px solid red;
border-radius: 13px;
font-size: 31px;
padding: 13px;   
}

#play-button2:hover {
margin-right: 10px;
background-color: black;
color: rgb(0, 255, 0);
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
font-size: 31px;
padding: 13px;   
}

#play-button2:focus, #play-button2:active {
margin-right: 10px;
background-color: black;
color: rgb(0, 255, 0);
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
font-size: 31px;
padding: 13px;
}

.tracklist {
display: flex;
flex-wrap: wrap; /* Allow the items to wrap to the next line */
gap: 20px; /* Optional: adds space between items */
}

.track {
flex: 1 1 calc(25% - 20px); /* 4 items per line with a gap of 20px */
box-sizing: border-box; /* Ensure padding/margin are considered in the element width */
}

.Radio-List {
list-style-type: decimal !important;
color: yellow !important;
}

/* MetaMask */
.MetaMask2:hover {
border: 7.5px solid rgb(0, 255, 0) !important;
border-radius: 13px;
color: rgb(0, 255, 0);
}

.MetaMask2:focus {
color: rgb(255, 0, 0);
}

/* Discord */
.Discord2:hover {
border: 13px solid rgb(0, 255, 0) !important;
color: rgb(0, 255, 0);
}

.Discord2:focus {
color: rgb(255, 0, 0);
}

.Wallet3:hover {
border: 13px solid rgb(0, 255, 0) !important;
color: #8c7ec4 !important;
}

.Wallet3:focus {
color: rgb(255, 0, 0);
}

/* Artists */

.underlined:hover {
text-decoration: overline !important;
}

.search-options {
margin-bottom: 20px; 
text-align: center;
}

.search-query {
font-weight: bold;
}

/* Cookies */
button#accept-cookies:hover {
background-color: rgb(0, 0, 0) !important;
color: white !important;
border-color: #25d32b !important;

}

.ReadMore {
color: white;
text-decoration: underline !important;
margin-left: 13px;
font-weight: bolder;
}

.ReadMore:hover {
color: yellow;
text-decoration: underline !important;
margin-left: 13px;
font-weight: bolder;
}

.ReadMore:focus {
color: red;
text-decoration: underline !important;
margin-left: 13px;
font-weight: bolder;
}

button#accept-cookies:focus {
color: red !important;

}

/* Dataprivacy */
.Footer-Heading {
color: orangered !important;
text-decoration: underline;
}

/* Footer MusicChain */
.Footer-MusicChain-Link {
color: rgb(0, 255, 0) !important;
border-top: 2.3px solid rgb(0, 255, 0);
}

.Footer-MusicChain-Link:hover {
color: rgb(0, 255, 0);
text-decoration: underline;
}

.Footer-MusicChain-Link:focus {
color: rgb(0, 255, 0);
text-decoration: underline overline;
}

.FD-Link {
color: white !important;
}

.FD-Link:hover {
color: orangered !important;
text-decoration: underline !important;
}

.FD-Link:focus {
color: orangered !important;
text-decoration: underline overline;
}

.Footer-Copyright-Link {
color: red !important;
text-decoration: underline !important;
}

.Footer-Copyright-Link:hover {
color: red;
text-decoration: overline !important;
}

.Footer-Copyright-Link:focus {
color: red;
text-decoration: underline overline;
}

/* MusicChainCoin */
.MusicChainCoin {
width: 130px;
height: 130px;
border: 5px solid rgb(0, 225, 255);
border-radius: 13px;
transition: transform 1.3s ease-in-out;
-webkit-transition: transform 1.3s ease-in-out;
-moz-transition: transform 1.3s ease-in-out;
}

.MusicChainCoin:hover {
transform: rotateX(360deg);
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
}

/* Container for the dropup menu */
.dropup {
position: relative;
display: inline-block;
}

/* Footer link (MusicChain) styling */
.MusicChain-Footer {
font-size: 16px;
font-weight: bold;
color: rgb(0, 255, 0) !important;
text-decoration: overline !important;
padding: 10px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}

.MusicChain-Footer:hover {
font-size: 16px;
font-weight: bold;
color: rgb(0, 255, 0) !important;
text-decoration: overline underline !important;
padding: 10px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}



/* Dropdown content styling */
.dropup-content {
display: none;
position: absolute;
bottom: 100%; /* Position above the MusicChain link */
left: 103px;
background-color: #ff0000c9;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
min-width: 160px;
}

/* Dropdown link styling */
.dropup-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
transition: background-color 0.3s ease;
font-weight: bolder;
}

.dropup-content a:hover {
color: rgb(0, 255, 0) !important;
padding: 12px 16px;
text-decoration: underline;
border-top: 5px solid rgb(0, 255, 0);
display: block;
transition: background-color 0.3s ease;
font-weight: bolder;
}

/* Show the dropdown when hovering over the MusicChain footer link */
.dropup:hover .dropup-content {
display: flex;
border: 3px solid rgb(0, 255, 0);
margin-top: 5px;
}

/* Container for the dropdown menu */
.dropdown-3 {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: bolder;
}

/* Dropdown content styling */
.dropdown-content3 {
display: none;
position: absolute;
bottom: 100%; /* Position above the copyright link */
left: 0;
background-color: #ff0000c9;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
min-width: 180px;
padding: 10px 0;
font-weight: bolder;
}

/* Dropdown link styling */
.dropdown-content3 a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: flex;
align-items: center;
transition: background-color 0.3s ease;
font-weight: bolder;
}

.dropdown-content3 a img {
margin-right: 10px;
}

.dropdown-content3 a:hover {
color: rgb(0, 255, 0) !important;
border-top: 5px solid rgb(0, 255, 0);
text-decoration: underline;
font-weight: bolder;
top: 13px;
}

/* Show the dropdown when hovering over the footer copyright section */
.dropdown-3:hover .dropdown-content3 {
display: flex;
border: 3px solid yellow;
margin-top: 5px;
font-weight: bolder;
}

/* 404 */
.PNF {
height: 23%;
width: 23%;
border: 5px solid yellow;
}

/* Feature_Request */
#title {
margin: 10px !important;
padding: 10px !important;
background-color: black;
color: rgb(0, 255, 0) !important;
border: 2px solid yellow !important;
width: 310px;
}

#title:focus {
margin: 10px;
padding: 10px;
background-color: black;
color: rgb(0, 255, 0);
border: 5px solid rgb(0, 255, 0);
width: 310px;
}

#description {
border: 5px solid yellow !important;
width: 90%;
color: rgb(0, 255, 0) !important;
}

#description:focus {
border: 5px solid rgb(0, 255, 0);
color: rgb(0, 255, 0) !important;
}

#LabelFeautureDescription {
position: relative;
left: -475px;
}

#submitted-by {
border: 3px solid yellow;
margin: 7.5px;
padding: 7.5px;
color: rgb(0, 255, 0) !important;
background-color: black !important;
position: relative;
left: -10px !important;
}

#submitted-by:focus {
border: 3px solid rgb(0, 255, 0);
}

#SubmitFeatureRequest {
border: 6px ridge rgb(0, 255, 0);
border-radius: 7px;
background-color: black;
color: orangered;
margin: 9.3px;
padding: 9.3px;
position: relative;
left: 31px !important;
}

#SubmitFeatureRequest:focus {
border: 3px ridge orange;
background-color: black;
color: rgb(0, 255, 0);
margin: 9.3px;
padding: 9.3px;
position: relative;
left: 31px !important;
}

.ArtistSearch {
margin: 5px;
padding: 5px;
color: rgb(24, 138, 24);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.ArtistSearch:hover {
margin: 5px;
padding: 5px;
color: rgb(0, 255, 0);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.ArtistSearch:focus {
margin: 5px;
padding: 5px;
color: rgb(255, 0, 0);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.ArtistSearch2 {
margin: 5px;
padding: 5px;
color: rgb(0, 255, 0);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.LibrarySearch {
margin: 5px;
padding: 5px;
color: rgb(24, 138, 24);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.LibrarySearch:hover {
margin: 5px;
padding: 5px;
color: rgb(0, 255, 0);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.LibrarySearch:focus {
margin: 5px;
padding: 5px;
color: rgb(255, 0, 0);
background-color: black;
border: 3px solid rgb(0, 255, 0);
}

.LibrarySearch2 {
margin: 5px;
padding: 5px 15px;
color: rgb(0, 255, 0);
background-color: black;
border: 3px solid rgb(0, 255, 0);
text-overflow: ellipsis;
}

.MusicChainSearch {
  margin: 5px;
  padding: 5px;
  color: rgb(0, 255, 0);
  background-color: black;
  border: 3.1px solid rgb(0, 255, 0);
  border-radius: 13px;
  }
  
  .MusicChainSearch:hover {
  margin: 5px;
  padding: 5px;
  color: rgb(0, 255, 0);
  background-color: black;
  border: 3.1px solid rgb(0, 255, 0);
  border-radius: 13px;
  }
  
  .MusicChainSearch:focus {
  margin: 5px;
  padding: 5px;
  color: rgb(0, 255, 0);
  background-color: black;
  border: 3.1px solid rgb(0, 255, 0);
  border-radius: 13px;
  }
  
  .MusicChainSearch2 {
  margin: 5px;
  padding: 5px 15px;
  color: rgb(0, 255, 0);
  background-color: black;
  border: 3.1px solid rgb(0, 255, 0);
  border-radius: 13px;
  text-overflow: ellipsis;
  }

  .StreamSearch {
    margin: 5px;
    padding: 5px;
    color: rgb(0, 255, 0);
    background-color: black;
    border: 3.1px solid rgb(0, 255, 0);
    border-radius: 13px;
    }
    
    .StreamSearch:hover {
    margin: 5px;
    padding: 5px;
    color: rgb(0, 255, 0);
    background-color: black;
    border: 3.1px solid rgb(0, 255, 0);
    border-radius: 13px;
    }
    
    .StreamSearch:focus {
    margin: 5px;
    padding: 5px;
    color: rgb(0, 255, 0);
    background-color: black;
    border: 3.1px solid rgb(0, 255, 0);
    border-radius: 13px;
    }
    
    .StreamSearch2 {
    margin: 5px;
    padding: 5px 15px;
    color: rgb(0, 255, 0);
    background-color: black;
    border: 3.1px solid rgb(0, 255, 0);
    border-radius: 13px;
    text-overflow: ellipsis;
    }

/* table */
table {
border: 2; 
padding: 5; 
border-collapse: separate; 
border-spacing: 10px;
}

/* Index */

#Index-Link-Orange {
color: rgb(255, 106, 0);
}

#Index-Link-Red {
color: red;
}

#Index-Link-Orange:hover {
color: rgb(255, 106, 0);
text-decoration: underline;
}

#Index-Link-Red:hover {
color: red;
text-decoration: underline;
}

/* Backpage */

.Backpage-Image {
width: 25%;
height: 100%;
background-image: url('iThree-Logo.png'); 
background-size: cover;
margin-top: -7.1%;
margin-left: 0%;
}

/* User */

.Settings2 {
width: 30px;
height:28px;
}

.Social-Icons1 {
height: 41px;
width:41px;
}

.Social-Icons2 {
height: 41px;
width:41px;
}

.Social-Icons3 {
height: 41px;
width:41px;
}

.Social-Icons4 {
height: 41px;
width:41px;
}

.Social-Icons5 {
height: 41px;
width:41px;
}

.Social-Icons6 {
height: 41px;
width:41px;
}

.Social-Icons7 {
height: 41px;
width:41px;
}

.Social-Icons8 {
height: 41px;
width:41px;
}

.Social-Icons9 {
height: 41px;
width:41px;
}

.Social-Icons10 {
height: 41px;
width:41px;
}

.Social-Icons11 {
height: 41px;
width:41px;
}

.Social-Icons12 {
height: 41px;
width:41px;
}

.Social-Icons13 {
height: 41px;
width:41px;
}

/* root */

#root {
margin-left: 280px;
text-align: center !important;
}

.App {
text-align: center !important;
}

#headingLogIn {
color: rgb(0, 255, 0) !important;
}

#submit {
height: 52px;
width: auto;
color: yellow;
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid yellow;
border-radius: 13px;
padding: 12px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}

#submit:hover {
height: 52px;
width: auto;
color: rgb(0, 255, 0);
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 12px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}

#submit:focus {
height: 52px;
width: auto;
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid yellow;
border-radius: 13px;
padding: 12px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}

.submit {
height: 52px;
width: auto;
color: rgb(0, 255, 0);
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 12px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}

.submit:hover {
height: 52px;
width: auto;
color: rgb(0, 255, 0);
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 12px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}

.submit:focus {
height: 52px;
width: auto;
color: rgb(0, 255, 0);
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 12px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}

/* Artists */
.Artist-Class {
text-align: center;
}

table {
border: 2px solid rgb(255, 255, 255); /* Equivalent to border="2" */
border-spacing: 5px;     /* Equivalent to cellspacing="5" */
border-collapse: separate; /* Ensure spacing works; not needed for cellspacing */
}

/* Styling for table headers with white solid border */
#UserId, #User, #Artist, #TrackId, #TrackName, #Listenings, #Playtime, 
#Likes, #Reposts, #Track-Followers, #Downloads, 
#Comments, #Genre {
  border: 3.1px solid white;
  padding: 5px; /* Add padding for better spacing */
  text-align: center; /* Center-align the text */
  background-color: #0d0d0d; /* Optional: Add a dark background for contrast */
  color: white; /* Optional: Make the text white for readability */
  font-size: 13px;
}


td, th {
padding: 5px; /* Equivalent to cellpadding="5" */
}

.ArtistClass {
font-size: 16px !important;
}

#ArtistRow {
font-size: 16px !important;
border: 3.1px solid white;
}

#ArtistTableBody {
font-size: 16px !important;
}

.UserId {
vertical-align: top; 
text-align: center; 
color: red;
border: 3.1px solid white;
}

.UserUsername {
vertical-align: top; 
text-align: center;
border: 3.1px solid white;
}

.UserUsername-underlined {
text-decoration: underline !important;
color: red !important;
}

.TrackId {
vertical-align: top; 
text-align: center; 
color:  rgb(255, 81, 0) !important;
border: 3.1px solid white;
}

.TrackTitle {
color: red;
border: 3.1px solid white; 
}

.TrackTitle2 {
text-align: center; 
color:  rgb(255, 81, 0) !important;
text-decoration: underline !important;
}

.TrackListenings {
text-align: center; 
color: rgb(0, 255, 0) !important;
border: 3.1px solid white;
}

.TrackListenings2 {
text-align: center; 
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}  

.TrackPlaytime {
text-align: center; 
color: rgb(0, 255, 0);
border: 3.1px solid white;
}

.TrackPlaytime2 {
text-align: center; 
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.TrackLikeCount {
text-align: center; 
color: rgb(0, 255, 0);
border: 3.1px solid white;
}

.TrackLikeCount2 {
text-align: center; 
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.TrackRepostCount {
text-align: center; 
color: rgb(0, 255, 0);
border: 3.1px solid white;
}

.TrackRepostCount2 {
text-align: center; 
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.TrackFollowerCount {
text-align: center;
color: rgb(0, 255, 0);
border: 3.1px solid white;
}

.TrackFollowerCount2 {
text-align: center;
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.TrackDownloadsCount {
text-align: center; 
color: rgb(0, 255, 0);
border: 3.1px solid white;
}

.TrackDownloadsCount2 {
text-align: center; 
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.TrackCommentCount {
text-align: center; 
color: rgb(0, 255, 0);
border: 3.1px solid white;
}

.TrackCommentCount2 {
text-align: center; 
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.TrackGenre {
text-align: center; 
border: 3.1px solid white;
}

.TrackGenre2 {
text-align: center; 
color: yellow !important;
text-decoration: underline !important;
}

#text:hover {
background-color: red !important;
}

.DiscordSite {
text-align: center;
}

div.container {
position: relative;
top: -5%;
}

.centered {
text-align: center;
}

.TrackListenedClass {
border: 3.1px solid white;
}

/* Profile-Analytics */
.user-analytics {
display: flex;
text-align: center;
gap: 20px; /* Adds space between the items */
justify-content: flex-start; /* Align items at the start of the container */
flex-wrap: wrap; /* Allow wrapping if there are too many items for one line */
}


.AnalyticsUploadedTracks {
color: white;
background-color: rgba(0, 0, 0, 0);
}

.AnalyticsUploadedTracks:hover {
color: rgb(0, 255, 0);
text-decoration: underline;
border-bottom: 5px solid rgb(0, 255, 0);
}

/* Analytics */

#Interactions {
color: red !important;
}

.underlined2:hover {
text-decoration: underline !important;
}

.underlined3 {
text-decoration: overline !important;
}

.Cursor {
cursor: pointer;
}

/* Cash & Shop */

#VisitShop:hover {
color: red !important;
border-bottom: 3.1px solid red;
}

#VisitShop:focus {
color: yellow !important;
border-bottom: 3.1px solid yellow;
}

.buy {
color: rgb(0, 255, 0);
background-color: black;
border: 5px solid rgb(0, 225, 255);
border-radius: 13px;
padding: 8px;
cursor: pointer;
}

.buy:hover {
color: yellow;
background-color: black;
border: 5px solid rgb(0, 225, 255);
border-radius: 13px;
padding: 8px;
cursor: pointer;
}

.buy:focus {
color: rgb(0, 255, 0);
background-color: black;
border: 5px solid red;
border-radius: 13px;
padding: 8px;
cursor: pointer;
}

.Coins-Bundle1-Container {
display: flex;
flex-wrap: wrap; /* allow wrapping to the next line */
justify-content: space-between; /* spacing between boxes */
gap: 20px;
}

.Coins-Bundle1 {
border: 5px solid white; 
border-radius: 13px; 
width: 31%; /* 3 per row with spacing */
box-sizing: border-box;
background-color: #222;
color: white;
padding: 20px;
transition: all 0.3s ease-in-out;
transform: scale(1);
cursor: grab
}

.Coins-Bundle1:hover {
border: 5px solid white; 
border-radius: 13px; 
width: 31%; /* 3 per row with spacing */
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.5);
color: white;
padding: 20px;
border: 5px solid yellow;
cursor: grab
}

html {
scroll-behavior: smooth;
}

.cash-section {
font-family: monospace !important;
}

.top-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}

.nav-button1 {
cursor: pointer;
border: 5px solid red;
padding: 1rem;
font-size: 1.1rem;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
color: #fff;
border-radius: 10px;
flex: 1 1 45%;
text-align: center;
text-decoration: none;
color: red !important;
text-decoration: underline !important;
}

.nav-button2 {
cursor: pointer;
border: 5px solid rgb(0, 225, 255);
padding: 1rem;
font-size: 1.1rem;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
color: #fff;
border-radius: 10px;
flex: 1 1 45%;
text-align: center;
text-decoration: none;
color: rgb(0, 225, 255) !important;
text-decoration: underline !important;
}

.nav-button3 {
cursor: pointer;
border: 5px solid rgb(0, 255, 0);
padding: 1rem;
font-size: 1.1rem;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
color: #fff;
border-radius: 10px;
flex: 1 1 45%;
text-align: center;
color: rgb(0, 255, 0) !important;
text-decoration: underline !important;
}

.nav-button4 {
cursor: pointer;
border: 5px solid rgb(195, 0, 255);
padding: 1rem;
font-size: 1.1rem;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
color: #fff;
border-radius: 10px;
flex: 1 1 45%;
text-align: center;
color: rgb(195, 0, 255) !important;
text-decoration: underline !important;
}

.nav-button1:hover, .nav-button2:hover, .nav-button3:hover, .nav-button4:hover  {
background-color: #333;
transform: scale(1.03);
box-shadow: 0 0 10px #00ffe7;
color: yellow;
border: 5px solid yellow;
}

.nav-button1:focus, .nav-button2:focus, .nav-button3:focus, .nav-button4:focus {
background-color: #333;
transform: scale(1.03);
box-shadow: 0 0 10px #00ffe7;
color: red;
border: 5px solid red;
}


.section-box {
border: 2px dashed #999;
padding: 1rem;
margin-bottom: 2rem;
background-color: #111;
color: #fff;
border-radius: 10px;
}

.CashYellow {
color: yellow !important;
}

.btnbtn-success {
margin-right: 10px;
color: rgb(0, 255, 0);
background-color: #111;
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px;   
}

.btnbtn-success:hover {
margin-right: 10px;
color: yellow;
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px;  
}


.btnbtn-success:focus {
margin-right: 10px;
color: rgb(0, 255, 0);
border-width: 5px;  
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px; 
}

.coinBtn {
margin-right: 10px;
color: rgb(0, 255, 0);
background-color: #111;
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px;   
}

.coinBtn:hover {
margin-right: 10px;
color: yellow;
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px;  
}


.coinBtn:focus {
margin-right: 10px;
color: rgb(0, 255, 0);
border-width: 5px;  
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px; 
}

.btnbtn-warning {
margin-right: 10px;
color: rgb(255, 0, 0);
background-color: #111;
border-width: 5px;
border: 5px solid red;
border-radius: 13px;
padding: 13px;  
} 

.btnbtn-warning:hover {
margin-right: 10px;
color: rgb(255, 0, 0);
border-width: 5px;
border: 5px solid rgb(0, 255, 0);
border-radius: 13px;
padding: 13px;   
} 

.btnbtn-warning:focus {
margin-right: 10px;
color: rgb(255, 0, 0);
border-width: 5px;
border: 5px solid yellow;
border-radius: 13px;
padding: 13px;   
}

/* Dashboard */

.dashboard-stats {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
width: 81% !important;
}

.stat-item1 {
flex: 1;
text-align: center;
padding: 20px;
border: 5px solid rgb(195, 0, 255);
border-radius: 10px;
background-color: black !important;
font-size: 23px;
}

.stat-item2 {
flex: 1;
text-align: center;
padding: 20px;
border: 5px solid rgb(83, 1, 184);
border-radius: 10px;
background-color: black !important;
font-size: 23px;
}

.stat-item3 {
flex: 1;
text-align: center;
padding: 20px;
border: 5px solid rgb(117, 4, 254);
border-radius: 10px;
background-color: black !important;
font-size: 23px;
}

.stat-item4 {
  flex: 1;
  text-align: center;
  padding: 20px;
  border: 5px solid rgb(255, 106, 0);
  border-radius: 10px;
  background-color: black !important;
  font-size: 23px;
  width: 81%;
  }


.h2Users {
margin-bottom: 10px;
color: rgb(195, 0, 255);
}

.h2Coins {
margin-bottom: 10px;
color: rgb(83, 1, 184);
}

.h2Interactions {
margin-bottom: 10px;
color: rgb(117, 4, 254);
}

.h2Resources {
  margin-bottom: 10px;
  color: rgb(255, 106, 0);
  }

.pUsers {
font-size: 20px;
font-weight: bold;
color: rgb(195, 0, 255);
text-decoration: underline;
}

.pCoins {
font-size: 20px;
font-weight: bold;
color: rgb(83, 1, 184);
text-decoration: overline;
}

.pInteractions {
font-size: 20px;
font-weight: bold;
color: rgb(117, 4, 254);
text-decoration: underline;
}

.tracksCounts {
  font-size: 20px;
  font-weight: bold;
  color: white;
  background-color: black;
  text-decoration: underline !important;
  }

.pResources{
  font-size: 20px;
  font-weight: bold;
  color: whitesmoke;
  text-decoration: underline;
  }

/* attention */

.attention {
background-color: rgba(255, 255, 255, 0.025);
color: white;
text-decoration: dashed;
border: 5px solid red;
border-radius: 13px;
}

.attention2 {
color: white;
text-decoration: none !important;
font-weight: bolder;
font-style: italic;
}

/* TIA-Cycle */
.button-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6.3px;
    height: 6.3px;
    border: 1.9px solid black;
    border-radius: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: rgb(0, 225, 255); /* or red, or yellow, depending on action */
    box-shadow: 0 0 1px 1px rgb(0, 255, 255);
    z-index: 10;
}

/* Make sure the button is relatively positioned */
button {
    position: relative;
}

button:hover {
    position: relative;
    cursor: pointer;
}

button:focus {
    position: relative;
    cursor: pointer;
    color: red !important;
}

/* Trading-Market */

.s_resource {
  padding: 3px 5px;
  margin: 2px;
  font-size: 21px;
  font-family: Roboto;
  border: 3.1px solid rgb(81, 0, 255);
  border-radius: 9px;
  color: white;
  background-color: black; 
}

.s_resource:hover {
  padding: 3px 5px;
  margin: 2px;
  font-size: 21px;
  font-family: Roboto;
  border: 3.1px solid rgb(81, 0, 255);
  border-radius: 9px;
  color: green;
  background-color: black; 
}

.s_resource:focus {
  padding: 3px 5px;
  margin: 2px;
  font-size: 21px;
  font-family: Roboto;
  border: 3.1px solid rgb(81, 0, 255);
  border-radius: 9px;
  color: red;
  background-color: black; 
}

/* TB-Section */

.TB-Link {
  text-decoration: underline;
  color: white;
}

.TB-Link:hover {
  text-decoration: underline;
  color: red;
}

.TB-Link:focus {
  text-decoration: underline overline;
  color: red;
}

/* Mobile */
/* Responsive stacked table */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr, p {
    display: block;
    width: 93%;
    text-align: center !important;
  }

  thead {
    display: none; /* hide header row */
  }

  tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem;
    background: #111;       /* optional dark mode look */
    color: #fff;            /* optional */
  }

  td {
    justify-content: space-between;
    padding: 0.5rem;
    border: none;
    border-bottom: 1px solid #333;
  }

  td:last-child {
    border-bottom: none;
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    text-transform: uppercase;
  }
}

/* Insights */

#Insights:hover {
  border-bottom: 5px solid cyan;
}

#Effectificienty:hover {
  border-bottom: 5px solid cyan;
}

/* Disclaimer */

.drl-Link:hover {
  color: yellow;
}

.drl-Link:focus {
  color: rgb(0, 255, 0);
}

.drl-Link2 {
  color: yellow;
}

.drl-Link2:hover {
  color: rgb(0, 255, 0);
}

.drl-Link2:focus {
  color: red;
}

/* Settings */

#Track-Edit:hover {
  border-bottom: 5px solid rgb(0, 255, 0);
}

/* Transform inline to shared.css */
/* Base */

.iThreeLogo {
  position: relative;
  left: 150px;
  bottom: 23px;
  border-bottom: 3.1px solid goldenrod;
  border-right: 1.3px solid goldenrod;
  border-left: 1.3px solid goldenrod;
}

.iThreeLogo2 {
  position: relative;
  left: 250px;
  bottom: 0px;
  border-bottom: 3.1px solid goldenrod;
  border-right: 1.3px solid goldenrod;
  border-left: 1.3px solid goldenrod;
}

.Me3r {
  color: goldenrod;
  text-decoration: underline overline;
}

#SignUp {
   position: relative;
   bottom: 30px; left: -29px;
}

#LogIn {
  position: relative;
  bottom: 30px;
}

#LogOut {
  position: relative;
  bottom: 30px; left: 45px;
}

.light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px 10px;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.red-light { background-color: red; }
.green-light { background-color: rgb(0, 255, 0); }
.orange-light { background-color: rgb(255, 81, 0); }

.search-submit {
  background-color: red !important;
  border: none !important;
}

/* 404 page specific styles */
.page404-warning {
    color: yellow;
}

.page404-index-link {
    font-size: 20px;
    padding: 5px 8px;
    border-radius: 13px;
    border: 5px solid rgb(0, 255, 0);
    color: rgb(0, 255, 0);
    text-decoration: none; /* remove underline from <a> */
    display: inline-block; /* ensures padding works properly */
}

/* Disclaimer */

.Disclaimer-Div {
  color: rgb(255, 0, 0);
  background: #111;
  font-family: monospace;
  font-size: 18px;
  border-radius: 13px;
  border: 13px ridge yellow;
  padding: 20px;
}

.Disclaimer-h1 {
  text-align: center;
  color:rgb(255, 0, 0);
}

.Disclaimer-hr {
  border: 2px dashed yellow;
}

.Disclaimer-hr2 {
  border: 1px solid yellow;
}

.Disclaimer-span {
  color: orangered;
}

.Disclaimer-span-FUEL {
  color:#ffa500;
}

.Disclaimer-span-GAS {
  color:rgb(255,81,0);
}

.Disclaimer-span-McCC  {
  color:aqua;
}

.MusicChain-p {
  color: orange;
}

.MusicChain-p2 {
  border: 5px solid rgb(0, 255, 0);
  width: 13%;
  border-radius: 13px;
}

.MusicChain-p3 {
  color: yellow; 
  text-decoration: underline;
}