body {
  max-width: 100vw;
}
#app{
  max-width:1280px;
  margin:0 auto;
  text-align:center
}
.logo{
  height: 2em;
  padding:0.1em;
  will-change:filter;
  animation: shade;
  animation-duration:0s;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
  transition:all .3s ease-in;
  filter: none;
}
@media screen and (max-width: 700px) {
  .logo {
    height: 1em;
  }
}
@media screen and (max-width: 1050px) {
  .logo {
    height: 1.5em;
  }
}
.logo:hover{
  transform:scale(1.1);
  animation-duration:1.3s;
  transition:all.3s ease-out
}
@keyframes shade{
  0%{
      filter:drop-shadow(0 0 2em #646cffAA)
  }
  50%{
      filter:drop-shadow(0 0 2em #61dafbAA)
  }
  100%{
      filter:drop-shadow(0 0 2em #78ffe7AA)
  }
}
.card{
  padding:0.5em
}
.read-the-docs{
  color:#fff
}
:root{
  font-family:Inter,Avenir,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:24px;
  font-weight:400;
  color-scheme:light dark;
  color:rgba(255,255,255,0.87);
  background-color:#242424;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%
}
a{
  font-weight:500;
  color:#646cff;
  text-decoration:inherit
}
a:hover{
  color:#535bf2
}
body{
  margin:0;
  display:flex;
  place-items:center;
  min-width:320px;
  min-height:100vh
}
h1{
  font-size:3.2em;
  line-height:1.1
}
@media(prefers-color-scheme:light){
  :root{
      color:#213547;
      background-color:#fff
  }
  a{
      color: #0c1b73;
      transition:color 0.3s
  }
  a:hover{
      color:#1126a1;
      transition:color 0.3s
  }
  .logo{
      fill:#111
  }
  .read-the-docs{
      color:#222
  }
}