:root {
  --main-color: 55, 55, 55;
  --solid-color: 32, 32, 32;
  --small-box: 25, 25, 25;
  --small-box-seven: 50, 50, 50;
  --small-box-twentyone: 30, 30, 30;
  --body-background: url('img/freshancient.jpg');
}

body {
	margin: 0;
	padding: 0;
	background-image: var(--body-background);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
	overflow-y: auto;
}

.box, .box2, .box3, .box4, .box5, .box6, .small-box {
  border-radius: 10px;
}

form input[type="text"] {
  width: 68%;
  height: 40px;
  margin-right: -5px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 128, 255, 0.8);
  background-image: url("steam.png");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 50px;
  outline: none;
  border: none;
  vertical-align: middle; /* Add vertical alignment */
}

form button {
  width: 20.1%;
  height: 42px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(255, 180, 0, 0.8);
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 17px;
  margin-left: 2px;
  vertical-align: middle; /* Add vertical alignment */
}

.googlead1 {
  position: fixed;
  left: 20px;
  top: 50px;
  width: 160px;
  height: 600px;
  opacity: 0.98;
  background-color: none; /* 90% opacity */
  transition: opacity 1s ease;
  }

.googlead2 {
  position: fixed;
  right: 20px;
  top: 50px;
  width: 160px;
  height: 600px;
  opacity: 0.98;
  background-color: none; /* 90% opacity */
  transition: opacity 1s ease;
}

.googlead3 {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 300px;
  height: 250px;
  opacity: 0;
  background-color: none; /* 90% opacity */
  transition: opacity 1s ease;
}

.googlead4 {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 300px;
  height: 250px;
  opacity: 0;
  background-color: none; /* 90% opacity */
  transition: opacity 1s ease;
}

.googlead5 {
  position: fixed;
  left: 500px;
  bottom: 285px;
  width: 160px;
  height: 600px;
  opacity: 0;
  background-color: none; /* 90% opacity */
  transition: opacity 1s ease;
}

.googlead6 {
  position: fixed;
  right: 500px;
  bottom: 285px;
  width: 160px;
  height: 600px;
  opacity: 0;
  background-color: none; /* 90% opacity */
  transition: opacity 1s ease;
}

.box0 {
	position: relative;
  width: 600px;
  height: 100px;
  opacity: 0.98;
  border-radius: 140px;
  font-family: Helvetica, Arial, sans-serif;

}

.box00 {
  position: relative;
  width: 728px;
  height: 90px;
  opacity: 0.98;
  background: none;
  font-family: Helvetica, Arial, sans-serif;

}



.box {
  position: relative;
  width: 800px;
  height: auto;
  text-shadow: 2px 2px 2px black;
  margin: 0px;
    background: linear-gradient(
        to bottom,
        rgba(var(--main-color), 0.8),
        rgba(0, 0, 0, 0.8)
      );
  font-family: Helvetica, Arial, sans-serif;

}

.small-boxing {
  display: flex;
  flex-direction: row; /* change to row */
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 50px;
  background-color: none;
  margin: 10px;
  padding: 5px;
  opacity: 1;


}

.box2 {
  width: 800px;
  height: auto;
  margin: 30px;
  text-shadow: 2px 2px 2px black;
  position: relative; /* Add position relative for pseudo-element positioning */
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box2::before {
  content: ''; /* Pseudo-element content */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(var(--main-color), 0.9),
    rgba(0, 0, 0, 0.9)
  );
  z-index: -1; /* Place the pseudo-element behind the content */
}

.small-box-one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 100px;
  margin: -40px;
  color: white;
  margin-bottom: auto;
  padding: 5px;
  opacity: 1;
  font-size: 70px;
  border-radius: 10px;
  font-weight: 900;

}

.small-box-five {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 600px;
  height: 100px;
  margin-left: 60px;
  margin-top: 20px;
  color: white;
  margin-bottom: auto;
  padding: 5px;
  opacity: 1;
  font-size: 70px;
  border-radius: 10px;
  font-weight: 900;
  text-align: left;
}


.small-box-five > * {
  margin-top: 5px;
}

.small-box-six {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  width: auto;
  height: 100px;
  margin-left: 0px;
  margin-top: 0px; /* modify this value */
  color: white;
  margin-bottom: auto;
  padding: 5px;
  opacity: 1;
  
  border-radius: 10px;
  font-weight: 200; /* modify this value */
  text-align: left;

}
.small-box-six p {
  font-weight: normal; /* reset font weight to normal */
}

.small-box-six strong {
  font-weight: 700; /* set font weight to bold for strong elements */
  color: rgb(152, 179, 0);
}
.small-box-six > * {
  margin-top: 5px;
  color: white;
  font-size: 20px;
}

 .donate {
    color: rgb(51, 153, 255);
    font-weight: bold;
  }


.small-box-next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 25px;
  color: white;
  margin: -10px;
  margin-bottom: auto;
  font-weight: 900;
  padding: 5px;
  opacity: 1;
  border-radius: 10px;
  margin-bottom: 10px
}

.small-box-two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 50px;
    margin: 20px;
  padding: -10px;
  opacity: 1;
  border-radius: 10px;
  margin-bottom: -20px; /* added this line */
}

.small-box-three {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 50px;
  margin: 20px;
  padding: -10px;
  opacity: 1;
  border-radius: 10px;
  margin-bottom: 25px;
  color: rgb(51, 153, 255);
  font-weight: 900;
  text-align: center;
}


.container-smaller {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.container-smallest {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.box3 {
  width: 800px;
  height: 400px;
  margin: 10px;
  text-shadow: 1px 1px 2px black;
  background: linear-gradient(
    to bottom,
    rgba(var(--main-color), 0.8),
    rgba(0, 0, 0, 0.8)
  );
  font-family: Helvetica, Arial, sans-serif;
}

.box4 {
  width: 800px;
  height: 350px;
  text-shadow: 1px 1px 2px black;
  margin: 0px;
  background: linear-gradient(
  to top,
  rgba(0, 0, 0, 0.9) 0%,
  rgba(var(--solid-color), 0.9) 100%
);
  font-family: Helvetica, Arial, sans-serif;
  height: auto;
}


.box5 {
  width: 800px;
  margin: 20px;
  text-shadow: 2px 1px 2px black;
  background: linear-gradient(
    to bottom,
    rgba(var(--main-color), 0.8),
    rgba(0, 0, 0, 0.8)
  );
  font-family: Helvetica, Arial, sans-serif;
  height: auto;
}


.box6 {
  width: 800px;
  margin: 20px;
  height: auto !important;
  text-shadow: 2px 2px 2px black;
  background: linear-gradient(
  to top,
  rgba(0, 0, 0, 0.9) 0%,
  rgba(var(--solid-color), 0.9) 100%
);
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 40px 10px;
  box-sizing: border-box;
  transition: background 0.5s ease-in-out;
}




.container-small {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
  margin-left: 20px;
}

.small-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 300px;
  background-color: black;
  margin: 10px;
  padding: 5px;
  opacity: 1; /* add this line */
}

.small-boxing {
  display: flex;
  flex-direction: row; /* change to row */
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 50px;
  background-color: none;
  margin: 10px;
  padding: 5px;
  opacity: 1;
}


.inner-box {

  width: 160px;
  height: 40px;
  border-radius: 0%;
  background-color: rgba(0, 0, 0, 1);
  margin: 5px;
}
.inner-box-big {
  width: 160px;
  height: 150px;
  border-radius: 0%;
  background-color: rgb(0, 0, 0);
  margin: 5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}
.box4 .content h2 {
  margin-bottom: -50px;
 }

.content {
   position: relative;
  padding: 11.2px;
  color: white;
  text-align: center;
}

.content h2 {
  font-size: 25px;
  margin-top: 5px;
  font-weight: 900;
}

.content h3 {
  font-size: 18px;
  margin-top: 5;
  font-weight: 900;
}

.content p {
  font-size: 11.2px;
  margin-bottom: 0;
  }

/* add the following code to change background image without affecting the boxes */

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out, background-image 1s ease-in-out;
}

.background-image.visible {
  opacity: 1;
}
#timestamp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box6 h3 {
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 17px;
  }


button {
  background-color: rgb(255, 188, 0);
}

button:hover {
  background-color: rgb(255, 150, 0);
}


#myParagraph {
  margin-top: -15px;
  margin-bottom: 15px;
}

#myParagraph + form {
  margin-top: 20px;
}




#boxNewDiv {
   width: 800px;
  height: auto;
  margin: 20px;
  background: linear-gradient(to bottom, #666666, #000000);
  opacity: 0.8;
  font-family: Helvetica, Arial, sans-serif;
}

.transparent-bg {
background-color: rgba(255, 255, 255, 0.9);
}

.small-box-seven {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 300px;
  margin: 20px;
  padding: -10px;
  margin-bottom: 25px;
  background-color: none;
  font-weight: 900;
  text-align: center;
}
    .small-box-seven {
  position: relative;
  top: 30px;
    /* other properties */
}

.small-box-eleven {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 200px;
  margin: 20px;
  padding: -100px;
  opacity: 1;
  background-color: none;
  margin-bottom: 25px;
  margin-left: 5px;
  color: rgb(36, 196, 160);
  font-weight: 400;
  text-align: left;
  position: absolute;
  left: calc(0% + 300px);
  top: calc(0% + -25px);
  font-size: 15px;
  line-height: 1.5;
}

.small-box-eleven strong {
  color: white;
}

.small-box-sixteen {
  display: flex;
  flex-direction: column;
  align-items: left;
  height: 350px;
  width: 20px;
  margin: 20px;
  margin-top: -15px;
  padding: -100px;
  opacity: 1;
  background-color: none;
  margin-bottom: 25px;
  margin-left: -90px;
  color: rgb(36, 196, 160);
  font-weight: 400;
  text-align: left;
  position: absolute;
  left: calc(0% + 360px);
  top: calc(0% + 15px);
  font-size: 15px;
  line-height: 1.5;
}

.small-box-sixteen span {
margin-bottom: 18.5px;
}

.small-box-eight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 200px;
  opacity: 1;
  background-color: none;
  color: rgb(51, 153, 255);
  font-weight: 900;
  text-align: center;
  position: relative;
  top: -16px; /* add this to move the box 20px higher */
}


.small-box-twelve {
  position: absolute;
  left: 31px;
  top: 447px;
  width: 200px;
  margin: 0;
  padding: 0;
  opacity: 1;
  background-color: none;
  color: white;
  font-weight: 900;
  text-align: center;
  }

    .small-box-twelve {
  position: relative;
  top: 5px;
  left: 0px;
  /* other properties */
}

.small-box-thirteen {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 200px;
  margin: 0;
  padding: 0;
  opacity: 1;
  background-color: none;
  color: rgb(51, 153, 255);
  font-weight: 900;
  text-align: center;
  top: 20px;
}

.small-box-fifteen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20px;
  height: 400px;
  opacity: 1;
  margin-left: 300px;
  background-color: red;
  color: rgb(51, 153, 255);
  font-weight: 900;
  text-align: center;
}

.small-box-fifteen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.small-box-fifteen span {
  margin-bottom: 5px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}



.small-box-nine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 25px;
  opacity: 1;
  background-color: none;
  color: rgb(51, 153, 255);
  font-weight: 900;
  text-align: center;
 }

.small-box-nine {
  position: relative;
  top: -12px;
  /* other properties */
}

.small-box-ten {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 25px;
  opacity: 1;
  border-radius: 20px;
  background-color: white;
  color: rgb(255, 200, 0);
  font-weight: 900;
  text-align: center;
  }

  .small-box-ten {
  position: relative;
  top: -4px;
  /* other properties */
}


.small-box-ten-link {
  color: rgb(56, 33, 194);
  text-decoration: none;
  font-size: 15px;
}

.small-box-ten-link:hover {
  text-decoration: none;
}

.my-class {

	margin-left: 25px;
}


.small-box-seven {
  /* set the initial state of the element */
  opacity: 0;
  transform: translateX(100%);
  background-color: rgba(var(--small-box-seven), 0); /* set the initial color of the element */
  transition: all 2s ease-out; /* set the transition properties */
}

.small-box-seven.reveal {
  /* set the final state of the element */
  opacity: 1;
  transform: translateY(0);
background: linear-gradient(
  to top,
  rgba(0, 0, 0, 1) 0%,
  rgba(var(--small-box-seven), 1) 100%
); /* set the initial gradient of the element */


}

.small-box-ten {
  background-color: white; /* set the initial color of the element */
  transition: background-color 2s ease-out; /* set the transition properties */
}

.small-box-ten.reveal {
  background-color: rgba(255, 255, 255, 1); /* set the final color of the element */
}

.small-box-seventeen {
  width: 738px;
  height: 300px;
  margin-bottom: 25px;
  margin-top: 50px;
  background-color: none;
  position: relative; /* add this line to position the checkboxes relative to this element */
  }


  .small-box-eighteen {
  position: relative;
  left: 400px;
  top: -255px;
}


.small-box-seventeen {
  position: relative;
  left: 115px;
  top: 70px;
}

.parent {
  padding-top: 50px;
}

.child {
  padding-top: 20px;
}


.small-box-nineteen {
  width: 740px;
  left: 30px;
  height: 30px;
  margin-bottom: -20px;
  margin-top: 50px;
  background-color: none;
  position: relative; /* add this line to position the checkboxes relative to this element */
  }

.loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  height: 100%;
  width: 0%;
  background-color: rgb(148, 215, 1);
  transition: width 0.1s ease-out;
}

.loading-bar + span {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  font-weight: bold;
  font-size: 16px;
  z-index: 1;
  padding: 0 5px;
    display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}




.small-box-twenty {
  width: 740px;
  left: 30px;
  height: 300px;
  margin-bottom: 25px;
  margin-top: 50px;
  color: white;
  background-color: none; /* change the opacity to 1.0 */
  position: relative; /* add this line to position the checkboxes relative to this element */
}


  .small-box-twentyone {
  width: 325px;
  left: 237px;
  height: 50px;
  margin-bottom: 25px;
  margin-top: 50px;
  font-size: 20px;
  cursor: pointer;
  color: white;
  border-radius: 10px;
  background-color: rgb(var(--small-box-twentyone));
  display: flex;
  align-items: center; /* This centers the text vertically */
  justify-content: center; /* This centers the text horizontally */
  position: relative; /* add this line to position the checkboxes relative to this element */
  }

  .small-box-twentyone:hover {
  background-color: rgb(200, 200, 200);
  color: black;
}

  .small-box-twentytwo {
  width: 740px;
  left: 30px;
  height: 30px;
  margin-bottom: -30px;
  margin-top: -10px;
  background-color: none;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  position: relative; /* add this line to position the checkboxes relative to this element */
  }

  .no-underline {
  text-decoration: none;
  color: white;
}

  .no-underlines {
  text-decoration: none;
  color: rgb(51, 153, 255);
}

  .no-underlinez {
  text-decoration: none;
  color: rgb(51, 153, 255);
  font-size: bold;
}

