personal-security-checklist/web/src/routes/styles.css

/* THIS FILE IS JUST FOR EXAMPLES, DELETE IT IF YOU DON'T NEED IT */

/* SHELL ---------------------------------------- */
html {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
}

body {
  background: var(--qwik-dark-background);
  color: var(--qwik-dark-text);
  overflow-x: hidden;
}

/* HEADINGS ------------------------------------- */
h1,
h2,
h3 {
  color: white;
  margin: 0;
}

h1 {
  font-size: 3.2rem;
  text-align: center;
}
h1 .highlight,
h3 .highlight {
  color: var(--qwik-light-blue);
}

h2 {
  font-weight: 400;
  font-size: 2.4rem;
}
h2 .highlight {
  font-weight: 700;
}

h3 {
  font-size: 2rem;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 3.4rem;
  }
  h3 {
    font-size: 3rem;
  }
}

/* TAGS ----------------------------------------- */
a {
  text-decoration: none;
  color: var(--qwik-light-blue);
}

code {
  background: rgba(230, 230, 230, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
}

ul {
  margin: 0;
  padding-left: 20px;
}

/* CONTAINER ------------------------------------ */
.container {
  margin: 0 auto;
  padding: 30px 40px;
}
.container.container-purple {
  background: var(--qwik-light-purple);
}
.container.container-dark {
  background: var(--qwik-dark-background);
  color: var(--qwik-dark-text);
}
.container.container-center {
  text-align: center;
}
.container.container-flex {
  /* does nothing on mobile */
}
.container.container-spacing-xl {
  padding: 50px 40px;
}

@media screen and (min-width: 768px) {
  .container {
    padding: 60px 80px;
  }
  .container.container-spacing-xl {
    padding: 100px 60px;
  }
  .container.container-flex {
    display: flex;
    justify-content: center;
    gap: 60px;
  }
}

/* BUTTONS -------------------------------------- */
a.button,
button {
  background: var(--qwik-light-blue);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 15px 20px;
  text-align: center;
}

a.button.button-dark,
button.button-dark {
  background: var(--qwik-dirty-black);
}

a.button.button-small,
button.button-small {
  padding: 15px 25px;
}

@media screen and (min-width: 768px) {
  a.button,
  button {
    font-size: 1rem;
    padding: 23px 35px;
  }
}

/* DESIGN --------------------------------------- */
.ellipsis {
  position: absolute;
  top: 100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    57.58% 57.58% at 48.79% 42.42%,
    rgba(24, 180, 244, 0.5) 0%,
    rgba(46, 55, 114, 0) 63.22%
  );
  transform: rotate(5deg);
  opacity: 0.5;
  z-index: -1;
}
.ellipsis.ellipsis-purple {
  top: 1350px;
  left: -100px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(172, 127, 244, 0.5) 0%,
    rgba(21, 25, 52, 0) 100%
  );
  transform: rotate(-5deg);
}

@media screen and (min-width: 768px) {
  .ellipsis {
    top: -100px;
    left: 350px;
    width: 1400px;
    height: 800px;
  }
  .ellipsis.ellipsis-purple {
    top: 1300px;
    left: -200px;
  }
}

/* used icon pack: https://www.svgrepo.com/collection/phosphor-thin-icons */
.icon:before {
  width: 18px;
  height: 18px;
  content: "";
  display: inline-block;
  margin-right: 20px;
  position: relative;
  top: 2px;
}

.icon-cli:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.499 124.87646a4.00053 4.00053 0 0 1 0 6.24708l-40 32a4.0002 4.0002 0 0 1-4.998-6.24708L113.59668 128 77.501 99.12354a4.0002 4.0002 0 0 1 4.998-6.24708ZM175.99414 156h-40a4 4 0 0 0 0 8h40a4 4 0 1 0 0-8ZM228 56.48535v143.0293A12.49909 12.49909 0 0 1 215.51465 212H40.48535A12.49909 12.49909 0 0 1 28 199.51465V56.48535A12.49909 12.49909 0 0 1 40.48535 44h175.0293A12.49909 12.49909 0 0 1 228 56.48535Zm-8 0A4.49023 4.49023 0 0 0 215.51465 52H40.48535A4.49023 4.49023 0 0 0 36 56.48535v143.0293A4.49023 4.49023 0 0 0 40.48535 204h175.0293A4.49023 4.49023 0 0 0 220 199.51465Z'/%3E%3C/svg%3E");
}

.icon-apps:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M216 44.00586H40a12.01375 12.01375 0 0 0-12 12v144a12.01375 12.01375 0 0 0 12 12H216a12.01375 12.01375 0 0 0 12-12v-144A12.01375 12.01375 0 0 0 216 44.00586Zm4 156a4.00458 4.00458 0 0 1-4 4H40a4.00458 4.00458 0 0 1-4-4v-144a4.00458 4.00458 0 0 1 4-4H216a4.00458 4.00458 0 0 1 4 4Zm-144-116a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 76 84.00586Zm40 0a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 116 84.00586Z'/%3E%3C/svg%3E");
}

.icon-community:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M246.40381 143.19434a4.00061 4.00061 0 0 1-5.60108-.7959A55.57857 55.57857 0 0 0 196 120a4 4 0 0 1 0-8 28 28 0 1 0-27.50732-33.26074 4.00013 4.00013 0 0 1-7.85987-1.49219 36.00191 36.00191 0 1 1 54.06494 37.50513 63.58068 63.58068 0 0 1 32.50147 22.84155A3.99993 3.99993 0 0 1 246.40381 143.19434Zm-57.24268 71.05273a3.9998 3.9998 0 1 1-7.1914 3.50391 60.02582 60.02582 0 0 0-107.93946 0 3.9998 3.9998 0 1 1-7.1914-3.50391 67.56008 67.56008 0 0 1 40.90625-35.20581 44 44 0 1 1 40.50976 0A67.56139 67.56139 0 0 1 189.16113 214.24707ZM128 176a36 36 0 1 0-36-36A36.04061 36.04061 0 0 0 128 176ZM60 112A28 28 0 1 1 87.50732 78.73828a3.99989 3.99989 0 1 0 7.85938-1.49219A36.00177 36.00177 0 1 0 41.30225 114.7522 63.5829 63.5829 0 0 0 8.79883 137.5957a4 4 0 1 0 6.39648 4.80469A55.58072 55.58072 0 0 1 60 120a4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
}