/*

    Script:     core.css
    Author:     Charles Edwards
    Purpose:    Style sheet used upon all webpages on this site

*/
/*
    class colours for themes, HTML, BODY
*/
:root {
    /* set css variables for themes */
    --primary-colour: white !important;
    --secondary-colour: rgb( 45, 45, 45 ) !important;
    --tertiary-colour: rgb( 250, 250, 250 ) !important; /* 250, 250, 250 */

    /* Camera Rotation */
    --cameraRotationXAxis: -90;
    --cameraRotationYAxis: 0;
    --cameraRotationZAxis: 0;

    /* Camera Posistion */
    --cameraX: 0;
    --cameraY: 200;
    --cameraZ: 0;
}

html {  

    /* remove margin,border and padding from body */
    margin: 0px;
    border: none;
    padding: 0px;

    /* define the way core webpage rects */
    overflow-x: hidden;
    overflow-y: hidden;

    height: 100vh;
    min-height: 100vh;
}

body {
    
    /* set background colour */
    /* backward compatibility */
    background-color: black;

    /* set text colour */
    color: rgb( 45, 45, 45 ); /* backward compatibility */
    color: var(--secondary-colour);
    
    /* remove margin,border and padding from body */
    margin: 0px;
    border: none;
    padding: 0px;
    
    /* default setting for background colour, E.G dark theme */
    transition: background-color 1s ease;

    /* default font on the entire website */
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;

    /* disable scrolling */
    overflow: hidden;

    /* scrollbar color for firefox */
    scrollbar-color: dark;

    height: 100vh;
    min-height: 100vh;

    /* because for some reason safari is like: YES LETS SCALE TEXT RANDOMLY WHEN THIS SHOULD BE BY DEFAULT FIRST YOU DIP SHITS */
    -webkit-text-size-adjust: none;
    
}

/*
    Webkit: Change Scrollbar Style
*/
::-webkit-scrollbar {
    width: 0.25em;
}
    
::-webkit-scrollbar-track {
    background-color: rgb( 45, 45, 45 );/*var(--tertiary-colour);*/
}
    
::-webkit-scrollbar-thumb {
    background-color:  rgb( 25, 25, 25 );/*var(--secondary-colour);*/
    outline: 0px solid slategrey;
}

/*
    H1-6 Style Rukes && Paragraph
*/

h1 {margin: 0px;border: none;padding: 0px;font-weight: bolder;}
h2 {margin: 0px;border: none;padding: 0px;font-weight: bold;}
h3 {margin: 0px;border: none;padding: 0px;font-weight: 600;}
h4 {margin: 0px;border: none;padding: 0px;font-weight: 500;}
h5 {margin: 0px;border: none;padding: 0px;font-weight: 400;}
h6 {margin: 0px;border: none;padding: 0px;font-weight: 300;}

p {margin: 0px;border: none;padding: 0px;}

/*
   content-overlay-container, webgl-black-canvas-overlay, content-3d-display-case
*/
.content-overlay-container, .webgl-black-canvas-overlay {

    position: fixed;

    margin: 0px;
    border: none;
    padding: 0px;

    background: none;
    overflow-y: hidden;
    overflow-x: hidden;

    /* width: 100%;
    height: 100%; */

    width: 100vw;
    height: 100vh;

    z-index: 2;
}

.webgl-black-canvas-overlay {

  background-color: black;
  display: none;

  z-index: 1;

}

/* 
  recaptcha removeal
*/
.grecaptcha-badge { visibility: hidden; }

/* 
  login portal style
*/
.login-portal {

  display: none;
  position: absolute;

  margin: 0px;
  border: none;
  padding: 5px 15px 5px 5px;
  /* padding: 5px; */

  top: 0;
  /* right: 0; */

  width: auto; /* 30vw */
  height: auto;

  background-color: rgba( 45, 45, 45, 0.6 );
  border-radius: 0px 0px 10px 0px; 

  z-index: 2;

  /* default font on the entire website */
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
  font-variant: small-caps;
  color: white;
  text-align: left;
  word-wrap: break-word;

  /* transform: rotateY(25deg); */

  opacity: 1;

  /* auto font size and uppercase */
  /* font-size: 0.8vw; */
  text-transform: uppercase;

}

.login-portal a, .login-portal a:hover, .login-portal a:focus, .login-portal a:active {
  text-decoration: none;
  color: inherit;
  /* font-size: 15px; */
}


/* 
  The voice assistant domain 
  style properties
*/
.va-domain
{
  position: absolute;
  display: none;
  /* display: inline-block; */
  
  margin: 0px 0px 0px 0px;
  border: none;
  padding: 5px 5px 5px 15px;

  top: 0;
  right: 0;

  width: auto;
  height: auto;

  background-color: rgba( 45, 45, 45, 0.6 );
  border-radius: 0px 0px 0px 10px;

  z-index: 2;

  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
  font-variant: small-caps;
  color: white;
  text-align: left;
  word-wrap: break-word;

  opacity: 1;

  font-size: 0.8vw;
  text-transform: uppercase;

}

.va-domain div 
{
  vertical-align: middle;
}

.va-domain a, .va-domain a:hover, .va-domain a:focus, .va-domain a:active {
  text-decoration: none;
  color: inherit;
}

.va-domain img
{
  display: inline-block;
  width: auto;
  height: 20px;
  vertical-align: middle;
  filter: invert(100%);
}

.va-domain p {
  display: inline-block;
  height: auto;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
}

/* 
    Loading Screen Styles:
    loading-screen, loading-screen-content
*/

.loading-screen {

    position: fixed;

    margin: 0px;
    border: none;
    padding: 0px;

    /* width: 100vw;
    height: 100vh; */

    width: 100%;
    height: 100%;

    background-color: rgb( 15, 15, 15 );
    overflow: hidden;
    z-index: 2;

    /* modern browser centre */
    display: flex;
    align-items: center;
    justify-content: center;

}

.loading-screen-content {

    margin: none;
    border: none;
    padding: none;

    width: 50vw;

    text-align: center;
    font-size: 1vw; /* 1vw is 1vw but is adjusted by the loadingScreenHanlder.js */
    /* font-variant: small-caps; */
    text-transform: uppercase;

    color: white;

    z-index: 2;
}

.loading-screen-content p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.ls-bar-border {
  /* border: 1px solid #ccc; */
  /* border-color: white; */
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgb( 45, 45, 45 );
}

.ls-bar {
  background-color: #ccc;
  transition: width 1s ease-in-out;
}

/* 
  Fullscreen button
*/

.fs-button {

  position: absolute;

  /* margin: 0px; */
  /* border: none; */
  /* padding: 0px; */

  width: 50px;
  height: 50px;

  bottom: 0;
  left: 15px;

  text-decoration: none;

  background: none;

  /* font-family: 'Roboto Condensed', sans-serif;
  font-weight: lighter;
  font-size: 45px; */

  color: var(--tertiary-colour);

  z-index: 3;
  transition: ease 0.3s;

}

.fs-button img {
  filter: brightness(0) invert(1);
}

.fs-button:hover{
  color: var(--tertiary-colour);
  box-shadow: none;
  box-shadow: none;
  filter: drop-shadow(2px 2px 7px rgba(255, 255, 255, 1));
  transition: ease 0.3s;
}

/* 
  Mute button
*/

.mute-button {

  position: absolute;

  /* margin: 0px; */
  /* border: none; */
  /* padding: 0px; */

  width: 50px;
  height: 50px;

  bottom: 0;
  right: 15px;

  text-decoration: none;

  background: none;

  /* font-family: 'Roboto Condensed', sans-serif;
  font-weight: lighter;
  font-size: 45px; */

  color: var(--tertiary-colour);

  z-index: 3;

  transition: ease 0.3s;

}

.mute-button img {
  filter: brightness(0) invert(1);
}

.mute-button:hover{
  color: var(--tertiary-colour);
  box-shadow: none;
  filter: drop-shadow(2px 2px 7px rgba(255, 255, 255, 1));
  transition: ease 0.3s;
}

/* 
  back button
*/

.back-button {

  position: absolute;

  /* margin: 0px; */
  /* border: none; */
  /* padding: 0px; */

  width: 50px;
  height: 50px;

  top: 15px;
  left: 15px;

  text-decoration: none;

  background: none;

  /* font-family: 'Roboto Condensed', sans-serif;
  font-weight: lighter;
  font-size: 45px; */

  color: var(--tertiary-colour);

  z-index: 3;

  transition: ease 0.3s;

}

.back-button img {
  filter: brightness(0) invert(1);
}

.back-button:hover{
  color: var(--tertiary-colour);
  box-shadow: none;
  filter: drop-shadow(2px 2px 7px rgba(255, 255, 255, 1));
  transition: ease 0.3s;
}

/* 
  CSS: animation loading clip loop
  Thanks! for the spinners source: https://loading.io/css/
*/

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 10px; /* 40px; was 30px recently now 10px */
  visibility: visible;
  opacity: 1;
}

.lds-ellipsis div {
  position: absolute;
  top: 30%;
  width: 13px;
  height: 1px;
  /* border-radius: 50%; */
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
  
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/*
   button style rules
*/
.index_button {  
    display: inline-block;

    margin: 6vh 0.25vw 0px 0.25vw;
    border-bottom: 1px solid var(--primary-colour);
    padding: 5px;

    text-decoration: none;
    text-transform: lowercase;
    font-variant: small-caps;
    background: none;

    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    font-size: 3vw;

    color: var(--tertiary-colour);
    transition: ease 0.3s;
}


.index_button:hover {
    box-shadow: 0px 12px 14px -16px white;
    text-shadow: 0 0 30px #fff, 0 0 30px #fff;
    transition: ease 0.3s;
}

/* 
  Debugger GUI
  used for DAT.GUI elements
*/

.debugger-gui {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
}


/* 
  CSS: animation for ripple effect
  Thanks! for the spinners source: https://loading.io/css/
*/

.lds-ripple {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 30px;
  height: 30px;
  overflow: visible;
  /* border: 1px solid #ff0000; */
}
.lds-ripple div {
  position: absolute;
  border: 1.8px solid rgb( 150, 255, 150 );
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 11px;
    left: 11px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 23px;
    height: 23px;
    opacity: 0;
  }
}

/* 
  CSS: animation for ripple effect (RED)
  Thanks! for the spinners source: https://loading.io/css/
*/

.lds-ripple2 {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 30px;
  height: 30px;
  overflow: visible;
  /* border: 1px solid #ff0000; */
}
.lds-ripple2 div {
  position: absolute;
  border: 1.8px solid rgb( 255, 50, 50 );
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple2 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple2 div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple2 {
  0% {
    top: 0px;
    left: 0px;
    width: 23px;
    height: 23px;
    opacity: 0;
  }
  100% {
    top: 11px;
    left: 11px;
    width: 0px;
    height: 0px;
    opacity: 1;
  }
}

/* 
  Footer
*/
footer {

  position: absolute;

  margin: 0px;
  border: none;
  padding: 5px;

  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);

  width: auto; /* 30vw */
  height: auto;

  z-index: 1;

  /* default font on the entire website */
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
  font-variant: small-caps;
  color: white;
  text-align: center;
  word-wrap: break-word;

  /* transform: rotateY(25deg); */

  opacity: 0.15;

  /* auto font size and uppercase */
  font-size: small;
  text-transform: uppercase;

}