@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

/* Video */
video#hide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
  opacity: 1;
}
#container.hidden { opacity: 0; }

#maincontainer {
  display: flex;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

#container {
  position: fixed; /* use fixed to always center on the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  z-index: 10;
  opacity: 1;
  padding: 20px;           /* optional padding for small screens */
  box-sizing: border-box;
}

.childcontainer {
  padding: 45px 30px;
  width: 400px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;  /* center form content horizontally inside childcontainer */
}


form { text-align:center; position:relative; }

#animated-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

/* Letter fade animation */
@keyframes letterFade {
  0% { opacity:0; transform: translateY(20px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Main info */
.maininfo { display:flex; align-items:center; justify-content:center; }
.maininfo .img { background:#000; border-radius:50%; width:32px; height:32px; display:flex; justify-content:center; align-items:center; }
.maininfo .img img { width:100%; }
.maininfo p { padding-left:10px; color:#fff; }
.maininfo p span { font-weight:600; }
.maininfo p .smalltxt { padding-left:5px; font-size:12px; opacity:0.7; }
.maininfo p .txtname { padding-left:5px; font-size:12px; text-decoration:none; color:#fff; }

.buttons a {
  display:block;
  width:250px;
  max-width:90%;
  margin:10px auto;
  padding:15px;
  border-radius:3px;
  text-decoration:none;
  color:#fff;
  text-align:center;
  transition:0.2s ease;
}

.repobtn { background:#242424; }
.repobtn:hover { background:#1f1f1f; }

.discordbtn { background:#7289DA; }
.discordbtn:hover { background:#8c9ddd; }

.previewbtn { background:#818181; }
.previewbtn:hover { background:#9c9c9c; }