@import url("colors.css");

p {
  color: var(--text)
}

html, body {
    font-family: "Lato", sans-serif;
    padding: 0px;
    margin: 0%;
    background-color: var(--background2);
    height: 100%;
    overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.login-box {
  opacity: 0%;
  transform: translateY(-150px);
  position: relative;
  z-index: 1;
  background-color: var(--background);
  padding: 10px;
  border-radius: 15px;
  margin: 10px;
  padding-bottom: 10px;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 10px var(--background2);
}
.textbox-username {
  height: 30px;
  border-radius: 10px;
  border: #121511 solid 3px;
  background-color: var(--text-darker);
  text-align: center;
  margin-bottom: 5px;
}

.login-box label {
  text-align: center;
  margin-bottom: 5px;
  color: var(--text);
}

.login-open {
    animation: 500ms ease-in-out 1 openLogin forwards;
}
.login-closed {
    animation: 500ms ease-in-out 1 closeLogin forwards;
    animation-fill-mode: forwards;
}

@keyframes openLogin {
    0% {
        opacity: 0%;
        transform: translateY(-150px);
    }
    100% {
        opacity: 100%;
        transform: translateY(0px);
    }
}
@keyframes closeLogin{
    0% {
        opacity: 100%;
        transform: translateY(0px);
    }
    100% {
        opacity: 0%;
        transform: translateY(-150px);
    }
}
.login {
  /* flex: 2;
  margin-right: 5px; */
}
.signup {
  /* flex: 1; */
}
/* 
.username-buttons {
  display: flex;
  justify-content: space-between;
} */
.username-button {
  display: block;
  font-size: 15px;
  line-height: 15px;
  color: var(--text);
  text-align: center;
  border-radius: 10px;
  background: var(--background2);
  border: #121511 3px solid;
  width: 100%;
  padding: 5px;
}
.username-button:active {
  background-color: #121511;
}

.sidenav {
  box-sizing: border-box;
  height: 100%;
  width: 175px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--background);
  overflow-x: hidden;
  margin:0%;
}

.sidenav a {
  cursor: pointer;
  transition: 100ms ease-out;
  border-radius: 5px;
  margin: 10px 10px;
  padding: 10px;
  text-decoration: none;
  font-size: 25px;
  color: var(--text-darker);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.logo { 
  width: 35px;
  height: 35px;
  display: inline;
}
#user {background-color: var(--background);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#user svg{
  width: 100px;
  height: 100px;
}
#user h3 {
  margin: 0px;
}

h3 {
  white-space: nowrap;
  font-size: 20px;
  margin: 0px 0px 0px 25px;
  padding: 0px;
  display: inline;
}

.sidenav a:hover {
  background-color: var(--background2);
  color: var(--text);
}

.main {
  margin: 0px;
  color: var(--text);
  background-color: var(--background2);
  padding: 5px;
  margin-left: 175px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  display: flex;
  padding: 0px;
  flex-direction: column;
  height:100%;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.topbar {
    background: linear-gradient(180deg, #313a2f, var(--background2));
    /* background-color: var(--topbar); */
    height: 150px;
    border-bottom: 10px solid var(--background);
    margin: 0px;
    padding: 10px;
    z-index: 1;
}

.items {
    padding: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    flex: 1;
}

#background-gradient {
    background: radial-gradient(#3b4439, var(--background2));
    height: 100%;
    background-attachment: fixed;
}


@keyframes loadBoxes {
  0% {
    transform: translateY(10px);
    opacity: 0%;
  }
  100% {
    transform: translateX(0);
    opacity: 100%;
  }
}
::-webkit-input-placeholder { 
    font-weight: 400;
    color:black ;
    opacity: 1 !important;
}

.reverse {
    animation: 250ms ease-in-out 1 testing;
}

@keyframes testing {
    0% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
        background-color: rgb(173, 38, 5);
    }
    100% {
        transform: rotate(0deg);
    }
}