/* #003f5c, #58508d, #bc5090, #ff6361, #ffa600 */

:root {
  --color-background: #111111;
  --color-content-back: #222222;
  
  --col-a: #003f5c;
  --col-b: #58508d;
  --col-c: #bc5090;
  --col-d: #ff6361;
  --col-e: #ffa600;
}

body {
  background-color: var(--color-background);
  background-image: url(../bgs/stardust.png);
/*   background-size: cover; */
  color: #eeeeee;
  font-family: monospace;
  font-size: 24px;
  display: flex;
  justify-content: center;
/*   transform: skew(1deg, 1deg); */
}

.section {
  background-color: rgba( from var(--color-content-back) r g b / 0.5);
  /*width: 70%;*/
/*   opacity: 30%; */
  padding: 16px;
  margin: 16px;
  border-radius: 16px;
  backdrop-filter: blur(5px);
  
}

.container {
  width:70%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

@keyframes spin {
      0% {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

h1, h2, h3, h4, h5, h6 {
  color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 0 var(--color-background));
  margin-block: 16px;
}
h1 {
  background-image: linear-gradient(to bottom right, var(--col-a), var(--col-b));
}
h2 {
  background-image: linear-gradient(to bottom right, var(--col-b), var(--col-c));
}

    
.la {
  color: var(--col-b);
  text-shadow: 0 0 8px var(--col-b);
}
.lb {
  color: var(--col-c);
  text-shadow: 0 0 8px var(--col-c);
}
.lc {
  color: var(--col-d);
  text-shadow: 0 0 8px var(--col-d);
}
.ld {
  color: var(--col-e);
  text-shadow: 0 0 8px var(--col-e);
}

.title {
  text-align: center;
/*   background: linear-gradient(to right, #ff00ff, #ff0000); */
/*   background-clip: text; */
/*   -webkit-text-fill-color: transparent; */
/*   text-shadow: 0 0 8px #787878; */
/*   animation: spin 2000ms linear infinite; */
/*   animation: 5s linear 0s infinite normal none running spin; */
  
}