@import url("https://use.typekit.net/dkj5gbs.css");

#particles-js {
  width: 100vw;
  height: 100vh;
  position: relative;
  /*CHANGED FROM FIXED*/
  top: 0;
  left: 0;
}

#rightclickmenu {
  position: fixed;
  background-color: #1e1f21;
  border: 0.1vw solid #adadad;
  border-radius: 0.2vw;
  top: 0;
  padding-top: 0.2vw;
  z-index: 5;
}

.menutext {
  color: #ffffff;
  font-size: 1vw;
  padding: 0.3vw;
  padding-left: 0.6vw;
  padding-right: 0.6vw;
  text-align: left;
  font-family: Comfortaa;
  margin: 0;
}



body {
  position: relative;
  top: 0;
  left: 0;
  margin: none;
  padding: none;
  background-color: #000;
  /* so that it doesn't look horribly white when loading */
}


h1 {
  font-family: Comfortaa;
  font-size: 1.6vmax;
  color: #ffffff;
}

h2 {
  font-family: Comfortaa;
  font-size: 2vw;
  color: #ffffff;
}

pre {
  font-family: Comfortaa;
  font-size: 20px;
  color: #ffffff;
  text-align: left;
  padding-left: 10vw;
  width: 80vw;
  white-space: pre-wrap;
}

p,
li {
  font-family: Comfortaa;
  font-size: 1vmax;
  color: rgba(189, 189, 189, 0.945);
}

a {
  font-size: inherit;
}

ul {
  margin: 0px;
  padding-top: 0px;
}

/* Custom Scrollbar
 width */
::-webkit-scrollbar {
  width: 0.5vw;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(0deg, rgba(255, 0, 51,0.8) 0%, rgba(99, 9, 121, 1) 30%, rgba(50, 1, 93, 1) 60%, rgba(9, 9, 121, 1) 98%);
  border-radius: 0.2vw;
}

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 47, 250, 0.9);
} */

.homepage {
  /*background-color: #36393F;
  background: rgb(50,1,93); 
  background: linear-gradient(90deg, rgba(50,1,93,1) 0%, rgba(9,9,121,1) 35%, rgba(2,191,230,1) 100%);*/
  background: rgb(99, 9, 121);
  /*background: linear-gradient(90deg, rgba(99,9,121,1) 3%, rgba(50,1,93,1) 38%, rgba(9,9,121,1) 98%);*/
  background-size: cover;
  color: white;
  text-align: center;
  overflow-x: hidden;
  top: 0;
  left: 0;
}

#homepage {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  padding: none;
  margin: none;
  border: none;
  position: sticky;
}

body {
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
}

.fullpage {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: none;
  margin: none;
  position: relative;

  /*background: rgb(205,165,219);
  background: linear-gradient(90deg, rgba(205,165,219,1) 18%, rgba(102,109,156,1) 100%);*/
}

.bg1 {
  background: url("/images/bg/1.png");
  background-size: cover;
}

.bg2 {
  background: url("/images/bg/2.png");
  background-size: cover;
}

.bg3 {
  background: url("/images/bg/3.png");
  background-size: cover;
}

.bg4 {
  background: url("/images/bg/4.png");
  background-size: cover;
}

.bg5 {
  background: url("/images/bg/5.png");
  background-size: cover;
}

