* {

    /* apply a traditional box layout model to all elements */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	-webkit-text-size-adjust: none; 

}


:root{
	--main-color : #4b6097;
	--accent-color: #c39ad2;
	--text-color: white;
	--background-dark: #1d1d1d;
	--background-light: #172438;

	--font: 'Novo Sans', sans-serif;
}


  @font-face {
      font-family: "Coolvetica";
      src: url(font/Coolvetica.otf);
  }

  @font-face {
    font-family: 'Novo Sans';
    src: url('font/NS-r.woff') format('woff');
  }


body{
  overflow: auto;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  background-color: var(--background-dark);
  font-family: "Novo Sans", sans-serif;
  font-size: 16px;
  z-index: 0;

}


@keyframes rotate {
  0% {	transform: rotate(0deg) scale(1.9);		}
  25% {	transform: rotate(90deg) scale(2.2);	}
  50% {	transform: rotate(180deg) scale(1.9);	}
  75% {	transform: rotate(270deg) scale(2.2);	}
  100% {	transform: rotate(360deg) scale(1.9);	}
}

#container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
  width:100%;
  height:100%;
  text-align: center;
  padding: 0px;
  color: var(--text-color);
  font: var(--font);
	background-color: var(--background-light);
}

#logo {
  position: relative;
  margin-top: 2%;
  max-width: min(60vh, 60vw);
  flex-shrink: 1;
}

#logo img {
  width:100%;
}

.header{
  position: relative;
  height: 50px;
  width: 100%;
  text-align: center;
}

.header div {
  float: left;
  color: #ff8000;
  font-size: 1em;
  width: 100%;
}

.admin {
  position: relative;
  float:right;
  margin: 5px;
}

.login{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 50%;
  z-index: 2;
  text-align: center;
  margin-bottom: 1rem;
  width: 100%;
}

.login input {
  font-size: 2rem;
  width:75%;

}

.login input[type=text]{
  background: transparent;
  border: 1px solid white;
  border-radius: 2px;
  color: var(--text-color);
  font-weight: 400;
  padding: 4px;
  width:75%;
  font-size: max(3vw, 3vh);
  text-align: center;  
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: groove;
  text-transform: uppercase;
}


.login input[type=submit]{
  margin-top: 2rem;
  padding: 0.4rem;
  cursor: pointer;
  border-radius: 15px;
  color: var(--text-color);
  font-weight: 400;
  border: none;
  background: rgb(250,163,215);
  background: linear-gradient(166deg, rgba(250,163,215,1) 0%, rgba(188,106,162,1) 100%);
  padding: 20px;
  border-radius:16px;

}

.login input[type=submit]:hover{
opacity: 0.8;
}

.login input[type=submit]:active{
opacity: 0.6;
}

.login input[type=text]:focus{
outline: none;
border: 3px solid rgba(255,255,255,0.9);
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: groove;
}

.login input[type=password]:focus{
outline: none;
border: 1px solid rgba(255,255,255,0.9);
}

.login input[type=button]:focus{
outline: none;
}

::-webkit-input-placeholder{
 color: rgba(255,255,255,0.6);
}

::-moz-input-placeholder{
 color: rgba(255,255,255,0.6);
}