:root {
    /* main colors */
    --color-main: #333333;
    --color-input: #888888;
    --color-button: #888888;
    --color-selected: #aaaaaa;
    --color-text: #ffffff;
    --color-shadow: #222222;

    /* password animation colors */
    --color-red: #992d28;
    --color-yellow: #b09230;
    --color-grey1: #6e7273;
    --color-petrol: #184145;
    --color-grey2: #494b4a;
    --color-blue: #367676;
  }

  @font-face {
    font-family: "clipangle";
    src: url("assets/clipangle.ttf") format("truetype");
  }
  
  html {
    height: 100%;
    width: 100%;
  }
  
  body {
    height: 100%;
    width: 100%;
    max-height: 100%;
    margin: 0;
    overflow: hidden;
    position: relative;
    scroll-behavior: smooth;
    font-family: clipangle;
    letter-spacing: 0.1em;
  }

  #container {
	  position: relative;
	  height: 100%;
	  width: 100%;
	  background-color: var(--color-main);
  }
  
  .hidden {
	  opacity: 0;
	  position: absolute;
	  top: -100%;
	  left: -100%;
  }


















  /* first page */
  #inner-container {
      height: 50vh;
      width: 70vw;
      min-width: 300px;
  }

  #pass-input {
      width: 230px;
      letter-spacing: 20px;
      font-size: 130%;
      text-align: center;
      text-transform: uppercase;

  }

  #button-go {
    font-size: 150%;
    text-transform: uppercase;
  }

  #pass-label {
      margin-top: 20px;
      color: var(--color-text);
  }

  #logo-container {
      z-index: -1;
      height: 100%;
      width: 100%;
  }

  #logo-svg {
      width: 100%;
      height: 100%;
  }


















  /* second page */
  #showcase {
    display: none;
  }

  #showcase-container {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 90%;
      height: 100%;

      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
  }

  .flex-elem {
    -webkit-flex: 0 1 30vh;
    flex: 0 1 30vh;
    position: relative;
  }

  .flex-elem-main {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
  }

  #info {
      color: var(--color-text);
      font-size: 75%;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translate(-50% , 0);
      width: 100%;
  }

  #logo-small {
      height: 80px;
  }
  #logo-small img {
      height: 100%;
  }

  #contacts {
      margin-top: 10px;
  }

  #video {
      max-width: 71vh;
      margin: 0 auto 0;
  }

  #social {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50% , 0);
    width: 80%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .social-button {
      margin-top: auto;
      margin-bottom: auto;
      text-align: center;
      -webkit-flex: 0 1 60px;
      flex: 0 1 60px;
      max-width: 60px;
      cursor: pointer;
  }
  .social-button img {
      height: 30px;
  }














  


  /* common */
  .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  .text-centered {
      text-align: center;
  }

  .button {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;

    cursor: pointer;

    outline: none;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 10px var(--color-shadow);

    text-align: center;
    text-decoration: none;
    font-family: inherit;

    color: var(--color-text);
    background-color: var(--color-button);
  }
  .button:hover {
    transform: scale(1.02) perspective(1px);
  }

  .text-input {
    padding: 5px 5px 5px 25px;

    outline: none;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 10px var(--color-shadow);

    font-family: inherit;
    font-size: inherit;

    background-color: var(--color-input);
    color: transparent;
    text-shadow: 1px 1px 0px var(--color-text);
  }

  .link {
    outline: none;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }