@import "./less/fontawesome.less";
@import "./less/solid.less";
@import "./less/regular.less";
@import "./less/brands.less";
@import "./all.css"; // ensures FontAwesome works

@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://fonts.googleapis.com/css2?family=Noticia+Text);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap);

/*
  _____ ___  _   _ _____ ____
 |  ___/ _ \| \ | |_   _/ ___|
 | |_ | | | |  \| | | | \___ \
 |  _|| |_| | |\  | | |  ___) |
 |_|   \___/|_| \_| |_| |____/ */


@font-face {
  font-family: Asgalt Regular;
  src: url('../fonts/Asgalt-Regular.ttf');
}

@font-face {
  font-family: Source Sans Pro;
}

@heading: Asgalt Regular;
@subHeading: Asgalt Regular;
@paragraph: Source Sans Pro;
@label: Roboto;
@navigation: Asgalt Regular;
@logo: Asgalt Regular;

/* FONT SIZE */
@headingSize: 1.5rem;
@subHeadingSize: 2rem;
@paragraphSize: 0.8rem;
@labelSize: 0.9rem;
@navigationSize: 6rem;
@logoSize: 2.5rem;

/* FONT CLASSES */

h1 {
  font-family: @heading;
  font-size: @headingSize;
  color: #525c79;
  letter-spacing: 5px;
}

p {
  font-family: @paragraph;
  font-size: @paragraphSize;
  color: #fff;
  font-align: left;
}


.logo {
  font-family: @logo;
  font-size: @logoSize;
  letter-spacing: 3px;
  color: #FFF;
  margin-bottom: 10px;
}

/* ____ ___  _     ___  ____  ____
  / ___/ _ \| |   / _ \|  _ \/ ___|
 | |  | | | | |  | | | | |_) \___ \
 | |__| |_| | |__| |_| |  _ < ___) |
  \____\___/|_____\___/|_| \_\____/ */

@black: rgb(19, 19, 19);
@white: rgb(236, 236, 236);

.hoverUnderline {
  &:after {
    display:block;
    content: '';
    border-bottom: solid 3px white;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    transform-origin:  0% 50%;
  }
  &:hover:after {
    transform: scaleX(1);
  }
}

/*
   ___ _____ _   _ _____ ____
  / _ \_   _| | | | ____|  _ \
 | | | || | | |_| |  _| | |_) |
 | |_| || | |  _  | |___|  _ <
  \___/ |_| |_| |_|_____|_| \_\*/

i {
  font-style: normal;
}

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 3rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  z-index: -1;
}

.bio {
  padding: 10px;
}

.navigationen {
  a {
    color: #525c79;
    text-decoration: none;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -ms-transition: color .5s linear;
    -o-transition: color .5s linear;
    transition: color .5s linear;
    &:hover {
      color: #5ddcff;
    }
  }
}

/* MAGIC CARD */
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 35vh;
  --card-width: 35vh;
}

.card {
  position: relative;
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  color: rgb(88 199 250 / 0%);
  margin-top: 25vh;
}

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  //animation: none;
//  opacity: 0;
}


.card::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    animation: spin 5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  //top: calc(var(--card-height));
  left: -10%;
  right: -10%;
  z-index: -1;
  height: 120%;
  width: 120%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

.cardContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}