/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;700&family=Roboto+Serif:opsz,wght@8..144,100;8..144,300;8..144,400;8..144,500;8..144,700&family=Roboto:wght@100;300;400;500;700&display=swap'); */
@font-face {
  font-family: 'Roboto Serif';
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-optical-sizing: auto;
  src: url('/assets/fonts/RobotoSerif/RobotoSerif-VariableFont_GRAD,opsz,wdth,wght.ttf')
    format("truetype-variations");
}
@font-face {
  font-family: 'Roboto Mono';
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  src: url('/assets/fonts/RobotoMono/RobotoMono-VariableFont_wght.ttf')
    format("truetype-variations");
}
@font-face {
  font-family: 'Roboto Flex';
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 20deg;
  font-optical-sizing: auto;
  src: url('/assets/fonts/RobotoFlex/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf')
    format("truetype-variations");
}
@font-face {
  font-family: 'Dosis';
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  src: url('/assets/fonts/Dosis/Dosis-VariableFont_wght.ttf')
    format("truetype-variations");
}

:root {
  --asar-blue:    rgba(010, 010, 250, 1.0);
  --asar-sblue:   1px 1px 1px rgba(100, 200, 250, 0.9);
  --asar-purple:  rgba(140, 068, 173, 1.0);
  --asar-spurple: 1px 1px 1px rgba(250, 150, 250, 0.9);
  --asar-red:     rgba(250, 050 ,050, 1.0);
  --asar-sred:    1px 1px 1px rgba(250, 050 ,050, 0.9);
  --asar-section-border:  1px solid rgba(050, 050 ,250, 0.7);
  --asar-section-backgnd: rgba(000, 000 ,000, 0.3);

  --menu-color: rgba(0, 0, 0, 1);
  --menu-background: rgba(0, 0, 0, 1);
  --menu-bottom-border: 2px solid var(--asar-purple);
  --menu-outline: -1px 00px var(--secondary),
                  00px 01px var(--secondary),
                  01px 00px var(--secondary),
                  00px -1px var(--secondary);
  --outline:  -1px 00px black,
              00px 01px black,
              01px 00px black,
              00px -1px black;

  /* --font-family-sans-serif: var(--font-family-variable); */
  /* --font-family-monospace: var(--font-family-monospace); */
  /* --font-family-logo:    'Dosis', var(--font-family-sans-serif); */
  --font-family-h1-h6:   'Dosis';
  --font-family-static:  'Roboto';
  --font-family-variable:'Roboto Flex';
  --font-family-variable-monospace: 'Roboto Mono';

  --font-size: 1.15rem;
  --font-weight: 400;
  --line-height: 1.5;
  --text-align: left;

  --intro-shadow: -1px 0px 2px rgba(255, 255, 255, 0.4),
                   1px 0px 2px rgba(255, 255, 255, 0.4),
                  0px -1px 2px rgba(255, 255, 255, 0.4),
                   0px 1px 2px rgba(255, 255, 255, 0.4),
                  -2px 0px 4px rgba(0, 0, 0, 0.25),
                   2px 0px 4px rgba(0, 0, 0, 0.25),
                  0px -2px 4px rgba(0, 0, 0, 0.25),
                   0px 2px 4px rgba(0, 0, 0, 0.25);

  --asar-body-bg: url("/assets/img/asar-icon3.png");
  --asar-bg-color: rgba(0, 0, 0, 1);
  --bg-blur: blur(.5px);
  --bg-opacity: opacity(0.3);
  --asar-bg-filter: var(--bg-blur) var(--bg-opacity);
  --gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));

  --border-radius: 0.25rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 2rem;
  --border-radius-pill: 50rem;

  --typed-underline:  rgba(255, 50, 50, .7);

  --section-bg-color: rgba(0, 0, 0, 0.7);
  --section-border-color: 1px solid var(--asar-purple);
  --section-title-color:  var(--asar-red);
}

*, Body {
  font-family: var(--font-family-static);
}