.small-box-twentyfive {
  width: 170px;
  height: 300px;
  margin-bottom: 25px;
  margin-top: 50px;
  margin-right: 20px;
  font-size: 20px;
  color: white;
  background-color: rgb(30,30,30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.small-box-twentysix {
  width: 170px;
  height: 170px;
  font-size: 20px;
  color: white;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
}

.small-box-twentyseven {
  width: 170px;
  height: 45px;
  font-size: 20px;
  color: white;
  text-align: center;
  overflow: hidden;
  background-color: rgb(30, 30, 30);
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 85px;
}

.small-box-twentyeight {
  width: 170px;
  height: 45px;
  font-size: 15px;
  color: white;
  background-color: rgb(var(--small-box));
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 40px;
}

.small-box-twentynine {
  width: 170px;
  height: 40px;
  font-size: 20px;
  color: white;
  background-color: rgb(30, 30, 30);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  position: absolute;
  bottom: 0;
}

.small-box-twentysix img {
  width: 100%;
  height: auto;
}

.box0 img {
  position: absolute; /* Set the image position to absolute */
  top: 0; /* Adjust the top position as needed */
  left: 0; /* Adjust the left position as needed */
  width: 100%; /* Make the image fill the container horizontally */
  height: 100%; /* Make the image fill the container vertically */
  object-fit: cover; /* Preserve the aspect ratio of the image */
}

.donation-box {
  width: 800px;
  height: 383px;
  font-size: 20px;
  color: white;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: fixed;
  top: 402px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease;
  display: none;
  box-shadow: 0 0 20px #eee, inset 0 0 10px rgba(0, 0, 0, 0.5);
}



.donation-box.show {
  opacity: 1; /* Set the opacity to 1 to reveal the element */
  display: block; /* Show the donation box when the "show" class is added */
}

.donation-boxtext {
  width: 800px;
  height: 383px;
  font-size: 20px;
  text-shadow: 0px 0px 1px black;
  color: white;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: fixed;
  top: 402px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease;
  display: none;
  box-shadow: 0 0 20px #eee, inset 0 0 10px rgba(0, 0, 0, 0.5);
}



.donation-boxtext.show {
  opacity: 1; /* Set the opacity to 1 to reveal the element */
  display: block; /* Show the donation box when the "show" class is added */
}



  


.donation-box2 {
  width: 200px;
  height: 60px;
  font-size: 20px;
  color: white;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  bottom: 20px;
  left: 125px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
}
         
         .donation-box2 {
            background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%);
            text-align: center;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            border-radius: 10px;
            display: block;
          }

          .donation-box2:hover {
            background-position: right center; /* change the direction of the change here */
            box-shadow: 0 0 20px #eee;
            color: #fff;
            text-decoration: none;
          }



  .donation-box3 {
  width: 200px;
  height: 60px;
  font-size: 19px;
  color: white;
  background-color: purple;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  bottom: 20px;
  right: 125px;
  border-radius: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
 }


         
         .donation-box3 {
            background-image: linear-gradient(to right, #34e89e 0%, #0f3443  51%, #34e89e  100%);
            text-align: center;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            border-radius: 10px;
                }

          .donation-box3:hover {
            background-position: right center; /* change the direction of the change here */
            box-shadow: 0 0 20px #eee;
            color: #fff;
            text-decoration: none;
          }
         
         

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20px;
  color: #888;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.close-button:hover {
  background-color: transparent; /* Set the background color to transparent on hover */
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 9999;
  pointer-events: none;
}

.overlay.show {
  pointer-events: auto;
}

  .account8{
            content: "";
            width: 2px;
            height: 80px;
            background-color: #fff;
            position: absolute;
            left: 540px;
            transform: translateX(-50%);
        }
        
          .account9{
            content: "";
            width: 2px;
            height: 80px;
            background-color: #fff;
            position: absolute;
            left: 613px;
            transform: translateX(-50%);
        }

        .account {
            width: 800px;
            height: 70px;
            margin: 20px;
            background: linear-gradient(
                to bottom,
                rgba(var(--main-color), 0.8),
                rgba(0, 0, 0, 0.8)
              );
            color: #fff;
            border-radius: 40px;
            display: flex;
            align-items: center;
            position: relative;
                  }


        .account3 {
            width: 50px;
            height: 50px;
            background: url('oursites5.png') no-repeat center center/cover;
            border-radius: 50px !important;
            color: #fff;
            margin-left: 0%;
            margin-right: 0%;
            position: absolute;
            left: 630px;
        }

.account4 {
    width: 90px;
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    position: absolute;
    left: 700px;
    word-wrap: break-word; /* This property allows the text to break and wrap onto the next line */
}


        .account5 {
            width: 140px;
            height: 40px;
            border-radius: 40px;
            background-color: rgba(40, 40, 40, 1);
            color: white;
            position: absolute;
            left: 700px;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
            cursor: pointer;
            font-weight: bold;
            font-size: 18px;
            font-family: Helvetica, Arial, sans-serif;
        }

        .account5:hover {
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            transform: translateX(-50%) scale(1.1);
        }
        
           .navprojects {
    width: 50px;
    height: 50px;
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    cursor: pointer;
    position: absolute;
    border-radius: 50px;
    font-weight: bold;
    left: 30px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the text horizontally */
    background-image: url('navprojects.png'); /* Add background image */
    background-size: cover; /* Adjust background image size */
    transition: background-color 0.3s ease; /* Add transition effect */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add transitions for box-shadow and transform */
}

        .navprojects:hover {
    box-shadow: 0 0 7px 3px white; /* White glow effect */
    transform: scale(1.1); /* Increase size by 10% on hover */
}
    
        
              .navabout {
            width: 50px;
    height: 50px;
            color: #fff;
            margin-left: 0%;
            margin-right: 0%;
            cursor: pointer;
            position: absolute;
            border-radius: 50px;
            font-weight: bold;
            left: 120px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center; /* Center the text horizontally */
            background-image: url('navabout.png'); /* Add background image */
    background-size: cover; /* Adjust background image size */
    transition: background-color 0.3s ease; /* Add transition effect */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add transitions for box-shadow and transform */
        }
        
        .navabout:hover {
    box-shadow: 0 0 7px 3px white; /* White glow effect */
    transform: scale(1.1); /* Increase size by 10% on hover */
}
        
.navcontact {
    width: 50px;
    height: 50px;
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    cursor: pointer;
    position: absolute;
    border-radius: 50px;
    font-weight: bold;
    left: 540.5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    background-color: black;
    justify-content: center; /* Center the text horizontally */
    background-image: url('navcontact.png'); /* Add background image */
    background-size: cover; /* Adjust background image size */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add transitions for box-shadow and transform */
}

.navcontact:hover {
    box-shadow: 0 0 7px 3px white; /* White glow effect */
    transform: scale(1.1); /* Increase size by 10% on hover */
}

.navdonate {
    width: 50px;
    height: 50px;
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    cursor: pointer;
    position: absolute;
    border-radius: 50px;
    font-weight: bold;
    left: 210px;
    font-size: 14px;
    display: flex;
    align-items: center;
    background-color: black;
    justify-content: center; /* Center the text horizontally */
    background-image: url('navdonate.png'); /* Add background image */
    background-size: cover; /* Adjust background image size */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add transitions for box-shadow and transform */
}

.navdonate:hover {
    box-shadow: 0 0 20px rgba(204, 248 ,67 ,1); /* White glow effect */
    box-shadow: 0 0 10px 10px rgba(204, 248 ,67 ,0.7); /* White glow effect */
        transform: scale(1.1); /* Increase size by 10% on hover */
}

.navmessages {
    width: 200px;
    height: 60px;
    color: #fff;
    margin-left: 0%;
    box-shadow: 0px 0px 10px black;
    margin-right: 0%;
    position: absolute;
    border-radius: 10px;
    font-weight: bold;
    left: 300px;
    font-size: 18px;
    background-color: rgba(1, 1, 1, 0.5);
    display: flex;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add transitions for box-shadow and transform */
}

.navmessagesunder {
    width: 130px;
    height: 60px;
    color: #fff;
    margin-left: 0%;
    box-shadow: 0px 0px 10px black;
    margin-right: 0%;
    position: absolute;
    font-weight: bold;
    left: 70px;
    border-radius: 0px 10px 10px 0px;
    font-size: 18px;
    background-color: rgba(255, 215, 1, 0.2);
    display: flex;
    z-index: 104200;
    transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; /* добавил */
}

.navmessagesunder:hover {
    background-color: rgba(0, 215, 255, 0.2); /* цвет при наведении */
}




.navadd:hover {
    box-shadow: 0 0 7px 3px white; /* White glow effect */
}

.navmessagesamount {
    width: 70px;
    height: 30px;
    color: #fff;
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    bottom: 0;
    box-shadow: 0px 0px 5px black;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Adjust transition duration for message */
    align-items: center;
    border-radius: 0px 0px 0px 10px;
    justify-content: center; /* Center the text horizontally */
}

.navmessagesname {
    width: 70px;
    height: 30px;
    color: #fff;
    box-shadow: 0px 0px 5px black;
    top: 0;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Adjust transition duration for message */
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    border-radius: 10px 0px 0px 0px;
    justify-content: center; /* Center the text horizontally */
}

.navmessagesdata {
    width: 70px;
    height: 60px;
    color: #fff;
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    flex-direction: column; /* Set the direction to column */
    border-radius: 10px 0px 0px 10px;
    align-items: center;
    justify-content: center; /* Center the text vertically */
}

.navmessagestext {
    width: 130px;
    height: 60px;
    color: #fff;
    position: absolute;
    font-size: 15px;
    align-items: Center;
    left: 70px;
    flex-wrap: wrap;
    text-align: center; /* Center the text horizontally */
    font-weight: normal;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Adjust transition duration for message */
    align-content: stretch;
    display: flex;
    border-radius: 0px 10px 10px 0px;
    justify-content: center; /* Center the text horizontally */
    overflow-y: auto; /* Add vertical scrollbar when content overflows */

    /* WebKit Scrollbar Styles */
    scrollbar-color: black transparent; /* Firefox */
    scrollbar-width: thin; /* Firefox */

    &::-webkit-scrollbar {
        width: 8px; /* Adjust the width as needed */
    }

    &::-webkit-scrollbar-thumb {
        background-color: grey;
        border-radius: 30px;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
}








        .projectsbar {
            width: 800px;
            height: 285px;
            text-shadow: 2px 2px 2px black;
              background: linear-gradient(
              to top,
              rgba(0, 0, 0, 0.9) 0%,
              rgba(var(--solid-color), 0.9) 100%
            );
            color: #fff;
            border-radius: 10px;
            align-items: center;
            position: relative;
            transition: height 1.6s ease; /* Smooth transition */
        }

.projectsbarname {
    width: 800px;
    height: 80px;
    background-color: rgba(55, 55, 55, 0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 0%;
}

.projectsbarcontent {
    width: 800px;
    height: 80px;
    background-color: rgba(55, 55, 55, 0);
    color: #fff;
    display: flex;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    transition: opacity 2s ease;
}

.projectsbartitles {
    width: 800px;
    height: 70px;
    background-color: rgba(55, 55, 155, 0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 0%;
    transition: opacity 2s ease;
}

.projectsbarcontent2 {
    width: 800px;
    height: 80px;
    background-color: rgba(55, 55, 55, 0);
    color: #fff;
    display: flex;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    opacity: 0;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: -150px;
    z-index: -5;
    transition: opacity 2s ease;
}

.projectsbartitles2 {
    width: 800px;
    height: 70px;
    background-color: rgba(55, 55, 155, 0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 0%;
    z-index: -5;
    opacity: 0;
    transition: opacity 2s ease;
}

.projectsbarcontent3 {
    width: 800px;
    height: 80px;
    background-color: rgba(55, 55, 55, 0);
    color: #fff;
    display: flex;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: -150px;
    opacity: 0;
    z-index: -5;
    transition: opacity 2s ease;
}

.projectsbartitles3 {
    width: 800px;
    height: 70px;
    background-color: rgba(55, 55, 155, 0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    position: relative;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 0%;
    z-index: -5;
    opacity: 0;
    transition: opacity 2s ease;
}


                                  .projectsbar1 {
                  margin-left: 0%;
            width: 80px;
    height: 80px;
            background: url('cs2logo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                .projectsbar1:hover {
                    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 2px rgb(255, 170, 0); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}



.projectsbar2 {
    margin-left: 2%;
    width: 80px;
    height: 80px;
    background: url('dota2img/dota2logo.jpg') center center/cover no-repeat;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease; /* Adding a smooth transition effect */
}

.projectsbar2:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 8px rgb(150, 55, 55); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }

.projectsbar3 {
    margin-left: 2%;
    width: 80px;
    height: 80px;
    background: url('pubgimg/pubglogo.jpg') center center/cover no-repeat;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease; /* Adding a smooth transition effect */
}

.projectsbar3:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(100, 180, 220); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }

.projectsbar4 {
    margin-left: 2%;
    width: 80px;
    height: 80px;
    background: url('apexlegendsimg/apexlegends.jpg') center center/cover no-repeat;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease; /* Adding a smooth transition effect */
}

.projectsbar4:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 2px rgb(65, 48, 195); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}

                                .projectsbar5 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('warthunderimg/warthunderlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar5:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(166, 2, 27); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }

                                .projectsbar6 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('destiny2img/destiny2logo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar6:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(22, 32, 52); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }

                        .projectsbar7 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('battlefieldimg/battlefieldlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
        .projectsbar7:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 2px rgb(125, 150, 170); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}

                                .projectsbar8 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('thefinalsimg/thefinalslogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
        
        .projectsbar8:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 7px 5px rgb(244, 24, 59); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}

                             .projectsbar9 {
                  margin-left: 0%;
            width: 80px;
    height: 80px;
            background: url('callofdutyimg/codsmall.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar9:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(200, 10, 10); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar10 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('rainbowsiximg/rainbowsixlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar10:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(255, 255, 255); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar11 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('warframeimg/warframelogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar11:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(0, 0, 0); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar12 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('left4deadimg/left4deadlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar12:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(220, 0, 0); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar13 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('rust2img/rustlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar13:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(238, 64, 37); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar14 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('dayzimg/dayzlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar14:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(225, 225, 225); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar15 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('arma3img/arma3logo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar15:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(0, 0, 0); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar16 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('overwatch2img/overwatchlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar16:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(255, 158, 1); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar17 {
                  margin-left: 0%;
            width: 80px;
    height: 80px;
            background: url('teamfortressimg/teamfortresslogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar17:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(200, 135, 70, 1); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar18 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('fortniteimg/fortnitelogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar18:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(160, 70, 250, 1); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar19 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('valorantimg/valorantlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar19:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(255, 68, 87, 1); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar20 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('leagueoflegendsimg/leagueoflegendslogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar20:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(1, 34, 60, 1); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                             .projectsbar21 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('tarkovimg/tarkovlogo.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
                        .projectsbar21:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 5px rgb(237, 233, 219, 1); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
                }
        
                                        .projectsbar22 {
                  margin-left: 2%;
            width: 80px;
            height: 80px;
            background-color: rgba(22, 22, 22, 0);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
        }
        
                                        .projectsbar23 {
                  margin-left: 2%;
            width: 80px;
            height: 80px;
            background-color: rgba(22, 22, 22, 0);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
        }
        
                                .projectsbar24 {
                  margin-left: 2%;
            width: 80px;
    height: 80px;
            background: url('cscasessmall.jpg') center center/cover no-repeat;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease; /* Adding a smooth transition effect */
        }
        
        
        .projectsbar24:hover {
    transform: scale(1.1); /* Increase size by 110% */
    box-shadow: 0 0 10px 8px rgb(50, 75, 210); /* Add yellow glow effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.projectsbarname h2 {
  font-size: 25px;
  margin-top: 5px;
  font-weight: 900;
}

                                .projectstitles1 {
                  margin-left: 0%;
            width: 80px;
            height: 30px;
            background-color: rgba(255, 165, 0, 1);
            color: #fff;
            text-shadow: 0px 0px 2px black;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }

                        .projectstitles2 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(180, 0, 0, 1);
            border-radius: 10px;
            display: flex;
            text-shadow: 0px 0px 2px black;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }

                                .projectstitles3 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            text-shadow: 0px 0px 2px black;
            background-color: rgba(100, 180, 220, 1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }

                                .projectstitles4 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(65, 48, 195, 1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            text-shadow: 0px 0px 1px black;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }

                                .projectstitles5 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(166, 2, 27, 1);
            color: #fff;
            border-radius: 10px;
            text-shadow: 0px 0px 1px black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }

                                .projectstitles6 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(22, 32, 52, 1);
            color: #fff;
            border-radius: 10px;
            text-shadow: 0px 0px 1px black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            position: relative;
        }

.projectstitles7 {
    margin-left: 2%;
    width: 80px;
            height: 30px;
    background-color: rgba(125, 150, 170, 1);
    color: #fff;
    border-radius: 10px;
    text-shadow: 0px 0px 2px black;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: opacity 0.3s ease-in-out;
}

  .fade-effect {
    transition: opacity 0.3s ease-in-out;
  }

                                .projectstitles8 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(244, 24, 59, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: 0px 0px 2px black;
            font-size: 13px;
            overflow: hidden;
            position: relative;
}
        
        .ticker-text {
    white-space: nowrap;
    text-shadow: 0px 0px 2px black;
    font-size: 15px;
    position: absolute;
}

                                .projectstitles9 {
                  margin-left: 0%;
            width: 80px;
            height: 30px;
            background-color: rgba(215, 0, 0, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            text-shadow: 0px 0px 1px black;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles10 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(0, 0, 0, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            text-shadow: 0px 0px 1px black;
            align-items: center;
            justify-content: center;
            font-size: 12.5px;
            position: relative;
        }
        
                                        .projectstitles11 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(255, 255, 255, 1);
            color: #000;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            position: relative;
        }
        
                                        .projectstitles12 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(164, 3, 5, 1);
            color: #fff;
            border-radius: 10px;
            text-shadow: 0px 0px 1px black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            position: relative;
        }
        
                                        .projectstitles13 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(238, 64, 37, 1);
            color: #fff;
            border-radius: 10px;
            text-shadow: 0px 0px 1px black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles14 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(226, 226, 226, 1);
            color: #000;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles15 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(0, 0, 0, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            text-shadow: 0px 0px 1px black;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles16 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgb(255, 158, 1);
            text-shadow: 0px 0px 1px black;
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12.5px;
            position: relative;
        }
        
                                        .projectstitles17 {
                  margin-left: 0%;
            width: 80px;
            height: 30px;
            background-color: rgba(200, 135, 70, 1);
            color: #fff;
            border-radius: 10px;
            text-shadow: 0px 0px 2px black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles18 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            text-shadow: 0px 0px 1px black;
            background-color: rgb(160, 70, 250, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles19 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            text-shadow: 0px 0px 1px black;
            background-color: rgb(255, 68, 87, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles20 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            text-shadow: 0px 0px 1px black;
            background-color: rgb(1, 34, 60, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles21 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgb(237, 233, 219, 1);
            color: #000;
            border-radius: 10px;
            display: flex;
            text-shadow: 0px 0px 1px black;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles22 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(22, 22, 22, 0);
            color: #fff;
            border-radius: 10px;
            text-shadow: 0px 0px 1px black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                        .projectstitles23 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(22, 22, 22, 0);
            color: #fff;
            border-radius: 10px;
            display: flex;
            text-shadow: 0px 0px 1px black;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            position: relative;
        }
        
                                .projectstitles24 {
                  margin-left: 2%;
            width: 80px;
            height: 30px;
            background-color: rgba(30, 50, 140, 1);
            color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            overflow: hidden;
            position: relative;
}
        
        .ticker-text {
    white-space: nowrap;
    text-shadow: 0px 0px 2px black;
    font-size: 15px;
    position: absolute;
}

.projectsbarextendforward {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: url('forwardbutton.png') center center/cover no-repeat;
    border-radius: 50px;
    left: 435px;
    opacity: 0.8;
    cursor: pointer;
    display: flex;
    bottom: 15px;
    align-items: center;
    justify-content: center; /* Center horizontally */
    position: absolute;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    }
    
.projectsbarextendforward:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
  color: black;
  opacity: 1;
}

.projectsbarextendbackward {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: url('backwardbutton.png') center center/cover no-repeat;
    border-radius: 50px;
    left: 335px;
    opacity: 0.8;
    cursor: pointer;
    display: flex;
    bottom: 15px;
    align-items: center;
    justify-content: center; /* Center horizontally */
    position: absolute;
    font-weight: 900;
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    }
    
.projectsbarextendbackward:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
  color: black;
  opacity: 1;
}

a.no-underline:hover {
  text-shadow: 0 0 6px rgba(51,153,255,0.8);
  transform: scale(1.1);
}

.step {
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
}
.active-step {
  color: limegreen;
}

.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease-in-out;
}

.hidden {
  opacity: 0;
  z-index: 0;
}

.visible {
  opacity: 1;
  z-index: 1;
}

.sponsor {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: white;
}

.sponsor::before {
  content: "●";
  margin-right: 8px;
  font-size: 12px;
  color: white;
}

.sponsor-gold,
.sponsor-covert,
.sponsor-classified,
.sponsor-restricted,
.sponsor-milspec,
.sponsor-industrial,
.sponsor-pro {
  font-weight: bold;
}

.sponsor-gold::before,
.sponsor-covert::before,
.sponsor-classified::before,
.sponsor-restricted::before,
.sponsor-milspec::before,
.sponsor-industrial::before,
.sponsor-pro::before {
  content: "★"; 
}


/* Цвета уровней */
.sponsor-gold {
  color: #f8d749;
  text-shadow: 0 0 10px #f8d749;
}
.sponsor-gold::before {
  color: #f8d749;
}

.sponsor-covert {
  color: #d85752;
  text-shadow: 0 0 10px #d85752;
}
.sponsor-covert::before {
  color: #d85752;
}

.sponsor-classified {
  color: #c142de;
  text-shadow: 0 0 10px #c142de;
}
.sponsor-classified::before {
  color: #c142de;
}

.sponsor-restricted {
  color: #7f50f6;
  text-shadow: 0 0 10px #7f50f6;
}
.sponsor-restricted::before {
  color: #7f50f6;
}

.sponsor-milspec {
  color: #516af2;
  text-shadow: 0 0 10px #516af2;
}
.sponsor-milspec::before {
  color: #516af2;
}

.sponsor-industrial {
  color: #6c97d4;
  text-shadow: 0 0 10px #6c97d4;
}
.sponsor-industrial::before {
  color: #6c97d4;
}


.sponsor-pro {
  font-weight: bold;
  background: linear-gradient(
    270deg,
    #7f50f6,
    #c142de,
    #ff7b00,
    #00f0ff,
    #007bff,
    #7f50f6
  );
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 8s ease infinite;
  text-shadow: 0 0 16px rgba(255, 120, 255, 0.6);
}

.sponsor-pro::before {
  content: "★";
  margin-right: 8px;
  font-size: 14px;
  background: linear-gradient(
    45deg,
    #7f50f6,
    #c142de,
    #ff7b00,
    #00f0ff,
    #007bff,
    #7f50f6
  );
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s ease infinite;
  text-shadow: 0 0 16px rgba(255, 120, 255, 0.6);
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




body[data-theme="dota2"] {
  --main-color: 150, 50, 50;
  --solid-color: 110, 40, 40;
  --small-box: 70, 15, 15;
  --small-box-seven: 150, 50, 50;
  --small-box-twentyone: 150, 30, 30;
  --body-background: url('../dota2img/1.jpg');
}

body[data-theme="pubg"] {
  --main-color: 50, 150, 150;
  --solid-color: 50, 150, 150;
  --small-box: 15, 70, 70;
  --small-box-seven: 50, 150, 150;
  --small-box-twentyone: 30, 150, 150;
  --body-background: url('../pubgimg/1.jpg');
}

body[data-theme="apexlegends"] {
  --main-color: 70, 50, 150;
  --solid-color: 70, 50, 150;
  --small-box: 40, 15, 70;
  --small-box-seven: 70, 50, 150;
  --small-box-twentyone: 50, 30, 150;
  --body-background: url('../apexlegendsimg/1.jpg');
}

body[data-theme="warthunder"] {
  --main-color: 235, 35, 35;
  --solid-color: 235, 35, 35;
  --small-box: 150, 15, 15;
  --small-box-seven: 235, 35, 35;
  --small-box-twentyone: 220,30,30;
  --body-background: url('../warthunderimg/1.jpg');
}

body[data-theme="destiny2"] {
  --main-color: 30, 40, 80;
  --solid-color: 30, 40, 80;
  --small-box: 15, 30, 70;
  --small-box-seven: 30, 40, 80;
  --small-box-twentyone: 30, 40, 150;
  --body-background: url('../destiny2img/1.jpg');
}

body[data-theme="battlefield"] {
  --main-color: 125, 150, 170;
  --solid-color: 125, 150, 170;
  --small-box: 90, 100, 110;
  --small-box-seven: 125, 150, 170;
  --small-box-twentyone: 100, 120, 140;
  --body-background: url('../battlefieldimg/1.jpg');
}

body[data-theme="callofduty"] {
  --main-color: 200, 80, 10;
  --solid-color: 200, 80, 10;
  --small-box: 190, 70, 30;
  --small-box-seven: 200, 80, 10;
  --small-box-twentyone: 130, 40, 10;
  --body-background: url('../callofdutyimg/1.jpg');
}

body[data-theme="rainbowsix"] {
  --main-color: 150, 50, 50;
  --solid-color: 150, 50, 50;
  --small-box: 70, 15, 15;
  --small-box-seven: 150, 50, 50;
  --small-box-twentyone: 150, 150, 30;
  --body-background: url('../rainbowsiximg/1.jpg');
}

body[data-theme="warframe"] {
  --main-color: 0, 150, 150;
  --solid-color: 0, 150, 150;
  --small-box: 15, 70, 70;
  --small-box-seven: 0, 150, 150;
  --small-box-twentyone: 30, 150, 150;
  --body-background: url('../warframeimg/1.jpg');
}

body[data-theme="left4dead"] {
  --main-color: 100, 150, 50;
  --solid-color: 100, 150, 50;
  --small-box: 30, 70, 15;
  --small-box-seven: 100, 150, 50;
  --small-box-twentyone: 70, 150, 30;
  --body-background: url('../left4deadimg/1.jpg');
}

body[data-theme="rust"] {
  --main-color: 150, 30, 20;
  --solid-color: 150, 30, 20;
  --small-box: 70, 25, 15;
  --small-box-seven: 150, 30, 20;
  --small-box-twentyone: 220, 60, 30;
  --body-background: url('../rust2img/1.jpg');
}

body[data-theme="dayz"] {
  --main-color: 60, 55, 45;
  --solid-color: 60, 55, 45;
  --small-box: 50, 45, 40;
  --small-box-seven: 60, 55, 45;
  --small-box-twentyone: 50, 50, 40;
  --body-background: url('../dayzimg/1.jpg');
}

body[data-theme="arma3"] {
  --main-color: 100, 110, 120;
  --solid-color: 100, 110, 120;
  --small-box: 70, 80, 95;
  --small-box-seven: 100, 110, 120;
  --small-box-twentyone: 90, 100, 120;
  --body-background: url('../arma3img/1.jpg');
}

body[data-theme="overwatch2"] {
  --main-color: 200, 120, 0;
  --solid-color: 200, 120, 0;
  --small-box: 70, 45, 15;
  --small-box-seven: 200, 120, 0;
  --small-box-twentyone: 75, 100, 30;
  --body-background: url('../overwatch2img/1.jpg');
}

body[data-theme="teamfortress2"] {
  --main-color: 140, 80, 65;
  --solid-color: 140, 80, 65;
  --small-box: 120, 70, 50;
  --small-box-seven: 140, 80, 65;
  --small-box-twentyone: 190, 10, 50;
  --body-background: url('../teamfortressimg/1.jpg');
}

body[data-theme="thefinals"] {
  --main-color: 180, 30, 50;
  --solid-color: 180, 30, 50;
  --small-box: 70, 15, 15;
  --small-box-seven: 180, 30, 50;
  --small-box-twentyone: 150, 30, 30;
  --body-background: url('../thefinalsimg/1.jpg');
}