@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap");

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
}

body {
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
  color: white;
}

a
{
    text-decoration: none;
    color: white;
}

.Header {
  display: flex;
  justify-content: center;

  gap: 10%;
  font-size: 1.5rem;
  background-color: rgb(15, 15, 15);
  color: white;
  padding: 0.5rem;
}





 /*About*/
.About {
  transform: translateX(-5%);
  cursor: pointer;
  background-image: 
  linear-gradient(0deg, rgb(200, 0, 225), rgb(0, 200 ,225));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.AboutContent {
  margin-bottom: 2.5%;
  margin-top: 2.5%;
  margin-left: 20%;
  margin-right: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 1rem;

  background-color: rgb(35, 35, 40);
  border-radius: 2rem;
  box-shadow: 5px 5px 5px 5px rgb(20, 20, 20);
}

.AboutText {
  font-size: 1.5rem;
}

#LoadUputstvoText
{
    color: rgb(0, 175, 200);
    cursor: pointer;
}

.AboutLogoBox {
  display: flex;
  justify-content: center;
}

.AboutLogo {
  width: 70%;
  height: 70%;
}





/* Uputstvo */
.Uputstvo {
  transform: translateX(-5%);
  cursor: pointer;
  background-image: 
  linear-gradient(-5deg, rgb(200, 0, 225), rgb(0, 200 ,225));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.UputstvoContent {
  margin-top: 2.5%;
  margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 1rem;

  background-color: rgb(35, 35, 40);
  border-radius: 2rem;
  box-shadow: 5px 5px 5px 5px rgb(20, 20, 20);
}

.Title{
  font-size: 3rem;
  background-image: 
  linear-gradient(0deg, rgb(200, 0, 225), rgb(0, 200 ,225));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.UputstvoImage {
  display: flex;
  justify-content: center;
}

.UputstvoForm {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.Highlight{
color: rgb(0, 175, 200);
}




/*Download*/
.Download {
  transform: translateX(-5%);
  cursor: pointer;
  background-image: 
  linear-gradient(5deg, rgb(200, 0, 225), rgb(0, 200 ,225));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.DownloadButtonsBox{
  display: flex;
  justify-content: center;
  margin-top: 20%;
  height: 150px;
  gap: 5%;
}

.DownloadButton{
  margin-top: 2%;
  width: 20rem;
  height: 5rem;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  outline: none;
}
.DownloadButtonWrapper{
  margin-top: 1.5%;
  width: 20rem;
  height: 5rem;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  outline: none;
}

#DB1{
  background-image: linear-gradient(-5deg, rgb(100, 0, 125), rgb(0, 100 ,125));
}
#DB2{
  background-image: linear-gradient(0deg, rgb(100, 0, 125), rgb(0, 100 ,125));
}
#DB3{
  background-image: linear-gradient(0deg, rgb(100, 0, 125), rgb(0, 100 ,125));
}
#DB4{
  background-image: linear-gradient(5deg, rgb(100, 0, 125), rgb(0, 100 ,125));
}