html {
  cursor: url(pics/cursi.png), auto;
}

.variete-bernoise {
  background-image: url(pics/background.gif);
  background-size: contain;
  background-repeat: no-repeat;
  object-fit: cover;
}

.details img {
  object-fit: contain;
  width: 100%;
  height: auto;
}

.details {
  display: grid;
  grid-template-columns: 0.6fr;
  justify-content: center;
}

.variete {
  animation: rotate-v .5s ease infinite alternate;
}

.bernoise {
  animation: rotate-b .20s ease infinite alternate;
}

.summ {
  animation: scale 1s ease infinite alternate;
  font-size: 30px;
  margin: -60px 2px;
  font-family: Helvetica;
  color: purple;
  text-decoration:  underline overline wavy #02ffd9;
}

.glow-o {
  animation: pulse-o 2s infinite alternate;
}
.glow-b {
  animation: pulse-b 2s infinite alternate;
}
.glow-p {
  animation: pulse-p 2s ease infinite alternate;
}

@keyframes rotate-v {
  from { transform: rotate(-15deg); }
  to { transform: rotate(10deg); }
}

@keyframes rotate-b {
  from { transform: rotate(-5deg); }
  to { transform:   rotate(5deg); }
}

@keyframes scale {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.2); }
}

@keyframes pulse-o {
  0% {
    filter: drop-shadow(10px 10px 10px rgba(255, 178, 102));
  }
  100% {
    filter: drop-shadow(30px 30px 30px rgba(255, 178, 102));
  }
}

@keyframes pulse-b {
  0% {
    filter: drop-shadow(10px 10px 10px rgba(0, 255, 255));
  }
  100% {
    filter: drop-shadow(30px 30px 30px rgba(0, 255, 255));
  }
}

@keyframes pulse-p {
  0% {
    filter: drop-shadow(10px 10px 10px rgba(255, 102, 255));
  }
  100% {
    filter: drop-shadow(30px 30px 30px rgba(255, 102, 255));
  }
}

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


.title img {
  width: 5vw;
  height: 5vw;
}

.title {
  margin: 5vw 25vw;
}

.bee {
    /* background-color: yellow; */
    postion: relative;
}

.thierry, .summ {
  display: inline-block;
}

.thierry img{
  width: 20vw;
  height: auto;
  cursor: url(pics/hands.png), auto;
}

#tbee {
    z-index: 1000;
    position: fixed;
    left: 6vw;
    top: 55vh;
}

.summ {
  width: 15vw;
  height: auto;
  /* background-color: red; */
  top: 0;
  position: absolute;
}

.flowers img {
  width: 30vw;
  height: 30vw;
  margin: 0 -3vw;
}


.flowers img:hover {
  animation: spin 4s infinite alternate;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.flowers {
  padding: 5vw;
  display: flex;
  justify-content: center;
}

.thanks {
  margin: 15vw 0 0 0;
}

.faq summary {
  background-color: #FFC0CB;
  padding: 10px;
  font-size: 2vmax;
  font-weight: bold;
  color: #9400D3;
}

.program summary {
  background-color: #06e6e9;
  padding: 10px;
  font-size: 2vmax;
  font-weight: bold;
  color: #096d6e;
}

summary ~ * {
  font-size: 2vmax;
}

.faq summary ~ * {
  color: #9400D3;
}

.program summary ~ * {
  color: #096d6e;
}

.blink-me2 {
  text-decoration: underline overline wavy blue;
  font-size: 35px;
  color: #aa42f4;
  animation: blink 0.5s steps(2, start) infinite;
  -webkit-animation: blink 0.5s steps(2, start) infinite;
}

.style{
  text-decoration: underline overline wavy #aa42f4;
  font-size: 35px;
  color: #06e6e9;
}

.email {
  font-size: 30px;
}


.blink-me1 {
  text-decoration: underline overline wavy #aa42f4;
  font-size: 35px;
  color: #06e6e9;
  animation: blink 0.5s steps(2, start) infinite;
  -webkit-animation: blink 0.5s steps(2, start) infinite;
}


@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}

@media only screen and (max-width: 600px) {
  .details {
    grid-template-columns: 1fr;
  }

  summary {
    font-size: 3vmax;
  }

  summary ~ * {
    font-size: 3vmax;
  }

  summary ~ img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

}