:root {
  --transparency: rgba(0, 0, 0, 0.4);

  --background-color: rgb(44, 44, 44);
  --dark-background-color: rgb(32, 32, 32);
  --intense-background-color: rgb(36, 36, 36);

  --background-image: url(../images/BG.png);
  --text-color: white;
  --text-outline: black;

  --dark-red: rgb(189, 0, 0);
  --intense-red: rgb(255, 46, 46);
  --red: rgb(255, 77, 68);
  --light-red: rgb(255, 118, 118);
}


/*-------------------------*/
/*----------BODY-----------*/
/*-------------------------*/

body, html {
  background: var(--background-image);
  background-position: left;
  background-size: 100%;

  height: 100%;
  margin: 0;
  text-align: center;

  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--background-color);
  overflow-x: hidden;

  user-select: none;


  background:

  linear-gradient(
  rgba(50, 50, 50, 0.1), 
  rgba(0, 0, 0, 0.9)
  ),
  
  var(--background-image);
  background-attachment: local;
     
}
  
/*-------Background--------*/
#bg-image {
  border-bottom: 10px solid black;
  box-shadow: 0vh 10vh 50vh 5vh black;

  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-size: 12vw;
  text-shadow: -2.5px -2.5px 0 black, 2.5px -2.5px 0 black, -2.5px 2.5px 0 black, 2.5px 2.5px 0 black;
    
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.loading_icon {
  width: 10vw;
  aspect-ratio: 1;
  border-radius: 50%;  
  border: 5px dashed white;
  animation: rotate 10s linear infinite;
}

.loading_screen {
  background: url(../images/loading.png) no-repeat;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-position-x: center;
  background-position-y: 30%;
  background-size: 90%;
  width:10vw;
  border-radius: 50%;
}


@keyframes rotate {
  100% {transform: rotate(360deg);}
}














/*----------------------*/
/*--------NAVBAR--------*/
/*----------------------*/

.navbar-parent {
  background: var(--transparency);

  height: 100vh;
  width: 10vh;
 
  position: fixed;
  top: 0;

  z-index: 2;
}

.navbar-child {
  height: 100vh;
  display: grid;
  place-items: center;
}
  
.navbar-icon {
  width: 70%;
  transition: 0.3s;
}

.navbar-icon:hover {
  width: 85%;
  cursor: pointer;
}





/*----------------------*/
/*-------CONTENT--------*/
/*----------------------*/

.content {
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-size: 3vh;
  
  margin-top: 20vh;
}

/*--VISITOR--*/
.visitors {
  font-size: 6vh;
  width: 40vw;
  border-radius: 3vh;
  border: 1vh solid black;
  box-shadow: inset 0 0 10px 1px var(--red), 25px 25px 10px -3px var(--transparency);
  padding: 5vh;
  background-color: var(--dark-background-color);

  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#countId {
  line-height: 15vh;
  font-size: 10vh;
  background-image: linear-gradient(to right, var(--intense-red), var(--light-red), var(--intense-red));
  background-size: 400% auto;
  -webkit-background-clip: text;
  background-clip: text;
  
  animation: animatedText 5s linear infinite;
  color: transparent;
}



/*--ABOUT-SECTION--*/
.about {
  text-shadow: -2px -2px 0 var(--text-outline), 2px -2px 0 var(--text-outline), -2px 2px 0 var(--text-outline), 2px 2px 0 var(--text-outline);
  font-size: 10vh;
}

#content-signature {
  width: 50vw;
  margin: 10vh;
}

.about-text {
  font-size: 4vh;
  padding: 5vh;
}

#copyright {
  color: var(--text-color); 
  font-size: 3vh; 
  text-align: right;  
  margin: 2vh;
  margin-top: 5vw;
  font-family: 'Roboto', sans-serif;
}


/*-------------------------*/
/*----------LINKS----------*/
/*-------------------------*/

/*---------General---------*/
a {
  font-size: 5vh;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-decoration: none;
  transition: 0.3s;
}

a:link {
  color: var(--red);
  text-decoration: none;
  transition: 0.3s;
}
  
a:visited {
  color: var(--red);
  text-decoration: none;  
}
  
a:hover {
  color: var(--intense-red);
  text-decoration: underline;
}
  
a:active {
  color: var(--intense-red);
  text-decoration: none;
}





/*-------------------------*/
/*--------ANIMATIONS-------*/
/*-------------------------*/

@keyframes spin {
  100% {
    transform:rotate(360deg);
  } 
}

@keyframes animatedText{
  to {
    background-position: 400% center;
  }
}





/*-------------------------*/
/*--------RESPONSIVE-------*/
/*-------------------------*/

@media screen and (max-width: 1250px) {
  
}



/*------Google-Chrome------*/

/*---------Scrollbar--------*/
::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-track {
  background: var(--transparency);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--dark-red), var(--red));
  border: 2px solid black;
  border-radius: 1vh;
}