@import "./settings.css";

:root {
  --js-color: #fede43;
  --angular-color: #f3233b;
  --typescript-color: #007cc8;
  --nodejs-color: #3e9f4b;
  --git-color: #ee443b;
  --mongodb-color: #239a3e;
  --docker-color: #2396ed;
}
ul {
  list-style: initial;
  padding-left: initial;
}
h1 {
  font-size: 2rem;
}
h1,
h2 {
  text-align: center;
}
.neon {
  color: var(--Text);
}
.neon.js {
  text-shadow: 0 0 5px var(--js-color), 0 0 10px var(--js-color),
    0 0 20px var(--js-color), 0 0 40px var(--js-color), 0 0 80px var(--js-color),
    0 0 90px var(--js-color), 0 0 100px var(--js-color),
    0 0 150px var(--js-color);
}
.neon.angular {
  text-shadow: 0 0 5px var(--angular-color), 0 0 10px var(--angular-color),
    0 0 20px var(--angular-color), 0 0 40px var(--angular-color),
    0 0 80px var(--angular-color), 0 0 90px var(--angular-color),
    0 0 100px var(--angular-color), 0 0 150px var(--angular-color);
}
.neon.typescript {
  text-shadow: 0 0 5px var(--typescript-color), 0 0 10px var(--typescript-color),
    0 0 20px var(--typescript-color), 0 0 40px var(--typescript-color),
    0 0 80px var(--typescript-color), 0 0 90px var(--typescript-color),
    0 0 100px var(--typescript-color), 0 0 150px var(--typescript-color);
}
.neon.nodejs {
  text-shadow: 0 0 5px var(--nodejs-color), 0 0 10px var(--nodejs-color),
    0 0 20px var(--nodejs-color), 0 0 40px var(--nodejs-color),
    0 0 80px var(--nodejs-color), 0 0 90px var(--nodejs-color),
    0 0 100px var(--nodejs-color), 0 0 150px var(--nodejs-color);
}
.neon.git {
  text-shadow: 0 0 5px var(--git-color), 0 0 10px var(--git-color),
    0 0 20px var(--git-color), 0 0 40px var(--git-color),
    0 0 80px var(--git-color), 0 0 90px var(--git-color),
    0 0 100px var(--git-color), 0 0 150px var(--git-color);
}
.neon.mongodb {
  text-shadow: 0 0 5px var(--mongodb-color), 0 0 10px var(--mongodb-color),
    0 0 20px var(--mongodb-color), 0 0 40px var(--mongodb-color),
    0 0 80px var(--mongodb-color), 0 0 90px var(--mongodb-color),
    0 0 100px var(--mongodb-color), 0 0 150px var(--mongodb-color);
}
.neon.docker {
  text-shadow: 0 0 5px var(--docker-color), 0 0 10px var(--docker-color),
    0 0 20px var(--docker-color), 0 0 40px var(--docker-color),
    0 0 80px var(--docker-color), 0 0 90px var(--docker-color),
    0 0 100px var(--docker-color), 0 0 150px var(--docker-color);
}
main {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
}
summary {
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
}
summary + ol li a {
  color: var(--Text);
  font-weight: 400;
}
summary + ol li a:hover {
  text-decoration: underline;
}
section a {
  color: var(--Text);
  font-weight: 700;
}
section a:hover {
  text-decoration: underline;
}
img {
  width: 100%;
  display: block;
}
pre {
  margin-bottom: 2rem;
}
pre.pre-js::before {
  background-image: url("./../assets/images/javascript.svg");
}
pre.pre-ts::before {
  background-image: url("./../assets/images/typescript-icon.svg");
}
pre.pre-html::before {
  background-image: url("./../assets/images/html-5.svg");
}
pre.pre-css::before {
  background-image: url("./../assets/images/css-3.svg");
}
pre.pre-console::before {
  background-image: url("./../assets/images/terminal.svg");
}
@media screen and (min-width: 768px) {
  img {
    width: 70%;
  }
  main {
    width: 90%;
  }
}
@media screen and (min-width: 1024px) {
  main {
    width: 50%;
  }
}