@import url(https://fonts.googleapis.com/css?family=Raleway);

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

:root {
  /* Font */
  --font-size: 0.9375rem;
  /* Colors */
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(212, 45%, 89%);
  --grayish-blue: hsl(220, 15%, 55%);
  --dark-blue: hsl(218, 44%, 22%);
  /* Border Radius */
  --border-radius: 1.125rem;
}

body{
    margin:0;
    padding:0;
    height:100vh;
    width:100%;
    background-image: url('../../storage/landing/home1.jpeg');
    /* background-image: -moz-linear-gradient(0deg, #4dabff 0%, #62ddff 100%);
    background-image: -webkit-linear-gradient(0deg, #4dabff 0%, #62ddff 100%);
    background-image: -ms-linear-gradient(0deg, #4dabff 0%, #62ddff 100%);  */
   
    
}
nav{
    padding:10px;
}
nav h1{
    font-family: 'Raleway',sans-serif;
    color:#F9F3F4;
    text-shadow: 0px 0px 300px #000;
    font-size: 195%;
    margin-top: -1px;
    margin-bottom:1px;
}
.intro {
    width:100%;
    margin:auto;
    display: table;
}
.intro .inner {
    display: table-cell;
    width:100%;
    max-width: none;
}
.content {
    max-width: 500px;
    margin:115px auto;
    text-align: center;
}
.content h1 {
    font-family: 'Raleway',sans-serif;
    color:#F9F3F4;
    text-shadow: 0px 0px 300px #000;
    font-size: 300%;
    margin-bottom:20px;

}
.mybtn {
    border-radius: 9px;
    font-family: 'Oswald',sans-serif;
    font-size: 135%;
    padding: 10px 20px;
    border:solid 3px;
    text-transform: uppercase;
    text-decoration: none;
    color:#F9F3F4;
}
.mybtn:hover{
    color:#007bff;
    background-color:#fff;
    border-color:#fff;
    transition: 0.4s;
}
.mybtn:focus{
    box-shadow:0 0 0 .3rem rgba(0,123,255,.5)
}

hr{
    margin-top: 15px;
    border:0;
    border-top:1px solid rgba(0,0,0,.1)
}
@media (max-width:640px) {
    .content{
        margin:50px auto;
    }
   
}

/* Token css */
.box{
    width:100%;
    height:100%px;
    background-color: #fff;
    margin:115px auto;
    border-radius:10px;
    padding-top:50px;
    box-shadow:0 0 5px rgba(0,0,0,.4);
}
.form-group{
    width:100%;
    padding-top:150px;
}
.form-control{
}
@media (max-width:640px){
    .box{
        width:85%;
    }
}
.card {
    box-shadow: 0 0 10px rgba(0,0,0,.4)
}
.cardku{
    width:40%;
    padding:20px;
    margin-top:50px;
}
@media (max-width:500px){
    .cardku{
        width:90%;
    }
}
.mycontainer {
    
}
@media (max-width:640px)
{
    .modal{
        width:80%;
        margin:0 auto;
    }
}

input[type=file] {
    width: 300px;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    /* border-radius: 8px; */
    /* border: 1px solid #555; */
}
  
input[type=file]::file-selector-button {
    /* margin-right: 50px; */
    border: none;
    background: #007bff;
    /* padding: 10px 20px; */
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}
  
input[type=file]::file-selector-button:hover {
    background: #0d45a5;
}

.main {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .qrcode-wrapper {
    width: 20.125rem;
    padding: 1.125rem;
    background-color: var(--white);
    border-radius: var(--border-radius);
    opacity: 0.8;
  }
  
  .qrcode-wrapper .qrcode-image {
    overflow: hidden;
    border-radius: calc(var(--border-radius) / 2);
  }
  
  .qrcode-image img {
    max-width: 100%;
    display: block;
    background: no-repeat center / cover;
  }
  
  .qrcode-wrapper .qrcode-text {
    text-align: center;
    padding: 1.375rem 1rem;
  }
  
  .qrcode-text h1 {
    font-size: 1.375rem;
    color: var(--dark-blue);
    margin-bottom: 1rem;
  }
  
  .qrcode-text p {
    color: var(--grayish-blue);
    font-size: var(--font-size);
    line-height: 1.3;
  }