@import url(https://fonts.googleapis.com/css?family=Raleway);
body{
    margin:0;
    padding:0;
    height:100vh;
    width:100%;

    /* GABUNG BACKGROUND + LOGO TRANSPARAN */
    background-image:
        url("../img/logo-himatekfors.png"),
        linear-gradient(90deg, #4dacff92 0%, #62ddff 100%);

    background-repeat: no-repeat, no-repeat;
    background-position: center center, center;
    background-size: 20%, cover;

    font-family: 'Raleway', sans-serif;
}

nav{
    padding:10px;
}
nav h1{
    font-family: 'Raleway',sans-serif;
    color:#170306;
    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: 600px;
    margin: 30px auto 0 auto; /* naik ke atas */
    text-align: center;
    position: relative;
    z-index: 2; /* pastikan di atas background */
}

.content h1 {
    font-family: 'Raleway', sans-serif;
    color: #170407;
    text-shadow: 0px 0px 300px #000;
    font-size: 200%;
    margin-bottom: 20px;
}

.mybtn {
    border-radius: 9px;
    font-family: 'Oswald',sans-serif;
    font-size: 100%;
    padding: 10px 10px;
    border:solid 3px;
    text-transform: Sentence case;
    text-decoration: none;
    color:#000807;
}
.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: #2c0749;
    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;
    }
}
@media (max-width: 768px) {
    body {
        background-size: 70%, cover;
    }
}

@media (max-width: 480px) {
    body {
        background-size: 85%, cover;
    }
}
@media (max-width: 640px) {
    .content {
        margin-top: 20px;
    }

    .content h1 {
        font-size: 200%;
    }
}

.btn-bawah {
    position: fixed;           /* kunci ke layar */
    bottom: 100px;              /* jarak dari bawah */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

@media (max-width: 640px) {
    .btn-bawah {
        bottom: 25px;
        font-size: 120%;
        padding: 8px 18px;
    }
}

.box {
    background: none !important;
    background-color: #000000;
}