.pagelogo {
  border-radius: 3vw;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.hidealloverflow {
  overflow: hidden;
}

html {
  margin: none;
  padding: none;
  scroll-behavior: smooth;
}

.colouredimgbg {
  background-image: url('/images/codebg_right_zoom_part_t.png'), linear-gradient(90deg, rgba(99, 9, 121, 1) 3%, rgba(50, 1, 93, 1) 38%, rgba(9, 9, 121, 1) 98%);
}

.colouredbg {
  background-image: linear-gradient(90deg, rgba(99, 9, 121, 1) 3%, rgba(50, 1, 93, 1) 38%, rgba(9, 9, 121, 1) 98%);
}

.basicbg {
  background-color: #2c2c2e;
}

.indexbg {
  /*background-color: rgb(3, 3, 3);*/
  background: linear-gradient(45deg, rgba(5, 5, 5, 0.80), rgba(3, 3, 3, 0.8), rgba(4, 4, 4, 0.8), rgba(7, 7, 7, 0.8));
  /*background-image: url('/images/codebg2.png');*/
  /* rl('/images/codebg2.png')  /images/snowy_mountains.jpeg*/
  /*background-size: cover;*/
}

.nobold {
  font-weight: normal;
}

.centercontainer {
  position: absolute;
  left: 50%;
  /* relative to nearest positioned ancestor or body element */
  top: 50%;
  /*  relative to nearest positioned ancestor or body element */
  transform: translate(-50%, -50%);
  /* relative to element's height & width */
  background: linear-gradient(30deg, rgba(10, 5, 10, 0.80), rgba(10, 10, 10, 0.8), rgba(5, 5, 10, 0.8));
  box-shadow: rgba(0, 0, 0, 1) 0px 6px 20px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  /*border-radius: 2vmax;*/
  display: flex;
  width: fit-content;
  max-width: 95vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.centercontainerinner {
  padding: 0.8vmax 0.5vmax;
}



/* Legacy demo list */
.indexpagecenterwrapper {
  position: absolute;
  left: 50%;
  /* relative to nearest positioned ancestor or body element */
  top: 50%;
  /*  relative to nearest positioned ancestor or body element */
  transform: translate(-50%, -50%);
  /* relative to element's height & width */

  padding: 0.5vw;
  margin: 1vw;
  border-radius: 1.5vmax;

}

.innerindexpagecenter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.reveal {
  overflow: hidden;
  transition: all ease 1.5s;
  width: 80%;

}

/*.reveal:on-hover {
  width: 80%;
  max-width: 100%;
  
}
*/
.revealshown {
  animation: fadeIn 2.5s;
}



/* Reveal from the right */
.revealhiddenright {
  left: 100vw;
  visibility: hidden;
}

/* Revealed from the right */
.revealhiddenleft {
  right: 100vw;
  visibility: hidden;
}

.inlineelement {
  display: inline;
}

#leftsection {
  left: 0;
  width: 70%;
  max-width: 70%;
  padding: 0.5vw;
}

#rightsection {
  align-self: center;
  text-align: left;
  right: 0;
  max-width: 30%;
  padding: 0.5vw;
  overflow: hidden;
}

#discordwrapper {
  display: flex;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 23, 0, 0.7), rgba(39, 39, 39, 0.85));
  /* rgba(49, 49, 49, 0.4)*/
  border-radius: 1vw;
  padding: 0.1vmax 0.5vmax;
  position: relative;
  margin: 1px;
  max-height: min-content;
  /*border: 2px solid rgba(255, 255, 255, 0.2); 
  */
}

.rainbowwrapper {
  /* , #rainbowwrapper:after*/
  margin: 0;
  content: '';
  position: relative;
  background: linear-gradient(15deg, #f03, purple, #08f, #f03);
  background-size: 500%;
  width: 100%;
  /*calc(100% + 4px);*/
  border-radius: 1vw;
  z-index: -1;
  animation: steam 30s linear infinite;
  overflow: hidden;

}

@keyframes steam {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}


.individualstatus {
  background-color: rgba(255, 255, 255, 0.07);
  margin-top: 0.2vw;
  margin-bottom: 0.2vw;
  padding: 0.3vw;
  border-radius: 0.6vw;
  overflow: hidden;
}

#discordstatusdetails {
  display: flex;
  padding: 0.5vw;
}

#profiletext {
  margin: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  gap: 0.3vmax;
  font-size: 1vmax;
}

/*#profiletext {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;  number of lines to show *
          line-clamp: 6; 
  -webkit-box-orient: vertical;
  
} */

#profiletext::first-letter {
  text-transform: capitalize;
  /* capitalize first letter*/
}

#discordactivitysubheading {
  text-align: center;
  font-size: 1.25vw;
}

.profilepic {
  border-radius: 20%;
  width: auto;
  max-height: 2vmax;
  max-width: 100%;
  display: inline;
  align-self: center;
}

.indexheadline {
  font-family: Lato;
  font-size: 6vmax;
  color: #ffffff;
  margin: 0px;
  font-weight: 100;
  line-height: 100%;
}

.pagetext {
  text-align: left;
  color: #ffffffd2;
  font-size: 1.3vw;
}

.centeredwithin {
  margin: 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-flow: wrap;
}

.readmoretext {
  color: #ffffff;
}

.readmorebox {
  border: none;
  font-family: Comfortaa;
  font-size: 1.3vw;
  color: #ffffff;
  display: inline-block;
}

.centeredwithin hr {
  width: 100%;
  height: 1px;
  color: transparent;
  visibility: hidden;
}

.righttextwrapper {
  position: relative;
  width: 60%;
  max-width: 60vw;
  right: 0;

  margin-right: 1vw;
  padding: 2vh 1vw 2vh 1vw;
  z-index: 2;
  border-radius: 2vw;
  background-color: rgba(0, 0, 0, 0.5);
  flex-grow: 0;
}

.bottomwaves {
  bottom: 0px;
  height: 30vh;
  position: absolute;
  width: 100vw;
  justify-content: baseline;
  z-index: 1;
  opacity: 0.4;
}

.topwaves {
  position: absolute;
  top: 0px;
  width: 100vw;
  z-index: 1;
  opacity: 0.4;
}

.bottomwavessvg {
  width: 100%;
  height: 20vh;
  bottom: 0;
  left: 0;
  position: absolute;

}

.topwavessvg {
  width: 100%;
  height: 20vh;
  top: 0px;
  left: 0px;
  position: absolute;
}

.lefticonimage {
  width: 60%;
  flex-grow: 0;
  /*left: 5vw;
  top: 24vh;*/

}

.lefticonwrapper {
  flex-basis: 20vw;
  flex-grow: 1;
  position: relative;
  width: 100%;
  max-width: 40vw;

}


.indexlowertext {
  font-family: Comfortaa;
  font-size: 1.5vw;
  color: #ffffff;
}

.footer {
  position: absolute;
  /*CHANGED FROM FIXED*/
  left: 0;
  bottom: 0px;
  width: 100%;
  text-align: center;

}


.socialbox {
  position: sticky;
  bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(85, 85, 85, 0.3);
  opacity: 0.75;
  font-family: Comfortaa;
  font-size: 1.2vw;
  color: #ffffff;
  padding: 1vw;
  border-radius: 0.9vw;
  margin: 0px;
  box-shadow: rgba(100, 100, 111, 1) 0px 7px 29px 0px;
  width: 20vw;
  min-width: 200px;
  max-width: 90vw;
}



.socialicon {
  max-height: 1.3vw;
}

.indexnav {
  padding-top: 0.5vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1vmax;
  justify-content: center;
  
}

.navbox {
  border: 1px solid #6e5cf7;
  font-family: Comfortaa;
  font-size: 2vw;
  color: #ffffff;
  display: inline-block;
  padding: 0.5vw;
  margin-bottom: 0px;
  border-radius: 0.8vw;
  margin: 0px 0.05vw 0px 0.05vw;
  box-shadow: rgba(110, 92, 247, 0.7) 1px 3px 9px;
  transition: ease-in-out 0.2s;
}


.navbox:hover {
  box-shadow: rgba(110, 92, 247, 0.9) 1px 4px 12px;
}


.navtext {
  color: #6e5cf7;
}

.navicon {
  max-height: 2vw;
}


/*
.bgimgcontent {
  position: static;
}

.bgimgcontent:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100vw;
  min-height: 100vh;
  opacity: 0.2;
  background-image: url('images/codebg_right_zoom.PNG');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  background-clip: text;
  color: transparent;
}
*/

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 25vw);
  /* 1 row */
  grid-gap: 15px;
}

.gallery-text {
  margin: auto;
  /* required to make sure that the caption aligns with the image*/
  color: #bfbfbf;
  font-size: 30px;
  /*background-color: #ffffff;*/
  text-align: center;
  font-family: Comfortaa;
}

.front-image {
  border-radius: 10%;
}

.gallery-image {
  width: 70%;
}

.discordMenu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  background-color: rgba(18, 18, 30, 0.98);
  width: fit-content;
  padding: 1vw;
  border-radius: 1vw;
  min-width: 30vw;
  width: 50%;
  z-index: 6;
}

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

}

#closeDiscordModal {
  position: absolute;
  right: 1vw;
  top: 0;
  font-size: 3vw;
  color: #d2d2d2;
}

#discordservercontainer {
  background-color: rgba(74, 74, 74, 0.2);
  border-radius: 1vw;
  padding: 1vw;
  overflow: hidden;
  max-width: 94%;
  width: 94%;
}

.discordserverpfp {
  max-height: 20vh;
  border-radius: 2.5vw;
}

.prevserverbtnwrapper {
  position: absolute;
  top: 60%;
  left: 5%;
}


.slideshowbutton {
  padding: 1vw;
  border-radius: 0.5vw;
  background-color: rgba(71, 104, 168, 0.5);
}

.nextserverbtnwrapper {
  position: absolute;
  right: 5%;
  top: 60%;
}

#discordpopuppfp {

  width: 20%;
  height: 100%;
  display: inline;
  border-radius: 0.2vw;
  left: 0;

}

.centeredhorizontal {
  left: 50%;
  /* relative to nearest positioned ancestor or body element */
  transform: translate(-50%, 0);
  /* relative to element's height & width */
  text-align: center;
  align-items: center;
}

.centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  align-items: center;

}

.discordname {


  margin: none;
  border-radius: 0.5vw;
  display: inline-block;
  max-width: 100%;
  font-size: 3vw;
  text-align: center;
  line-height: 0;

}

.discordnamewrapper {
  max-width: fit-content;
  width: 70%;
  max-height: 100%;
  background-color: rgba(74, 74, 74, 0.25);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: none;
  padding-right: 0.5vw;
  border-radius: 1.5vw;
  gap: 5px;
  overflow: hidden;
}



.discordname {
  padding: 4px;
}

.styled-link {
  color: #ffffff;
  text-decoration: none;
}

.no-link-underline {
  text-decoration: none;
}

.fade-in {
  animation: fadeIn 2s;
}

.move-up-on-hover:hover {
  transition: transform 1.2s;
  transform: translate(0px, -0.2vw);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The Modal (background) */
.creditsMenu {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */

  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 30vh;
  /* Location of the box */
  overflow: auto;
  /* Enable scroll if needed */
}

/* Modal Content */
.creditsMenuContents {
  background-color: #262626;
  opacity: 0.8;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80vw;
  border-radius: 1.2vw;
}

/* The Close Button */
.closeCredits {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeCredits:hover,
.closeCredits:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}


table,
th,
td {
  font-family: Comfortaa;
  border-collapse: collapse;
  margin: auto;
  max-width: 90vw;
  white-space: pre-line;
  overflow: hidden;
}

table {
  border-radius: 10px;
}

th,
td {
  padding: 5px;
  width: 33vw;
  text-align: left;
}

td {
  max-width: 80vw;
}

th {
  text-align: left;
  padding-bottom: 9px;
}

.bottomwavesindex {
  /* no idea where this came from*/
  position: absolute;
  display: block;
  bottom: 0px;
  width: 100vw;
  max-height: 27vh;
  color: transparent;
  z-index: 0;
}

#indexsvgwaves {
  bottom: 0px;
  width: 100vw;
  height: 25vh;
}

.socialboxwrapper {

  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.backbtnwrapper {
  position: fixed;
  top: 2vh;
  left: 3vw;
  z-index: 1;
}

.backbtn {
  font-family: Comfortaa;
  font-size: 1.2vw;
  background-color: #333333;
  color: #026ccf;
  border-radius: 0.4vw;
  border: 0.1vw solid #026ccf;
}