body {
  background-color: rgb(93, 37, 153);
  font-weight: bold;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  --blaudunkel: rgb(86, 172, 222);
  --verddunkel: rgb(69, 172, 108);
}
.centratitol {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  height: auto;
}

.centerlogo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  top: 40%;
  left: 15vw;
}
.logogran {
  width: 40vw;
  transition: all 500ms ease;
}
.blau {
  color: var(--blaudunkel);
}
.verd {
  color: var(--verddunkel);
}

.iconacontacte {
  width: 6vw;
}
#contactes {
  width: 30vw;
  position: absolute;
  bottom: 2vh;
  right: 2vw;
}
.logogran:hover {
  width: 60vw;
}
.bigicon {
  width: 15vw;
}
#contactesgran {
  width: 70vw;
  position: absolute;
  top: 30vh;
  left: 15vw;
}
#form {
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 5%;
  bottom: 10%;
}
#formulari {
  display: flex;
  flex-direction: column;
  color: darkgray;
}
#massapetit {
  display: none;
}
#mimotogrande {
  position: absolute;
  width: 60vw;
  top: 20vh;
  left: 20vw;
}
#fondoenagas {
  position: relative;
  left: -50%;
  opacity: 20%;
}
#logosol {
  position: absolute;
  top: 10%;
  left: 20vw;
  width: 60vw;
}

/* Pantalla 550px*/
@media only screen and (max-width: 550px) {
  .titolimg {
    height: 60px;
  }

  .blau,
  .verd {
    font-size: 10px;
  }

  #formimg {
    display: none;
  }

  /* Pantalla minúscula*/
  @media only screen and (max-width: 300px) {
    body {
      background-color: red;
      color: yellow;
      position: absolute;
      top: 40%;
    }
    .centratitol,
    .centerlogo,
    #form,
    #contactes,
    #contactesgran,
    #mimotogrande,
    #logosol {
      display: none;
    }
    #massapetit {
      display: block;
    }
  }
}