@supports (font-variation-settings: "wdth" 115) {
  *, Body {
    font-family: var(--font-family-variable);
  }
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.jw {
  -webkit-animation:jw 5s ease-in-out infinite alternate;
  -moz-animation:   jw 5s ease-in-out infinite alternate;
  animation:        jw 5s ease-in-out infinite alternate;
}

@-webkit-keyframes jw {
  from {
    color: var(--asar-purple);
    text-shadow:
                  -1px 00px black,
                  00px 01px black,
                  01px 00px black,
                  00px -1px black,
                  -2px 00px var(--asar-spurple),
                  00px 02px var(--asar-spurple),
                  02px 00px var(--asar-spurple),
                  00px -2px var(--asar-spurple),
                  -4px 0px 6px rgba(0, 0, 0, 0.5),
                   4px 0px 6px rgba(0, 0, 0, 0.5),
                  0px -4px 6px rgba(0, 0, 0, 0.5),
                   0px 4px 6px rgba(0, 0, 0, 0.5);
    transform: scale3d(1.25, 1.25, 1.5);
  }
  to {
    color: var(--asar-spurple);
    text-shadow:  -1px 00px black,
                  00px 01px black,
                  01px 00px black,
                  00px -1px black,
                  -2px 00px var(--asar-purple),
                  00px 02px var(--asar-purple),
                  02px 00px var(--asar-purple),
                  00px -2px var(--asar-purple),
                  -4px 0px 6px rgba(0, 0, 0, 0.5),
                   4px 0px 6px rgba(0, 0, 0, 0.5),
                  0px -4px 6px rgba(0, 0, 0, 0.5),
                   0px 4px 6px rgba(0, 0, 0, 0.5);
    transform: scale3d(1, 1, 1);
  }
}

.ft {
  -webkit-animation:ft 5s ease-in-out infinite alternate;
  -moz-animation:   ft 5s ease-in-out infinite alternate;
  animation:        ft 5s ease-in-out infinite alternate;
}

@-webkit-keyframes ft {
  from {
    color: var(--asar-spurple);
    text-shadow:  -1px 00px black,
                  00px 01px black,
                  01px 00px black,
                  00px -1px black,
                  -2px 00px var(--asar-purple),
                  00px 02px var(--asar-purple),
                  02px 00px var(--asar-purple),
                  00px -2px var(--asar-purple),
                  -4px 0px 6px rgba(0, 0, 0, 0.5),
                   4px 0px 6px rgba(0, 0, 0, 0.5),
                  0px -4px 6px rgba(0, 0, 0, 0.5),
                   0px 4px 6px rgba(0, 0, 0, 0.5);
    transform: scale3d(1, 1, 1);
  }
  to {
    color: var(--asar-purple);
    text-shadow:  -1px 00px black,
                  00px 01px black,
                  01px 00px black,
                  00px -1px black,
                  -2px 00px var(--asar-spurple),
                  00px 02px var(--asar-spurple),
                  02px 00px var(--asar-spurple),
                  00px -2px var(--asar-spurple),
                  -4px 0px 6px rgba(0, 0, 0, 0.5),
                   4px 0px 6px rgba(0, 0, 0, 0.5),
                  0px -4px 6px rgba(0, 0, 0, 0.5),
                   0px 4px 6px rgba(0, 0, 0, 0.5);
    transform: scale3d(1.25, 1.25, 1.5);
  }
}

body::before {
  content: "";
  position: fixed;
  transition: background-image 0.5s ease-in-out;
  background-image: url("/assets/img/asar-icon3.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: black;
  background-size: contain;
  filter: var(--asar-bg-filter);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
}
body {
  position: relative;
  color: whitesmoke!important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.smoke-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
}
.smoke1, .smoke2, .smoke3 {
  filter: blur(5px);
  transform-origin: 50% 50%;
  width: 90vw;
  height: 90vh;
}
.smoke1 { animation: smoke1 3s linear infinite; animation-delay: 0.5s; }
.smoke2 { animation: smoke2 3s linear infinite; animation-delay: 1.5s; }
.smoke3 { animation: smoke3 4s linear infinite; animation-delay: 2.5s; width: 500px; }

@keyframes smoke1 {
  0%   { filter: blur(0px); opacity: 0.0; transform: translateY(  0px) scale(-1, 1.00); }
  25%  { filter: blur(3px); opacity: 0.5; transform: translateY(-10px) scale(-1, 1.05); }
  50%  { filter: blur(5px); opacity: 1.0; transform: translateY(-20px) scale(-1, 1.10); }
  75%  { filter: blur(5px); opacity: 0.5; transform: translateY(-30px) scale(-1, 1.15); }
  100% { filter: blur(7px); opacity: 0.0; transform: translateY(-40px) scale(-1, 1.20); }
}
@keyframes smoke2 {
  0%   { filter: blur(0px); opacity: 0.0; transform: translateY(  0px) scale(1.00); }
  25%  { filter: blur(3px); opacity: 0.5; transform: translateY(-10px) scale(1.05); }
  50%  { filter: blur(5px); opacity: 1.0; transform: translateY(-20px) scale(1.10); }
  75%  { filter: blur(5px); opacity: 0.5; transform: translateY(-30px) scale(1.15); }
  100% { filter: blur(7px); opacity: 0.0; transform: translateY(-40px) scale(1.20); }
}
@keyframes smoke3 {
  0%   { filter: blur(0px); opacity: 0.0; transform: translateY(  0px) scale(1.00); }
  25%  { filter: blur(3px); opacity: 0.5; transform: translateY(-20px) scale(1.05); }
  50%  { filter: blur(5px); opacity: 1.0; transform: translateY(-40px) scale(1.10); }
  75%  { filter: blur(5px); opacity: 0.5; transform: translateY(-60px) scale(1.15); }
  100% { filter: blur(7px); opacity: 0.0; transform: translateY(-80px) scale(1.20); }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-variable-monospace);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#mypreloader * {
  transition: ease-in-out 0.25s;
}
#mypreloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  border: 3px solid #fff;
  border-color: var(--asar-red) transparent var(--asar-red) transparent;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: animate-preloader 0.5s linear infinite;
  animation: zeroin-preloader  1s forwards;
  z-index: 1000001
}
#mypreloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: black;
  transition: all 0.25s ease-in-out;
}
#mypreloader:after {
  content: "";
  position: fixed;
  background: black url("/assets/img/asar-icon3.png") center center  no-repeat;
  background-size: 200px 200px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  bottom: calc(50% - 100px);
  right: calc(50% - 100px);
  filter: blur(30px) opacity(0)
  z-index: 999998;
}
@keyframes animate-preloader {
  0%   { transform: rotate(  0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes zeroin-preloader {
  0%   { top: calc(47% - 15px); left: calc(55% - 15px); }
  25%  { top: calc(54% - 15px); left: calc(46% - 15px); }
  75%  { top: calc(50% - 15px); left: calc(52% - 15px); }
  100% { top: calc(50% - 15px); left: calc(50% - 15px); }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
/* @media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0s!important;
  }
} */

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: ease-in-out 1s;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 997;
}
#header * {
  transition: ease-in-out 1s;
}
#header h1 {
  font-size: 48px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  text-shadow: var(--intro-shadow);
}
#header h1 a {
  color: var(--asar-purple);
  display: inline-block;
  font-family: var(--font-family-logo);
}
#header h1 a:hover {
  color: var(--asar-spurple);
  display: inline-block;
}
#header h1 a > span {
  color: var(--asar-spurple);
  line-height: 1;
  display: inline-block;
  font-family: var(--font-family-logo);
}
#header h1 a > span:hover {
  color: var(--asar-purple);
  line-height: 1;
  display: inline-block;
}
#header h2 {
  font-size: 24px;
  margin-top: 20px;
}
#header h2 span {
  color: var(--primary);
  text-shadow: var(--outline);
  border-bottom: 3px solid var(--asar-purple);
  padding-bottom: 4px;
  font-size: xx-large;
}
#header .social-links {
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  justify-content: center;
}
#header .social-linksA {
  animation: socialFlip 2s linear infinite;
  animation-delay: 0.25s;
}
#header .social-linksB {
  animation: socialFlip 3s linear infinite;
  animation-delay: 0.5s;
}
#header .social-linksC {
  animation: socialFlip 3s linear infinite;
  animation-delay: 1.25s;
}
#header .social-linksD {
  animation: socialFlip 4s linear infinite;
  animation-delay: 1.5s;
}
#header .social-links a {
  display: block;
  color: var(--asar-purple);
  color: black;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  text-decoration: none;
  animation-delay: 0.5s;
}
#header .social-links a .fa-2x {
  color: var(--asar-purple);
}
@keyframes socialFlip {
  0%   { transform: perspective(400px) rotateY( 0deg); }
  25%  { transform: perspective(400px) rotateY(90deg); }
  25%  { transform: perspective(400px) rotateY(180deg); }
  75%  { transform: perspective(400px) rotateY(270deg); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
#header .social-links a:hover {
  background: rgb(8, 177, 199);
}
#header h1 {
  font-size: 36px;
}
#header h2 {
  font-size: 20px;
  line-height: 30px;
}
#header h2 span {
  font-size: 22px;
  line-height: 30px;
}
#header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--section-bg-color);
  padding: 15px;
  border-radius: 25px;
}

