.section {
    margin:40px 0 40px 0;
    border-radius:10px;
}
.mt-30 {
    margin-top: 30px;
}
button.btn:active {
    box-shadow: none;
}

h1 {
    font-size: 2.2rem;
    margin:0;
}

.links {
    margin-top:10px;
}

.links a {
    padding:10px 12px 10px 0;
}

.links a i {
    font-size: 1.3rem;
}

.colors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
}

.color {
    display:block;
    width: 25px;
    height: 25px;
    border-radius:3px;
    position: relative;
}
.color.active::before {
    display: block;
    position: absolute;
    content: ' ';
    top:50%;
    left:50%;
    transform: translateX(-8px) translateY(-8px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border:2px solid rgba(0,0,0,0.8);
}
.qrcode {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
#qrcode {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

#qrcode img {
    max-width: 100%;
}

#form input[type="text"], #form input[type="number"] {
    border:1px solid #999;
    border-radius:3px;
    padding: 0 0px 0 10px;
    box-shadow: none;
    width: calc(100% - 10px);
    margin-bottom:20px;
}

#form input[type="text"].color-field {
    margin-top:20px;
}

#form label + input[type="text"]:focus {
    color:#999;
}
#form label {
    color: #999;
}

hr {
    width: 30%;
    display: block;
    height: 20px;
    border: none;
}