@font-face {
    font-family: title;
    src: url(../public/bold.woff2);
}
@font-face {
    font-family: regular;
    src: url(../public/regular.woff2);
}
:root {
    --index: calc(1vw + 1vh);
}
.main {
    font-family: title;
    margin: 16vh auto 0px auto;
    width: min-content;
    text-align: center;
    text-align: left;
    line-height: calc(var(--index) * 3 + 6px);
    color: #000000;
    font-size: calc(var(--index) * 3 + 6px);
}
.center {
    display: flex;
    justify-content: center;
    margin-top: 4vh;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
button {
    background: #3c87ff;
    padding: calc(var(--index) * 0.3 + 5px) calc(var(--index) * 0.6 + 8px) calc(var(--index) * 0.3 + 5px) calc(var(--index) * 0.45 + 5px);
    border-radius: 100px;
    border: none;
    color: #fff;
    font-family: regular;
    margin: 0;
    font-size: calc(var(--index) * 0.55 + 10px);
    cursor: pointer;
    transition: .12s;
    margin: 4px 4px;
    display: flex;
    align-items: center;
}
button:hover {
    background: #256cdd;
}
button img {
    width: calc(var(--index) * 1.1 + 7px);
    color: #fff;
    margin-right: 7px;
}
.content {
    font-family: regular;
    margin: 16vh auto 6vh auto;
    width: calc(100vw - 100px);
    max-width: 660px;
    text-align: center;
    text-align: left;
    line-height: calc(var(--index) * 1.2 + 7px);
    color: #000000;
    font-size: calc(var(--index) * 1.2 + 6px);
    color: #5c6575;
}
.droid{
    width: calc(22vw + 110px);
    margin-bottom: -20px;
    margin-left: 50vw;
}