@font-face {
    font-family: roboto;
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}


@font-face {
    font-family: roboto-b;
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

:root {
    --site-color-01: #c13587;
    --site-color-01-hover: #ce4b97;
    --menu-count: 5;
}

* {box-sizing: border-box;}

html {
    font-size: 62,5%;
}

body {
    background-color: #eee;
}

.login {
    width: auto;
    height: 95vh;
    margin: auto;
}

.wrapper {
    width: 45vh;
    margin: auto;
    padding: 15% 0;
}

.form {
    width: 90%;
    border: 3px solid #48679d;
    margin: auto;
    font-family: roboto, georgia;
    background-color: #dce3ef;
}

.form input[type=text], .form input[type=password] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 10px 0;
    border: 1px solid #ccc;
    background: #f1f1f1;
    border-radius: 8px;
}

.form input[type=text]:focus, .form input[type=password]:focus {
  background-color: #fff;
  outline: none;
}

.form .btn {
  background-color: var(--site-color-01);
  color: #fff;
  text-shadow: 1px 1px 4px #000000;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 90%;
  margin:5%;
  opacity: 0.8;
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
  font-family: roboto-b, georgia;
  border-radius: 8px;
}

.form .btn:hover {
  opacity: 1;
}

.form label {
    font-size: 1.3rem;
    color: #444;
    padding: 5%;
}