@font-face {
  font-family: montserrat;
  src: url(./montserrat/Montserrat-Medium.otf);
}

body {
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  background-color: #1D1D1D;
  color: white;
  font-family: Helvetica;
  cursor:default;
}
::-webkit-scrollbar {
  width:0px;
}


@keyframes glitch {
0% {
  clip: rect(96px, 450px, 15px, 0);
}
5% {
  clip: rect(7px, 450px, 52px, 0);
}
11% {
  clip: rect(23px, 450px, 7px, 0);
}
17% {
  clip: rect(48px, 450px, 42px, 0);
}
23% {
  clip: rect(22px, 450px, 1px, 0);
}
29% {
  clip: rect(29px, 450px, 85px, 0);
}
35% {
  clip: rect(54px, 450px, 10px, 0);
}
41% {
  clip: rect(54px, 450px, 10px, 0);
}
47% {
  clip: rect(54px, 450px, 10px, 0);
}
52% {
  clip: rect(54px, 450px, 10px, 0);
}
58% {
  clip: rect(20px, 450px, 59px, 0);
}
64% {
  clip: rect(59px, 450px, 44px, 0);
}
70% {
  clip: rect(45px, 450px, 3px, 0);
}
76% {
  clip: rect(13px, 450px, 76px, 0);
}
82% {
  clip: rect(37px, 450px, 87px, 0);
}
88% {
  clip: rect(19px, 450px, 1px, 0);
}
94% {
  clip: rect(19px, 450px, 1px, 0);
}
100% {
  clip: rect(32px, 450px, 3px, 0);
}
}

@keyframes flicker {
0% {
  opacity:1
}
12% {
  opacity:.3
}
28% {
  opacity:.4
}
34% {
  opacity:.1
}
40% {
  opacity:0
}
78% {
  opacity:.2
}
84% {
  opacity:.1
}
92% {
  opacity:.3
}
100% {
  opacity:1
}
}

a, a:visited {text-decoration: none; color:cyan; font-size:16px; transition:0.3s;}
a:hover {color:yellow;}
button { background: #303131; color:white; border:1px solid #303131; border-radius: 5px; 
  cursor: pointer; transition: .3s; font-size:13px; padding:8px;}
button:hover {border:1px solid cyan;}
button:active {background:black;}
button:focus, input:focus, textarea:focus {outline:0}
button:disabled {background:grey;}
input {background:rgba(20,20,20,1); color:white; font-size:13px; border:0; padding:4px; border: 1px solid dimgrey;}
table {font-size:12px; font-family:Helvetica;}
table td, th {padding:4px; text-align: left; border:1px solid dimgrey; border-width: 0px 0px 1px 1px;}
th {font-style: bold; font-size:15px; border-width:0px; background:rgb(50,50,50); padding:10px;}
/*thead {position:sticky;}*/

input[type="checkbox"]+label {align-self: center;}

#frontpage {display:block; position:fixed; justify-content: center; align-items: center; flex-direction: column; height:100vh; width:100vw; background:#1D1D1D; z-index:10;}
#credentials {display:flex; justify-content: flex-end; align-items: center; margin:10px;}
#credentials input {padding:5px; width:200px; font-size:13px;}
#loginResponse {margin-right:20px; font-size:12px; font-style: italic;}

#blurb {position:fixed; top:25%; text-align: center; width:100%; padding:5%; font-size:20px; box-sizing: border-box; line-height: 30px;}
#blurb span {font-size:17px;}

#mainDiv {display:flex; justify-content: center; 
  flex-direction: column; align-content: center; align-items: stretch; padding:10px;}

#topDiv {display:flex;justify-content: flex-end; align-items: center;}
#userDiv { color:cyan; margin-right:10px;font-size:15px;}
#logo {position:absolute; left:10px; top: 15px; color:cyan; font-size:30px; letter-spacing: 5px; z-index:11;}
#logo::before { position: absolute;
  content:"snp.bz"; letter-spacing: 5px;
  top:0px; left:1px;
  width:100%; height:100%;
  background:#1D1D1D;
  text-shadow: -1px 0 lawngreen;
  animation: glitch 2s infinite linear alternate-reverse;
}
#logo::after { position: absolute;
  content:"snp.bz"; letter-spacing: 5px;
  top:0px; left:-1px;
  width:100%; height:100%;
  background:#1D1D1D;
  text-shadow: -1px 0 deeppink;
  animation: glitch 4s infinite linear alternate-reverse;
}
#logo .i { display:inline-block;
  padding:0; margin:-6px;
  animation: flicker 2s infinite linear reverse; opacity:.9;
}
#headerHolder {position:relative; display: flex; justify-content: center; flex-direction: column; align-items: center;
margin-bottom:20px; width:100%; 
}
#header {position:absolute; font-size:50px; letter-spacing: 8px; z-index:11; font-weight: 800;}
#header::before { position: absolute;
  content:"Snip Business"; letter-spacing: 8px; font-weight: 800;
  top:0px; left:1px;
  width:100%; height:100%;
  background:#1D1D1D;
  text-shadow: -1px 0 lawngreen;
  animation: glitch 2s infinite linear alternate-reverse;
}
#header::after { position: absolute;
  content:"Snip Business"; letter-spacing: 8px; font-weight: 800;
  top:0px; left:-1px;
  width:100%; height:100%;
  background:#1D1D1D;
  text-shadow: -1px 0 deeppink;
  animation: glitch 4s infinite linear alternate-reverse;
}
#header .i { display:inline-block;
  padding:0; margin:-6px;
  animation: flicker 2s infinite linear reverse; opacity:.9;
}


/******************************MOBILE************************************/
@media only screen and (max-width: 600px) {
  body {
  }
  #logo {font-size:25px; }
  #credentials  {display:block; position:relative; top:40px;}
  #credentials input {display:block;}
  
  #urlDiv { align-items: stretch; margin-top:20px;}
  #shortDiv, #longDiv {width:100%;}
  #shortDiv {flex-direction: column-reverse;}
  #shortURL {flex:1 1 auto;}
  #buttonDiv {margin:10px;}
}