html
{
  height: 100%;
  /* Nastaví výchozí relativní jendotku REM na 10px */

  font-size: 62.5%;
}

body
{
  overflow: hidden;

  min-height: 100%;

  font-family: "Myriad Pro", sans-serif;

  color: #464646;
  background-color: #faf8fe;
}

/* Stylování scrollbaru */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;

  border: 5px solid rgba(0, 0, 0, 0);
  -webkit-border-radius: 15px;
  background-color: rgba(199, 199, 199, 0.5);
  background-clip: padding-box;
}

/* Základní CSS init */
*,
*::after,
*::before
{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;

  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
          tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main-wrapper {
  width: 100vw;
  height: 100vh;
}

#login-screen,
#chat-screen {
  position: absolute;

  width: 100%;
  height: 100%;
}

#login-screen {
  z-index: 9;
}

#chat-screen {
  display: none;
}

#login-screen #login-wrapper,
#chat-screen #chat-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 550px;
  min-width: 250px;
  padding: 80px 0px 30px 0px;

  font-size: 1.8rem;

  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);

  border-radius: 8px;
  background-color: white;
  -webkit-box-shadow: 0px 15px 90px rgba(0, 0, 0, 0.08);
          box-shadow: 0px 15px 90px rgba(0, 0, 0, 0.08);
}


#login-screen #login-wrapper h1 {
  padding: 30px;
  padding: 5px 0px 25px 0px;

  text-align: center;
}

#login-screen label {
  display: block;

  margin: 0px auto;
  margin-bottom: -15px;
  margin-left: -65px;

  font-size: 1.5rem;

  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #8a9097;
}

/* Vypne kreténskou outlinu u všech inputů */
input:hover,
input:focus,
textarea:focus,
textarea:focus {
  outline: none;
}

input {
  display: block;

  width: 230px;
  height: 54px;
  margin: 18px auto;

  font-family: "Myriad Pro", sans-serif;
  font-size: 2rem;

  border-radius: 40px;
}

#login-screen input#inp-name {
  padding-left: 20px;

  text-align: left;
  letter-spacing: 1px;

  color: #464646;
  border: 3px solid #c7c7c7;
  background-color: #fcfaff;
}

#login-screen input#inp-name:hover,
#login-screen input#inp-name:focus {
  border: 3px solid #b4b4b4;
}

/* Přestyluje placeholder */
#login-screen input#inp-name::-webkit-input-placeholder {
  color: #e4e3e7;
}

#login-screen input#inp-name.error {
  border: 3px solid #fd8391;
}

input[type="button"] {
  position: relative;

  cursor: pointer;
  -webkit-transition: 0.2s all;
          transition: 0.2s all;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  color: white;
  border: 0px;
  background-color: #88cd4d;
  -webkit-box-shadow: 0px 8px 15px rgba(136, 205, 77, 0.5);
          box-shadow: 0px 8px 15px rgba(136, 205, 77, 0.5);
}

input[type="button"]:hover,
input[type="button"]:focus {
  background-color: #81c249;
  -webkit-box-shadow: 0px 10px 38px rgba(136, 205, 77, 0.75);
          box-shadow: 0px 10px 38px rgba(136, 205, 77, 0.75);
}

input[type="button"]:active {
  -webkit-transition: 0.2s all;
          transition: 0.2s all;
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);

  background-color: #77b541;
}

input[type="button"]:disabled {
  background-color: rgba(136, 205, 77, 0.7);
  -webkit-box-shadow: 0px 8px 15px rgba(136, 205, 77, 0.3);
          box-shadow: 0px 8px 15px rgba(136, 205, 77, 0.3);
}

#login-screen #user-icon-wrapper {
  position: absolute;
  top: -75px;
  left: 50%;

  width: 150px;
  height: 150px;
  margin: 0px auto;

  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);

  border: 5px solid white;
  border-radius: 50%;
  background-color: white;
}

#login-screen #user-icon-wrapper img {
  width: 100%;
  height: auto;
  margin-top: 3px;
  margin-left: -4px;
}

#chat-screen #chat-wrapper {
  overflow: hidden;

  position: absolute;

  height: 800px;
  padding: 20px 0px 30px 0px;
}

