html,
body {
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lucida Console", Monaco, monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2a2e4c;
  color: #00b3ff;
  font-size: 15px;
}

.content {
  margin: auto;
  margin-top: 100px;
  padding: 0;
  max-width: 320px;
  box-sizing: border-box;
}

[v-cloak] {
  display: none!important;
  opacity: 0;
}

.cloak-fade:not([v-cloak]) {
    opacity: 0;
    -webkit-animation-name: cloak-fade-in;
    animation-name: cloak-fade-in;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cloak-fade-in {
  0%   {opacity: 0;}
  100% {opacity: 1}
}

.title {
  text-align: center;
  margin-bottom: 75px;
  letter-spacing:0.1em;
}

.title h1
{
  font-size:7em;
  text-shadow: 5px 5px #CDD1DE;
  margin-bottom:  0px;
}

.title p
{
  letter-spacing: -2px;
  text-shadow: 1px 1px #000;
  font-size:1rem;
  padding: 0px;
  margin: 0px;
}

.error {
  background-color: rgb(155, 46, 46);
  color: rgb(255, 255, 255);
  padding: 1em;
  text-align: center;
  max-width: fit-content;
}

.input-group {
  position: relative;
  margin: 40px 0 20px;
  width: 300px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #00b3ff;
  background: transparent;
  text-align: center;
  color: #CDD1DE;
}

input:focus {
  outline: none;
  color: #fff;
}

label {
  color: #00b3ff;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  width: 100%;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  font-variant: all-small-caps;
}

.url-message {
  color: #262626;
  background-color: #00b3ff;
  font-weight: bold;
  padding: 1em;
  text-align: center;
}

.url-message:hover {
  box-shadow: 0 0 0 0 #ffffff;
}

.url-message a {
  color: inherit; 
}


input:focus ~ label,
input:valid ~ label {
  top: -30px;
  font-size: 22px;
  color: #ffffff;
}

.center {
  width: 100%;

}

.btn {
  width: 100%;
  height: 60px;
  cursor: pointer;
  background: transparent;
  border: 1px solid #91C9FF;
  outline: none;
  transition: 0.3s ease-in-out;
  color: white;
  font-size: 18px;
  font-weight: 100;
  text-transform: uppercase;
}

svg {
  width: 100%;
  position: absolute;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 0.3s ease-in-out;
}

.btn:hover {
  transition: 0.3s ease-in-out;
  background: #4F95DA;
}

.btn:hover svg {
  stroke-dashoffset: -480;
}

.btn span {
  color: white;
  font-size: 18px;
  font-weight: 100;
}

#footer {
  margin: 0px auto;
  margin-top: 100px;
  padding: 30px 20px;
  text-align: center;
   max-width: 768px;
  
}    
#footer p
{
  padding: 10px;
  font-size: 12px;
  text-align: justify;
}

.renderborder
{
  border: solid #FF0000 2px;
}

@media only screen and (max-width: 600px) {
  .content { margin-top: 100px; }
  
}

.animated-text {
  overflow: hidden;
  height:1.1em;
  word-wrap: break-word;
  white-space: nowrap;
  animation: typing 4s linear 0s infinite forwards;
 }
 
 @keyframes typing {
   from { 
     width: 0;
   }
 
   to { 
     width: 48ch;
   }
 }