@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
:root{
  /* Colores de la marca Microsoft Copilot */
  --azul: #1b88d8;
  --azul-marino: #0cafe1;
  --verde: #3ecfa6;
  --cyan: #16bbc1;
  --azul-oscuro: #1c57db;
}

body{
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: var(--azul-marino);
  margin: 20px;
}


h1 {
  background-color: #3ecfa6;
  color: var(--azul-marino);
  padding: 20px;
}

p.intro{
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
  background-color: #16bbc1;
  padding: 10px;
}

p.intro:hover{
 animation-name: text-transform;
 animation-duration: 500ms;
 animation-iteration-count: 1;
}

@keyframes text-transform{
  from {
    background-color: #16bbc1;
    padding: 10px;
    transform: scale(1);
  }

  to {
    background-color: #c116a7;
    padding: 10px;
    transform: scale(1.5);
  }
}

.logo {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    transform: translateX(100px) rotate(135deg) scale(2);
    animation-duration: 500ms;
    animation-name: slide-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.logo img {
    width: 130px;
}

@keyframes slide-in {
  from {
    translate: 20vw 0;
    
  }

  to {
    translate: -80vw 0;
    
  }
}