/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}

body {
  background-color: #ffcb00;
  height:100dvh;
  width:100%;
  max-height:100dvh;
  max-width:100%;
  font-family: "Gabarito", sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
      --size: 30px;
    --color-1: red;
    --color-2: blue;
    background: conic-gradient(#ffcb00 90deg, #ff9700 90deg 180deg, #ffcb00 180deg 270deg, #ff9700 270deg);
    background-repeat: repeat;
    background-size: 240px 240px;
    background-position: top left;
      animation-name: MOVE-BG;
  animation-duration: 100s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow:hidden;
}

@keyframes MOVE-BG {
   from {
     background-position: 0% 0%;
   }
   to { 
      background-position: 100% -100%;
   }
}

h1 {
  color:#00f;
  font-size:4rem;
  font-weight:900;
  background-color:white;
  padding: 5px 20px;
  width:fit-content;
  max-width:calc(100vw - 60px);
  margin:0px;
  text-wrap: wrap;
  text-align:center;
}

@media (max-width: 600px) {
  h1 {
    font-size:2rem;
  }
}