/*----------------------------------
# Navigation Menu
------------------------------------*/
/* Desktop Navigation */
.nav-menu {
  margin-top: 35px;
}
.nav-menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu .home-nav {
  margin-right: 15px;
}
.nav-menu li + li {
  margin-left: 10px;
  margin-right: 10px;
}
.nav-menu a {
  display: block;
  position: relative;
  color: var(--asar-red);
  font-size: 18px;
  font-family: var(--font-family-variable-monospace);
  font-weight: 500;
  text-decoration: none;
}
@media (max-width: 576px) {
  .nav-menu a {
    font-size: 16px;
  }
  .nav-menu li + li {
    margin-left: 6px;
    margin-right: 6px;
  }
  .nav-menu .home-nav {
      margin-right: 6px;
  }
}
.nav-menu a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -1px;
  left: 0;
  background-color: var(--asar-purple);
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before {
  visibility: visible;
  width: 100%;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #fff;
  text-decoration: none;
  text-shadow: none;
}

/*--------------------------------------------------------------
#  top-icons
--------------------------------------------------------------*/
#top {
  z-index: 100001;
  opacity: 60%;
  position: fixed;
  top: 5px;
  font-size: 14px;
}
@media (max-width: 575px) {
  #top { display: none }
}
#top div {
  position: fixed;
  transition: 0.2s;
}
#top div:first-child {
  left: 8px;
  text-align: start;
}
#top div:last-child {
  right: 8px;
  text-align: end;
}
#top a {
  color: var(--asar-purple);
}
#top a:hover {
  color: var(--asar-red);
}

