/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2022 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Variable(Variable font)
 * Satoshi Variable Italic(Variable font)
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
       font-weight: 300 900;
       font-display: swap;
       font-style: normal;
}

html, body { 
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: url(../images/tmstadium.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#container {
  width: 100%;
  height: 100%;
  text-align: center;
}

button {
  display: flex;
  width: 20rem;
  height: 3rem;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: var(--white, #F3F3F3);
  box-shadow: 0px -1.5px 3px 0px rgba(0, 0, 0, 0.25) inset;
}

/* Cursor change on hover */
button:hover {
  cursor: pointer; /* Change this to the desired cursor value */
}

#loading-spinner {
  animation: loading-spinner 1s linear infinite
}
  
@keyframes loading-spinner {
from {
  transform: rotate(0deg) }
to {
  transform: rotate(360deg) }
}

.content {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /*centers items on the line (the x-axis by default)*/
  align-items: center; /*centers items on the cross-axis (y by default)*/
  flex-direction: column;
}
.contentkyber {
  display: flex;
  flex-direction: row;
}

.loader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 3rem;
}

.opacity {
    width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; background: rgba(0, 0, 0, 0.60)
}

.text-loading {
  margin-top: 1rem;
}

.plateform {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 1rem;
}

.button-text {
  color: var(--black, #151515);
  text-align: center;
  /* Title small */
  font-family: Satoshi;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 133.333% */
  letter-spacing: -0.0225rem;
}

.buttonLinks:hover {
  cursor: pointer;
}

.link {
  margin-top: 0.5rem;
  text-decoration: none;
}

.links {
  margin-top: 2rem;
}