/* src/styles.scss */
* {
  --background: #0c0c0c;
  --background-secondary: #101014;
  --color: #ffffff;
  --separator-height: 50px;
}
body {
  background-color: var(--background);
  color: var(--color);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}
body {
  background-color: var(--background);
  color: var(--color);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.min-h-100vh {
  min-height: 100vh;
}
.min-h-65vh {
  min-height: 65vh;
}
.min-h-30vh {
  min-height: 30vh;
}
.me-large {
  width: fit-content;
}
.me-large img {
  border-radius: 40vw;
  width: 60vw;
  max-width: 300px;
}
.me-small {
  width: fit-content;
}
.me-small img {
  border-radius: 40vw;
  width: 60vw;
  max-width: 200px;
}
.pill {
  border-radius: 100vw;
}
.custom-button {
  min-width: 105px;
  border: none;
  color: #fff;
  background-image:
    linear-gradient(
      30deg,
      #017715,
      #26a80b);
  border-radius: 20px;
  background-size: 100% auto;
  font-family: inherit;
  font-size: 15px;
  padding: 0.4em 1.3em;
}
.custom-button:hover,
.scroll-to-top-button:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: pulse512 1.5s infinite;
}
.scroll-to-top-button {
  width: 40px;
  height: 40px;
  border: none;
  color: #fff;
  background-image:
    linear-gradient(
      30deg,
      #017715,
      #26a80b);
  border-radius: 20px;
  background-size: 100% auto;
  font-family: inherit;
  font-size: 15px;
}
@keyframes pulse512 {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 218, 69, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(218, 103, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(218, 103, 68, 0);
  }
}
.block {
  width: 100%;
  margin-top: calc(var(--separator-height) * 0.5);
  padding: calc(var(--separator-height) * 1.125) 15% 1px 15%;
  color: var(--color);
}
.block .block-container {
  min-height: 30vh;
}
.block .block-container h2,
.block .block-container h4 {
  margin-bottom: 3%;
  margin-top: 2%;
}
#about-me.block {
  padding: calc(var(--separator-height) * 1.125) 15% 1px 15%;
  padding-bottom: 5% !important;
}
#about-me.block.padding-20 {
  padding: calc(var(--separator-height) * 1.125) 15% 1px 15%;
}
.space-separator {
  margin-bottom: 4%;
}
.bg-primary {
  background: var(--background) !important;
}
.bg-secondary {
  background: var(--background-secondary) !important;
}
.separator {
  width: 100%;
  height: var(--separator-height);
  position: absolute;
  left: 0px;
}
.separator.s1 {
  background:
    linear-gradient(
      to right bottom,
      var(--background) 49%,
      var(--background-secondary) 50%);
}
.separator.s2 {
  background:
    linear-gradient(
      to left bottom,
      var(--background-secondary) 49%,
      var(--background) 50%);
}
.block:first-child .block-container {
  min-height: 65vh;
}
html {
  scroll-behavior: smooth;
}
@media screen and (max-width: 992px) {
  .block {
    padding: calc(var(--separator-height) * 1.125) 10% 1px 10%;
  }
  #about-me.block {
    padding: calc(var(--separator-height) * 1.125) 10% 1px 10%;
  }
  h2 {
    font-size: 40px;
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */