:root {
  --background: #3b2a55;
  --background2: #140f18;
  --background3: #3b2e40;

  --foreground: #937da2;

  --accent: #7441a0;
}

/* CSS OVERRIDES ------------------------------------------ */

html {
  background-image: url(assets/pattern.png);
  animation: scrolling 30s linear 1;
  animation-direction: forward;
  animation-iteration-count: infinite;
  background-color: var(--background) ;
}

body {
  color: var(--foreground);
  font-family: sans-serif;
  font-size: 14.5px;
}

a {
    color: var(--accent);
}

h1, h2, h3, h4, h5, h6 {
  margin: 5px;
}

/* LAYOUT ------------------------------------------ */

.flex {
  display: flex;
}

.box {
  background-color: var(--background2);
  border-radius: 24px;
  padding: 10px;
  margin: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* CONTAINERS ------------------------------------------ */

.c-main {
  width: 15%;
  padding: 5px;

  position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}


/* ELEMENTS ------------------------------------------ */

.c-element {
  margin: 20px;
}

.e-profile {
  width: 100%;
  /* padding: 12px; */
  margin: 10px;
  border: 2px dashed var(--background3);
  border-radius: 15px;
}

.e-profile_icon  {
  width: 28px;
  filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
  margin: 3px;
}

.e-icon  {
  width: 28px;
  filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
  margin: 3px;
}

.e-profile_icon:hover {
  filter: invert(50%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
  transform: scale(1.3);
}


@media only screen and (device-width: 1000px),
only screen and (max-width:1000px) {

.c-main {
  width: 85%;
}

}


@-webkit-keyframes scrolling {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -300px 300px;
    }
}