.nav {
  box-shadow: rgb(0 0 0 / 40%) 0px 0px 10px 0px;
  padding: 14.735px 26.5px;
}

img {
  height: 61.25px;
  width: 152.25px;
}

.container {
  background-image: url("../pictures/background-connection.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.title {
  display: flex;
  justify-content: center;
}

h1 {
  color: #fff;
  font-size: 59px;
  font-family: 'DIN Bold';
  margin: 40px 0;
  text-align: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  margin: 10px 0;
  color: #fff;
}

input {
  height: 24px;
  width: 200px;
  padding: 9.6px 16px;
  outline: none;
}

input:focus {
  box-shadow: rgb(0 0 0 / 60%) 0px 0px 5px 1px;
}

button{
    border: none;
    color: #fff;
    background-color: #000;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px;
    padding: 8px 20px;
}

button:hover {
  background-color: #ED1D23;
}

p {
  color: #fff;
  visibility: hidden;
}

#showPassword{
  background-image: url("../pictures/eye-solid.svg");
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: relative;
  left: 200px;
  bottom: -40px;$
}

#showPassword:hover{
  cursor: pointer;
}

@media screen and (max-width: 950px) {
  .container {
    background-image: none;
  }

  h1 {
    color: #ED1D23;
  }

  .label {
    color: #000;
  }

  p {
    color: #ED1D23;
  }
}

@media screen and (max-width: 750px) {
  h1 {
    font-size: 54px;
  }
}

@media screen and (max-width: 700px) {
  h1 {
    font-size: 49px;
  }
}

@media screen and (max-width: 650px) {
  h1 {
    font-size: 44px;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 39px;
  }
}