@font-face {
  font-family: "header";
  src: url("./fonts/Bauhaus Demi.ttf");
}
@font-face {
  font-family: "code";
  src: url("./fonts/Zector.ttf");
}

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
  transition:all .3s ease;
  scroll-behavior: smooth;
}

:root {
  /* BACKGROUND */
  --body-bg-image: url(https://images-ext-1.discordapp.net/external/gVC0ko9twxHimPvchHjaE_rcO40q_K0mk_6Bp166mEM/https/giffiles.alphacoders.com/224/224617.gif?width=400&height=234);
  --body-bg-color: rgba(10,10,10,1);

  /* PROFILE CARD */
  --profile-card-bg: rgba(255,255,255,.04);
  --profile-card-bg-blur: 15px;
  --profile-card-bg-border: rgba(255,255,255,.05);

  --profile-title-clr: rgba(163, 54, 124, 1);
  --profile-title-shadow-clr: rgba(255,255,255,.4);
  --profile-title-shadow-blur: 15px;

  --profile-image: url(../cdn/profile.png);
  --profile-name-title: "Flevie";
  --profile-content: "Stuff, stuff, and more stuff";
  --profile-socials-clr: rgba(255,255,255,1);

  /* FOOTER */
  --footer-bg-left: rgba(163, 54, 124, .02);
  --footer-bg-right: rgba(255, 0, 221, .02);
  --footer-bg-left-hover: rgba(213, 104, 174, .2);
  --footer-bg-right-hover: rgba(255, 50, 255, .2);
  --footer-bg-blur: 5px;
}

body{
  background-color: var(--body-bg-color);
  background-image: var(--body-bg-image);
  background-size:cover;
  background-attachment: fixed;
  background-position: left;
  background-repeat: no-repeat;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.body-container{
  width:60%;
  display:flex;
  flex-direction: column;

  flex:1;
  justify-content: center;

  margin:0 auto;
}

/* MAIN / PROFILE */
main{
  flex:1;

  display:flex;
  justify-content: center;
  flex-direction: column;
}
main .main-article-container{
  display:flex;
  justify-content: center;
  padding:1em;
}
main .main-article-container article{
  background: var(--profile-card-bg);
  backdrop-filter: blur(var(--profile-card-bg-blur));
  height:auto;
  border-radius:.5em;
  width:30em;
  padding:1em;
  border: var(--profile-card-bg-border) solid 2px;
}

main .main-article-container article .profile-image{
  background-image:var(--profile-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  display:block;
  margin:.5em auto;
}

main .main-article-container article h1{
  color:var(--profile-title-clr);
  text-shadow:0 0 var(--profile-title-shadow-blur) var(--profile-title-shadow-clr);
  font-family: Arial,sans-serif;
  text-align: center;
  font-weight: bolder;
  font-size:1.7em;
}
main .main-article-container article h1::before{
  content:var(--profile-name-title);
}

main .main-article-container article p{
  color:var(--profile-title-clr);
  font-family: Arial,sans-serif;
  text-align: center;
  padding:.4em;
  font-weight: bolder;
  word-break:break-word;
  font-size:1em;
}
main .main-article-container article p::before{
  content:var(--profile-content);
}

main .main-article-container article ul{
  display:flex;
  flex-direction: row;
  justify-content: center;
  padding:2em 0 .5em 0;
  gap:.5em;
  list-style: none;
}
main .main-article-container article ul li a i{
  color:var(--profile-socials-clr);
  text-shadow:0 0 var(--profile-title-shadow-blur) var(--profile-title-shadow-clr);
  font-size:2em;
}
main .main-article-container article ul li a i:hover{
  color:var(--profile-title-clr);
}
main .main-article-container article ul li:hover{
  transform:translateY(-.2em);
}


footer{
  display:flex;
  justify-content: center;
  padding: 1em;

  margin-top:auto;
}

footer .footer-content{
  width:auto;
  max-height:auto;
  display:flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding:.5em;
  border-radius:2em;
  text-decoration: none;
  background: #A3367C;
  background: linear-gradient(311deg, var(--footer-bg-right) 0%, var(--footer-bg-right) 100%);
  backdrop-filter: blur(var(--footer-bg-blur));
  border:var(--profile-card-bg-border) solid 2px;
}
footer  .footer-content:hover{
  transform:translateY(-.2em);
  background: linear-gradient(311deg, var(--footer-bg-right-hover) 0%, var(--footer-bg-right-hover) 100%);
}
footer .footer-content h1{
  padding:.1em 1em .2em ;
  color:white;
  font-family: "header", sans-serif;
  font-size:1.2em;
}
footer .footer-content p{
  color:white;
  font-family:"code";
  font-size:.9em;
  font-weight:bold;
  unicode-bidi: isolate;
  padding: .3em;
}

@media(min-width:2000px){
  main .main-article-container article{
    width:60em;
    padding:1em;
  }
  main .main-article-container article .profile-image{
    width: 10em;
    height: 10em;  
    margin:1em auto;
  } 
  main .main-article-container article h1{
    font-size:3.4em;
  }
  main .main-article-container article p{
    padding:.8em;
    font-size:2em;
  }
  main .main-article-container article ul li a i{
    color:var(--profile-socials-clr);
    text-shadow:0 0 var(--profile-title-shadow-blur) var(--profile-title-shadow-clr);
    font-size:4em;
  }
  footer .footer-content{
    padding:1em;
    border-radius:20em;
  }
  footer  .footer-content:hover{
    transform:translateY(-.4em);
  }
  footer .footer-content h1{
    padding:.2em 2em .4em ;
    color:white;
    font-family: "header", sans-serif;
    font-size:2.4em;
  }
  footer .footer-content p{
    color:white;
    font-family:"code";
    font-size:1.8em;
    font-weight:bold;
    unicode-bidi: isolate;
  }
}

@media(min-width:1440px && max-width: 1999px){
  main .main-article-container article{
    width:45em;
    padding:.75em;
  }
  main .main-article-container article .profile-image{
    width: 7.5em;
    height: 7.5em;  
    margin:.75em auto;
  } 
  main .main-article-container article h1{
    font-size:2.3em;
  }
  main .main-article-container article p{
    padding:.45em;
    font-size:1.5em;
  }
  main .main-article-container article ul li a i{
    color:var(--profile-socials-clr);
    text-shadow:0 0 var(--profile-title-shadow-blur) var(--profile-title-shadow-clr);
    font-size:3em;
  }
  footer .footer-content{
    padding:.75em;
    border-radius:15em;
  }
  footer  .footer-content:hover{
    transform:translateY(-.3em);
  }
  footer .footer-content h1{
    padding:.3em 3em .3em ;
    color:white;
    font-family: "header", sans-serif;
    font-size:1.6em;
  }
  footer .footer-content p{
    color:white;
    font-family:"code";
    font-size:1.2em;
    font-weight:bold;
    unicode-bidi: isolate;
  }
}

@media(max-width:730px){
  .body-container{
    width:100%;
  }
  main .main-article-container article{
    width:95%;
  }
  footer{
    padding:0;
  }
  footer .footer-content{
    width:100%;
    padding:.3em 0;
    border-radius: 0%;
    border:none;
    background:none;
  }
  footer .footer-content h1{
    font-size:0;
  }
  footer .footer-content h1::before{
    content:attr(data-short);
    font-size:1.5rem;
  }
}