@font-face {
  font-family: "allerregular";
  src: url(font/AllerDisplay.ttf) format("truetype");
}

@font-face {
  font-family: "Montserrat";
  src: url(font/Montserrat/static/Montserrat-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Montserrat bold";
  src: url(font/Montserrat/static/Montserrat-Bold.ttf) format("truetype");
}

@font-face {
  font-family: "Montserrat semibold";
  src: url(font/Montserrat/static/Montserrat-SemiBold.ttf) format("truetype");
}

:root {
  --color-pink: #f26dd6;
  --color-blue: #4b40e2;
}

.pink {
  color: var(--color-pink);
}

.blue {
  color: var(--color-blue);
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

.navbar {
  height: 70px;
}

.navbar-brand img {
  margin-left: 30px;
  width: 200px;
}

.nav-page li {
  display: inline-block;
  font-weight: 600;
  margin-right: 40px;
}

.navbar .nav-page a:hover {
  color: var(--color-blue) !important;
}

.navbar-toggler {
  border: hidden;
  color: var(--color-blue);
  margin-right: 10px;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}

.navbar-light .navbar-nav .nav-link.active {
  color: var(--color-blue);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(75,64,226)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler .navbar-toggler {
  border-color: rgb(75, 64, 226);
}

.main {
  display: flex;
}

.bgColor {
  background-image: linear-gradient(to top right, #8850dd 20%, #4139d9 100%);
  display: flex;
  flex-direction: column;
  width: 65%;
}

.bgFoto {
  width: 35%;
}

.loginContainer {
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  color: white;
  justify-content: center;
  font-family: "Montserrat bold";
  margin-right: 40px;
  margin-left: 40px;
}

.login {
  background-color: var(--color-blue);
  min-width: 200px;
  max-width: 200px;
  border-radius: 0 0 20px 20px;
  margin-left: 30px;
  padding: 10px 20px;
  color: white;
  font-size: 14px;
  border: 1px solid white;
  border-top: none;
}

.inputField {
  width: 100%;
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 3px;
  margin-bottom: 10px;
  margin-top: 2px;
}

.inputField::placeholder {
  padding-left: 5px;
  font-size: 14px;
  opacity: 0.5;
}

.loginButton {
  background-color: var(--color-pink);
  border: none;
  border-radius: 5px;
  height: 30px;
  width: 100%;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}

.desktopImgContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  flex-grow: 1;
}

.desktopImg {
  width: 60%;
}

@media only screen and (max-width: 768px) {
  .login {
    min-width: 150px;
    max-width: 150px;
  }

  .inputField {
    margin-bottom: 5px;
  }
}