body {
  margin:0;
  height: 100vh;
  display: flex;  
  justify-content: space-between;             
  align-items: center;
  flex-direction: row;
  background-image: url("../img/fondo.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  padding:20px;
  box-sizing: border-box;
  color:white;
}
.left-container{
  display: flex;
  flex-direction:column;
  align-items:center;
  margin-left:25%;
}

.logo{
  text-align:left;
  margin-bottom:10px;
}

.logo img{
  max-height:200px;
}

.container{
  text-align:left;
}


.grid.container {
  display:flex;
  justify-content:flex-end;
  align-items: center;
}

.grid {
  width: 606px;
  height: 606px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  flex-wrap: nowrap;

}

.square {
  display:flex;
  justify-content: center; 
  align-items: center;  
  height: 200px;
  width: 200px;
  border: solid rgb(255, 255, 255) 1px;
  box-sizing:border-box;
}

.mole {
  background-image: url("../img/starwars.png");
  background-size: 190px;
  background-repeat: no-repeat;
  background-position: center;
}
#acces {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); 
  
}

#acces h3 {
  margin-top:0;
}

#acces input[type="contrasenya"]{
  padding:10px;
  margin-bottom:10px;
  width:calc(100% - 22px);
  box-sizing:border-box;
  border: 1px solid #ccc;
  border-radius:3px;
  color:black;
}

#acces button{
  padding:10px 20px;
  cursor:pointer;
  background-color: #5cb85c;
  color: white;
  border:none;
  border-radius: 5px;
}

#acces-error{
  color: red;
  margin-top:10px;
}