#chat-screen #chat-wrapper h2#refresh-time {
  position: relative;
  z-index: 99;

  width: 245px;
  height: 40px;
  margin: 0px auto;
  padding: 12px;

  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;

  text-align: center;
  letter-spacing: 0.5px;

  border-radius: 50px;
  background: white;
  -webkit-box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.03);
          box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.03);
}

#chat-screen div.history-row,
#chat-screen div.send-row {
  position: relative;

  margin: 50px 0px 15px 0px;
}

#chat-screen span.name {
  display: block;

  position: absolute;
  top: -20px;
  left: 65px;

  margin: 0px auto;

  font-size: 1.5rem;
  font-style: italic;

  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #8a9097;
}

#chat-screen div.send-row span.name {
  right: 65px;
  left: initial;
}

#chat-screen div.history-row img {
  float: left;

  width: 35px;
  height: 35px;
}

#chat-screen div.send-row img {
  float: right;

  width: 35px;
  height: 35px;
}

#chat-screen div.bubble {
  float: left;

  position: relative;

  max-width: 90%;
  margin: 6px;
  padding: 7px 25px;
  padding-left: 20px;

  line-height: 2.5rem;

  text-align: left;
  letter-spacing: 1px;
  word-wrap: break-word;

  color: #464646;
  border: 3px solid #c7c7c7;
  border-radius: 24px;
  border-top-left-radius: 10px;
  background-color: #fcfaff;
}

#chat-screen div.send-row div.bubble {
  float: right;

  color: white;
  border: 3px solid #0b75e1;
  border-top-left-radius: 24px;
  border-top-right-radius: 10px;
  background-color: #0c84fe;
}

#chat-screen #chat-msgs-wrapper {
  overflow-y: auto;

  position: absolute;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 80%;
  padding: 90px 15px 0px 15px;
}

#chat-screen #send-section {
  position: absolute;
  bottom: 0px;
  left: 0px;

  width: 100%;
  height: 20%;
  min-height: 110px;
}

#chat-screen textarea {
  width: 100%;
  height: 100%;
  padding: 20px 25px;

  font-family: "Myriad Pro", sans-serif;
  font-size: 2rem;
  line-height: 2.5rem;

  resize: none;
  letter-spacing: 1px;

  color: #464646;
  border: 0px;
  border-top: 3px solid #c7c7c7;
  background-color: #fcfaff;
}

#chat-screen #inp-send-btn,
#chat-screen #inp-logout-btn {
  position: absolute;
  right: 0px;
  bottom: 0px;

  width: 110px;
  height: 40px;
  margin: 18px 18px;

  font-size: 1.6rem;
}

#chat-screen #inp-logout-btn {
  position: absolute;
  z-index: 999;
  top: 0px;

  margin: 18px 18px;

  background-color: #fd8492;
  -webkit-box-shadow: 0px 8px 15px rgba(253, 132, 146, 0.3);
          box-shadow: 0px 8px 15px rgba(253, 132, 146, 0.3);
}

#chat-screen #inp-logout-btn:hover,
#chat-screen #inp-logout-btn:focus {
  background-color: #ec7c89;
  -webkit-box-shadow: 0px 10px 20px rgba(253, 132, 146, 0.5);
          box-shadow: 0px 10px 20px rgba(253, 132, 146, 0.5);
}

#chat-screen #inp-logout-btn:active {
  background-color: #e5727f;
}

div.cleaner {
  clear: both;
}

/* Začátek responsivity */
@media (max-width: 600px) {
  #login-screen #login-wrapper,
  #chat-screen #chat-wrapper {
    width: 95%;
  }

  #chat-screen #chat-wrapper {
    width: 100%;
    height: 100%;
  }

  #chat-screen span.name {
    overflow: hidden;

    left: 5px;

    width: 100%;

    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #chat-screen div.send-row span.name {
    right: 0px;

    text-align: right;
  }

  #chat-screen #chat-wrapper h2#refresh-time {
    padding: 12px 24px;

    text-align: left;
  }
}

@media (max-height: 800px) {
  #chat-screen #chat-wrapper {
    height: 95%;
  }
}