@import url(https://fonts.googleapis.com/css?family=Montserrat);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);



h1 {

  margin: 0;

  font-family: 'Montserrat', sans-serif;

  font-size: 4em;

  color: #333;

  -webkit-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);

  -moz-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);

  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);

  word-spacing: 3px;

}



h3 {

  margin: 0;

  font-family: 'Montserrat', sans-serif;

  font-size: 1em;

  color: #333;

  -webkit-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);

  -moz-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);

  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.7);

  word-spacing: 2px;

}



p {

  font-family: 'Open Sans', sans-serif;

  font-size: 1.4em;

  font-weight: bold;

  color: #222;

  text-shadow: 0 0 40px #FFFFFF, 0 0 30px #FFFFFF, 0 0 20px #FFFFFF;

}



.container {

  position: absolute;

  top: 0;

  bottom: 0;

  width: 100%;

  background: url('');

  background-size: cover;

}



.wrapper {

  width: 100%;

  min-height: 100%;

  height: auto;

  display: table;

}



.content {

  display: table-cell;

  vertical-align: middle;

}



.item {

  width: auto;

  height: auto;

  margin: 0 auto;

  text-align: center;

  padding: 8px;

}



@media only screen and (min-width: 800px) {

  h1 {

    font-size: 6em;

  }

  h2 {

    font-size: 2em;

  }

  p {

    font-size: 1.6em;

  }

}



@media only screen and (max-width: 320px) {

  h1 {

    font-size: 2em;

  }

  h2 {

    font-size: .5em;

  }

  p {

    font-size: 1.2em;

  }

}



body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
  background-color: #000000; /* Keep the background color as a fallback */
  /* Remove the direct background image from the body */
  /* background-image: url('YOUR_IMAGE_URL.jpg'); */
  /* background-size: cover; */
  /* background-repeat: no-repeat; */
}

body::before {
  content: "";
  position: fixed; /* Ensure it covers the whole viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Add your image URL here */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top; /* Align top, center horizontally */
  opacity: 0.4;
  z-index: -1; /* Place it behind the content */
}



/* Color Variables */

/* Social Icon Mixin */

/* Social Icons */

.social-icons {

  display: inline-flex;

}



.social-icon {

  display: -webkit-box;

  display: flex;

  -webkit-box-align: center;

          align-items: center;

  -webkit-box-pack: center;

          justify-content: center;

  position: relative;

  width: 80px;

  height: 80px;

  margin: 0 0.5rem;

  border-radius: 50%;

  cursor: pointer;

  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  font-size: 2.5rem;

  text-decoration: none;

  -webkit-transition: all 0.15s ease;

  transition: all 0.15s ease;

}

.social-icon:hover {

  color: #fff;

}

.social-icon:hover .tooltip {

  visibility: visible;

  opacity: 1;

  -webkit-transform: translate(-50%, -150%);

          transform: translate(-50%, -150%);

}

.social-icon:active {

  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;

}

.social-icon--twitter {

  background: transparent;

  color: #fff;

  background-image: url(/icons/twitter.png);

  background-size: 75%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--twitter .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--twitter .tooltip:after {

  border-top-color: #752E24;

}

.social-icon--discord {

  background: transparent;

  color: #fff;

  background-image: url(/icons/discord.webp);

  background-size: 100%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--discord .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--discord .tooltip:after {

  border-top-color: #752E24;

}

.social-icon--vr {

  background: transparent;

  color: #fff;

  background-image: url(/icons/vr.png);

  background-size: 80%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--vr .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--vr .tooltip:after {

  border-top-color: #752E24;

}

.social-icon--ref {

  background: transparent;

  color: #fff;

  background-image: url(/icons/kali_icon_ref.png);

  background-size: 80%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--ref .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--ref .tooltip:after {

  border-top-color: #752E24;

}

.social-icon--refgwah {

  background: transparent;

  color: #fff;

  background-image: url(/icons/gwah_icon_ref.png);

  background-size: 80%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--refgwah .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--refgwah .tooltip:after {

  border-top-color: #752E24;

}

.social-icon--telegram {

  background: transparent;

  color: #fff;

  background-image: url(/icons/telegram.png);

  background-size: 75%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--telegram .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--telegram .tooltip:after {

  border-top-color: #752E24;

}

.social-icon--birb {

  background: transparent;

  color: #fff;

  background-image: url(/icons/skree.png);

  background-size: 80%;

  background-repeat: no-repeat;

  background-position: center;

}

.social-icon--birb .tooltip {

  background: #752E24;

  color: currentColor;

}

.social-icon--birb .tooltip:after {

  border-top-color: #752E24;

}

.social-icon i {

  position: relative;

  top: 1px;

}



/* Tooltips */

.tooltip {

  display: block;

  position: absolute;

  top: 0;

  left: 50%;

  padding: 0.8rem 1rem;

  border-radius: 40px;

  font-size: 0.8rem;

  font-weight: bold;

  opacity: 0;

  pointer-events: none;

  text-transform: uppercase;

  -webkit-transform: translate(-50%, -100%);

          transform: translate(-50%, -100%);

  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;

  z-index: 1;

}

.tooltip:after {

  display: block;

  position: absolute;

  bottom: 1px;

  left: 50%;

  width: 0;

  height: 0;

  content: "";

  border: solid;

  border-width: 10px 10px 0 10px;

  border-color: transparent;

  -webkit-transform: translate(-50%, 100%);

          transform: translate(-50%, 100%);

}

.peek {
    position:fixed;
	max-width: 50%;
	max-height: 50%;
    right:0px;
    bottom:0px;
}