* {
    margin : 0;
    padding: 0;
}

.h1 {
    padding   : 10px;
    text-align: center;
}

.menu {
    text-align: center;
}

.menu nav {
    display    : inline-block;
    padding    : 20px;
    font-size  : 20px;
    font-weight: bold;
    cursor     : pointer;
}

.menu nav.active {
    color: #42b983;
}


.main {
    position: relative;
    z-index : 1;
}

.main .create {
    text-align: center;
}

.main .create input {
    position : relative;
    margin   : 20px 0;
    padding  : 12px;
    width    : 300px;
    font-size: 18px;
    border   : 1px solid #42b983;
    overflow : hidden;
}

.main .create input[type="button"] {
    color     : white;
    border    : none;
    background: #42b983;
    cursor    : pointer;
}

.main .create .qrcode img {
    margin       : 20px auto;
    padding      : 30px;
    width        : 360px;
    height       : 360px;
    border-radius: 8px;
    border       : 2px solid gray;
}

.main .reader {
    display   : none;
    text-align: center;
    font-size : 16px;
}

.main .reader .sweep {
    position  : relative;
    margin    : 20px;
    padding   : 12px;
    width     : 300px;
    font-size : 18px;
    cursor    : pointer;
    color     : white;
    background: #42b983;
    border    : 1px solid #42b983;
    overflow  : hidden;
}

.main .reader .sweep input {
    position : absolute;
    font-size: 100px;
    opacity  : 0;
}

.main .reader .imgurl {
    margin    : 20px;
    text-align: center;
}

.main .reader .imgurl img {
    margin       : 20px;
    padding      : 10px;
    border       : 1px solid gray;
    border-radius: 8px;
    width        : 280px;
    height       : 260px;
}

.main .reader .result {
    box-sizing   : border-box;
    padding      : 10px;
    border       : 1px solid gray;
    border-radius: 8px;
    font-size    : 16px;
}

.main .reader .canvas {
    display   : none;
    box-sizing: border-box;
    position  : fixed;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
    width     : 100vw;
    height    : 100vh;
}