/*--------------------------------------------------------------
#  header-top
--------------------------------------------------------------*/
#header.header-top {
  height: 41px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background: var(--menu-background);
  border-bottom: var(--menu-bottom-border);
  transition: ease-in-out 1.5s;
}
#header.header-top .social-links, #header.header-top h2 {
  display: none;
}
#header.header-top h1 {
  margin-right: auto;
  font-size: 36px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0!important;
}
#header.header-top .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0!important;
  border: none!important;
}
#header.header-top #headerLogo {
  display: inline!important;
  position: absolute!important;
  width: 81px;
  top: 0px;
  margin-left: -40px;
}
#header.header-top .nav-menu {
  margin: 0;
}
#header.header-top .nav-menu .home-nav {
  display: block!important;
}
@media (max-width: 768px) {
  #header.header-top h1 {
    font-size: 26px;
  }
}

/*---------------------------------------
# Sections General
------------------------------------------*/
section {
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 140px;
  transition: ease-out .75s;
  bottom: 100%;
  opacity: 0;
}
section.section-show {
  top: 40px;
  bottom: auto;
  opacity: 1;
  padding-bottom: 45px;
  transition: ease-in-out 1.10s;
}
.section-show > .container {
  background: var(--section-bg-color);
  padding: 30px;
  border-radius: 0 0 20px 20px;
  border: var(--section-border-color);
}

