body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto';
  background: none;
  background-color: #070932; 
}
#input-div.show-placeholder::placeholder {
  opacity: 1;
}
body{
  background-color: #070932; 
}
.container {
  position: relative;
  height: 100%;
  width: 100%;
}


.centered-div #input-div {
  position: relative; 

  width: 70vh;
  height: 40vh; 
  background-color: #070932; 
  border-radius: 10px; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto';
  font-weight: 600;
  font-size: 130px;
  letter-spacing: 0.1px;
  border: none;
}
.centered-div {
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}


#input-div {
  font-size: larger;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: none;
  color: #ffffff;
}

#input-div-back {
  font-size: larger;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: none;
  color: #ffffff;
}


.centered-div-placeholder {
  position: absolute; 
  font-size: 50px;
   font-weight: 600;
   font-size: 130px;
   letter-spacing: 0.1px;
   pointer-events: none; 
   z-index: 2;
}

.hidden{
  opacity: 0;
}

input{
text-align: center;
}


.side-div {
  position: absolute;
  top: 50%; 
  width: 30%; 
  height: 15vh; 
  background-color: #070932; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  font-weight: 10; 
  border-radius: 5px;
  color: #ffffff;
  z-index: 1;
  margin-top: -7.5vh; 
}

.left-side {
  left: calc(1% - 105px - 25px); 
}

.right-side {
  right: calc(1% - 105px - 25px); 

}

#input-div{
  font-size: larger;
  display: flex;
  justify-content: center;
  align-items: center;

}

input:focus {
  outline: none; 
}

*{
  caret-color: transparent;



}
.top-side {
  position: absolute;
  top: 20vh; 
  left: 50%;
  transform: translateX(-50%);
  width: 200%; 
  height: 10vh;
  background-color: #070932; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: 100;
  border-radius: 5px;
  color: #ffffff;

}

.bottom-side {
  position: absolute;
  bottom: 20vh; 
  left: 50%;
  transform: translateX(-50%);
  width: 170%; 
  height: 10vh; 
  background-color: #070932; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: 100;
  border-radius: 5px;
  color: #ffffff;
}

.github-repo{
  position: absolute;
  bottom: 10vh; 
  left: 50%;
  transform: translateX(-50%);
  width: 170%; 
  height: 10vh; 
  background-color: #070932; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: 100;
  border-radius: 5px;
  color: #ffffff;

}
a{
  text-decoration: none;
  color: rgb(168, 188, 224);
  transition: 0.5s ease-in-out; 

}

a:hover{
  color: white;
  transition: 0.5s ease-in-out; 

}