@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Source+Code+Pro&display=swap");

:root {
  --bg: #26282e;
  --fg: #ad5138;
  --text: #f7f7f7;
  --dec: #dddae0;
  --aux: #8594ae;
}

body {
  font-size: 100%;
  font-family: "Lato", sans-serif;
  padding: 0;
  margin: 0;
  color: var(--bg);
  background-color: black;
}

article {
  position: fixed;
  width: 70%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 30px 15%;
  background-color: var(--bg);
  overflow: scroll;
  z-index: 0;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

article:after {
  position: absolute;
  content: " ";
  left: 100%;
  top: 0;
  right: 0;
  bottom: 0;
}

nav {
  position: fixed;
  left: -16em;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, var(--aux) 0%, var(--dec) 100%);
  border-right: 50px solid transparent;
  z-index: 1;
  cursor: pointer;
  overflow-x: hidden;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}



nav:after {
  position: absolute;
  content: " ";
  width: 0;
  height: 0;
  right: -70px;
  top: 50%;
  border-width: 15px 10px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}

nav ul {
  width: 14em;
  list-style-type: none;
  margin: 0;
  padding: 1em;
}

nav a:link,
nav a:visited {
  display: block;
  width: 100%;
  font-weight: bold;
  line-height: 2.5em;
  text-indent: 10px;
  text-decoration: none;
  color: #ffffff;
  border-radius: 4px;
  outline: 0 none;
}

nav a:hover,
nav a:focus {
  color: #ffffff;
  text-shadow: 0 0 4px #ffffff;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

article,
article:after,
nav {
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
}

nav:hover {
  left: 0;
}

nav:hover ~ article {
  -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
  -moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
  -ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
  -o-transform: translateX(16em) perspective(600px) rotateY(10deg);
  transform: translateX(16em) perspective(600px) rotateY(10deg);
}

nav:hover ~ article:after {
  left: 60%;
}

nav::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}


footer {
  margin-top: 2em;
  border-top: 1px dotted #999999;
}

h1 {
  font-size: 2.5em;
  font-weight: normal;
  margin: 0 0 0.2em 0;
  color: var(--text);
}

h3 {
  font-weight: normal;
  margin: 0 0 0.2em 0;
  color: var(--text);
}

p {
  line-height: 1.3em;
  margin: 0 0 1.5em 0;
}

.lead {
  font-weight: 100;
  font-size: 21px;
  color: var(--text);
}

#home .filter {
  background: url("https://media.discordapp.net/attachments/942931117940564091/951600872759124029/christian-wiediger-WkfDrhxDMC8-unsplash.jpeg?width=1782&height=1188")
    no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -5;
  opacity: 0.1;
}

article .socials {
  padding: 10px;
  font-size: 2.5rem;
  text-align: center;
  display: inline-block;
  margin: 10px;
  transition: 0.3;
}

article .socials a {
  color: var(--dec);
  transition: 0.3s;
  margin: 10px;
}

article .socials:hover {
  color: var(--aux);
}

.socials a:hover {
  cursor: pointer;
  color: var(--main-decor-color);
}

#typedtext {
  font-family: "Source Code Pro", monospace;
  border-style: solid;
  border-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  z-index: -1;
  font-weight: bold;
  backdrop-filter: blur(5px);
  backdrop-filter: saturate(80%);
}


iframe {
  border: none;
  margin: 0;
  padding: 10px;
  height: 400px;
  width: 400px;
}

.stats {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

a.btn {
    position: relative;
    display: inline-block;
    padding: 15px;
    margin: 40px 0;
    color: var(--dec);
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 3px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

a.btn:hover{
    background: var(--dec);
    color: #050801;
    box-shadow: 0 0 5px var(--dec);
                0 0 25px var(--dec);
                0 0 50px var(--dec);
                0 0 200px var(--dec);
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

a.btn span{
    position: absolute;
    display: block;
}


::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--aux);
}



.blogfilter {
  background: url("https://media.discordapp.net/attachments/954184610475032639/965360738073981008/retrosupply-jLwVAUtLOAQ-unsplash.jpeg?width=1672&height=1115")
    no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -5;
  opacity: 0.1;
}

#about {
  background-color: var(--aux);
  border-radius: 10px;
}

.listfilter {
  background-color: var(--bg); 
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -5;
  opacity: 0.1;
}



a.btn1 {
    position: relative;
    display: inline-block;
    padding: 15px;
    margin: 40px 0;
    color: var(--dec);
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 3px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.btn1:hover{
    background: var(--dec);
    color: #050801;
    box-shadow: 0 0 5px var(--dec);
                0 0 25px var(--dec);
                0 0 50px var(--dec);
                0 0 200px var(--dec);
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

a.btn1 span{
    position: absolute;
    display: block;
}


.faq-heading {
    border-bottom: #777;
    padding: 20px 60px;
}
.faq-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.hr-line {
    width: 60%;
    margin: auto;
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
    /* background-color: #eee; */
    color: #444;
    cursor: pointer;
    padding: 30px 20px;
    width: 60%;
    border: none;
    outline: none;
	border-radius: 20px;
    transition: 0.4s;
    margin: auto;
}
.faq-body {
    margin: auto;
    /* text-align: center; */
    width: 50%;
    padding: auto;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
    background-color: var(--main-color);
    color: white;
}
/* S tyle the faq-page panel. Note: hidden by default */
.faq-body {
    padding: 0 18px;
    border-radius: 15px;
    display: none;
    overflow: hidden;
}
.faq-page:after {
    content: "\02795";
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    float: right;
    margin-left: 5px;
}
.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

.ll {
	color: var(--fg);
	font-weight: bold;
	text-decoration: none;
}