*{box-sizing:border-box}

body {
    background-color: #F3F4F6;
    margin:0;
}

#heroDiv {
    float: left;
    width: 32%
}

#loginDiv {
    float: left;
    width: 68%;
    
    padding-top:60px !important;
}

.showcase {
    margin:auto;
    padding: 20px;
    box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.1);
    border-radius:5px;
    width:95%;
    max-width:350px;
    text-align:left !important;
    background-color:white;
}

@font-face {
    font-family: Geist-Black;
    src: url(fonts/Geist-Black.ttf);
}

@font-face {
    font-family: Geist-Bold;
    src: url(fonts/Geist-Bold.ttf);
}

@font-face {
    font-family: Geist-ExtraBold;
    src: url(fonts/Geist-ExtraBold.ttf);
}

@font-face {
    font-family: Geist-ExtraLight;
    src: url(fonts/Geist-ExtraLight.ttf);
}

@font-face {
    font-family: Geist-Light;
    src: url(fonts/Geist-Light.ttf);
}

@font-face {
    font-family: Geist-Medium;
    src: url(fonts/Geist-Medium.ttf);
}

@font-face {
    font-family: Geist-Regular;
    src: url(fonts/Geist-Regular.ttf);
}

@font-face {
    font-family: Geist-SemiBold;
    src: url(fonts/Geist-SemiBold.ttf);
}

@font-face {
    font-family: Geist-Thin;
    src: url(fonts/Geist-Thin.ttf);
}
div {
    font-family: Geist-Thin;
    font-size: 14px
}
p,input,a {font-family:Geist-Regular; font-size:14px}
h2 {font-family: Geist-Bold; font-size:20px}
strong{ font-family:Geist-Bold}
label{font-family: Geist-Bold; font-size:11px; margin-left: 10px}

a {
    text-decoration: none;
    color: gray;
    transition:color 0.5s;
    cursor:pointer;
}

a:hover {
    color: black;
}

.myinput {
    padding: 10px;
    border: 1px solid #E0E1E3;
    border-radius: 6px;
    width: 100%;
    outline:none;
    margin-top:5px;
    margin-bottom:15px;
}
.mybtn {
    background-color: #6F80D6;
    border-radius: 6px;
    padding: 10px;
    border: 2px solid #6F80D6;
    color: white;
    transition: all 0.5s;
    width: 100%;
    margin-bottom: 10px;
}

    .mybtn:hover {
        background-color:white;
        color: #6F80D6;
    }

@media only screen and (max-width: 900px) {
    #heroDiv {
        display:none;
    }

    #loginDiv {
        float:none;
        width: 100%;
        padding-left:0 !important;
        padding-top:20px !important;
    }
    .showcase {
        margin:auto !important;
    }
}

iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
}