@media (max-width: 768px) {
  section {
    top: 120px;
  }
}
.section-title h2, .section-title h3 {
  margin: 0 0 30px 0;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--section-title-color);
  text-align: center;
}
.section-title h2::before {
  content: "";
  width: 2em;
  height: 2px;
  display: none;
  border: var(--section-border-color);
  margin: 1% 2%;
}
.section-title h2::after {
  content: "";
  width: 2em;
  height: 2px;
  display: none;
  border: var(--section-border-color);
  margin: 1% 2%;
}
.section-title p {
  margin: 0;
  margin: -15px 0 15px 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
@media (min-width: 670px) {
  .section-title h2::before {
    display: inline-block;
  }
  .section-title h2::after {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-me .container {
  font-weight: 700;
  font-size: 26px;
  color: rgb(8, 177, 199);
  text-shadow: none;
}
.about-me h3, .about-me h5 {
  font-weight: 300;
  font-size: 20px;
  font-family: var(--font-family-variable);
}
.about-me h3 {
  font-weight: 500;
  font-size: 22px;
  color: var(--asar-purple);
}
.about-me .content ul {
  list-style: none;
  padding: 0;
}
.about-me .content ul i {
  font-size: 20px;
  padding-right: 2px;
  color: rgb(8, 177, 199);
}
.about-me .content p:last-child {
  margin-bottom: 5px;
}
.about-me .content p:last-child i {
  color: var(--asar-red);
  margin-top: 3px;
}

/*--------------------------------------------------------------
# Resume
--------------------------------------------------------------*/
.resume .resume-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #fff;
}
.resume .resume-item {
  padding: 0 0 20px 10px;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-right: 10px;
  border-left: var(--asar-section-border);
  position: relative;
}
.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.resume .resume-item h5 {
  font-size: 16px;
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}
.resume .resume-item ul {
  padding-left: 20px;
}
.resume .resume-item ul li {
  padding-bottom: 10px;
}
.resume .resume-item:last-child {
  padding-bottom: 0;
}
.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: var(--asar-blue);
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 20px;
  width: 100%;
  text-align: center;
}
.contact .info-box > i {
  font-size: 24px;
  border-radius: 50%;
  padding: 14px;
  float: left;
}
.contact .info-box h3 {
  font-size: 16px;
  color: var(--asar-purple);
  font-weight: 700;
  margin-bottom: 0px!important;
}
.contact .info-box h3 > span {
  color: var(--asar-red);
}
.contact .info-box span > span {
  color: var(--asar-purple);
}
.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin: 0 0 0 68px;
}
.contact .info-box .social-links {
  font-size: 20px;
  font-weight: 700;
}
.contact .info-box .social-links a {
  font-size: 18px;
  display: inline-block;
  line-height: 1;
  margin-left: 8px;
  margin-right: 8px;
  transition: 0.3s;
}
.contact .php-email-form {
  padding: 30px;
}
.contact .php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}
.contact .php-email-form .error-message {
  display: none;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}
.contact .php-email-form .sent-message {
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.contact .php-email-form .loading {
  display: none;
  text-align: center;
  padding: 15px;
}
.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid rgb(8, 177, 199);
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
  border: 0;
  transition: 0.3s;
}
.contact .php-email-form button[type="submit"] {
  padding: 10px 30px;
  transition: 0.5s;
}
.contact .php-email-form button[type="submit"]:hover {
  background: var(--asar-red);
}
@-webkit-keyframes animate-loading {
    0% { transform: rotate(  0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes animate-loading {
    0% { transform: rotate(  0deg); }
  100% { transform: rotate(360deg); }
}

/*--------------------------------------------------------------
#  bottom-icons
--------------------------------------------------------------*/
#bottom {
  z-index: 100001;
  opacity: 60%;
  position: fixed;
  top: 55px;
  font-size: 14px;
}
@media (max-width: 575px) {
  #bottom { display: none }
}
#bottom div {
  position: fixed;
  transition: 0.2s;
}
#bottom div:first-child {
  left: 8px;
  text-align: start;
}
#bottom div:last-child {
  right: 8px;
  text-align: end;
}
#bottom a {
  color: var(--asar-purple);
}
#bottom a:hover {
  color: var(--asar-red);
}

/*--------------------------------------------------------------
# Credits
--------------------------------------------------------------*/
footer {
  opacity: 60%;
}
footer div:first-child {
  left: 10px;
  text-align: start;
}
footer div:last-child {
  right: 8px;
  text-align: end;
}
footer .credits {
  position: fixed;
  bottom: 5px;
  font-size: 8px;
}
footer .credits a {
  color: var(--asar-purple);
  transition: 0.3s;
}
footer .credits a:hover {
  color: var(--asar-red);
}