/* =========================================
   SODERCLIENT - STYLE.CSS
   ========================================= */


/* MAIN PAGE */

html {
  min-height: 100%;
  background: #111111;
}

body {
  font-family: Arial, sans-serif;

  max-width: 900px;

  margin: 30px auto;

  padding: 0 16px;

  background: transparent;

  color: #eeeeee;

  min-height: 100vh;
}


/* =========================================
   GUCCI BACKGROUND
   ========================================= */

#gucci-background {
  position: fixed;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background-image: url("https://www.logodesign.org/img/5be7902c21fd0c52.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  /* Invisible normally */
  opacity: 0;

  /* Slow fade */
  transition: opacity 3s ease-in-out;

  /* Allows buttons to still work */
  pointer-events: none;

  /* Behind website content */
  z-index: 0;
}


/* When Gucci Client is selected */

#gucci-background.active {
  opacity: 0.55;
}


/* =========================================
   WEBSITE CONTENT
   ========================================= */

header,
main {
  position: relative;

  z-index: 1;
}


header {
  margin-bottom: 25px;
}


h1,
h2,
h3 {
  color: #ffffff;
}


/* =========================================
   NAVIGATION
   ========================================= */

nav {
  margin-top: 12px;
}


button {
  padding: 8px 12px;

  margin-right: 8px;

  cursor: pointer;

  background: #222222;

  color: #eeeeee;

  border: 1px solid #555555;

  border-radius: 4px;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}


button:hover {
  background: #333333;

  border-color: #777777;
}


button:active {
  background: #444444;
}


/* =========================================
   PAGES
   ========================================= */

.page {
  display: none;
}


.page.active {
  display: block;
}


/* =========================================
   IL2CPP EXPORT SECTIONS
   ========================================= */

.export-section {
  background: rgba(24, 24, 24, 0.95);

  border: 1px solid #444444;

  padding: 15px;

  margin-top: 20px;

  margin-bottom: 30px;

  border-radius: 4px;
}


/* Export code boxes */

pre {
  background: #0a0a0a;

  color: #eeeeee;

  border: 1px solid #444444;

  padding: 12px;

  overflow-x: auto;

  white-space: pre-wrap;

  word-break: break-word;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  border-radius: 4px;
}


/* Copy button message */

.copy-status {
  margin-left: 8px;

  font-size: 14px;

  color: #bbbbbb;
}


/* =========================================
   GUCCI CLIENT PAGE
   ========================================= */

.gucci-box {
  background: rgba(10, 10, 10, 0.80);

  border: 1px solid #555555;

  padding: 20px;

  margin-top: 20px;

  border-radius: 4px;

  backdrop-filter: blur(2px);
}


/* Make text easier to see over Gucci background */

#gucci h2 {
  text-shadow:
    0 2px 4px #000000,
    0 0 10px #000000;
}


#gucci p {
  text-shadow:
    0 1px 3px #000000;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  body {
    margin: 20px auto;

    padding: 0 12px;
  }


  nav button {
    margin-bottom: 8px;
  }


  #gucci-background {
    background-size: cover;

    background-position: center;
  }

}