@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);
}

ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    justify-content: center;
    margin: 40px auto;
    padding: 0 calc(var(--index) * 2 + 16px);
}

ul li img {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
}

li a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

li {
    background: #eeeeee;
    padding: calc(var(--index) * 0.3 + 5px) calc(var(--index) * 0.6 + 8px);
    border-radius: 100px;
    margin: 4px 4px;
    transition: .12s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

li:hover {
    background: #c7c7c7;
}

li p {
    font-family: regular;
    color: #000;
    text-decoration: none;
    margin: 0;
    font-size: calc(var(--index) * 0.7 + 7px);
}

.heading {
    font-family: title;
    margin: 12vh auto 8vh auto;
    width: min-content;
    text-align: center;
    text-align: left;
    text-wrap: nowrap;
    line-height: calc(var(--index) * 2.5 + 13px);
    color: #000000;
    font-size: calc(var(--index) * 2.5 + 13px);
}

.content {
    font-family: regular;
    margin: 4vh auto 0px auto;
    padding: 0 18px;
    max-width: 480px;
    text-align: center;
    text-align: justify;
    line-height: calc(var(--index) * 0.55 + 16px);
    color: #5c6575;
    font-size: calc(var(--index) * 0.55 + 14px);
    text-indent: 10px;
}

.content2 {
    font-family: regular;
    margin: 1vh auto 0px auto;
    padding: 0 18px;
    max-width: 480px;
    text-align: center;
    text-align: justify;
    line-height: calc(var(--index) * 0.55 + 16px);
    color: #5c6575;
    font-size: calc(var(--index) * 0.55 + 14px);
}

.content2 span {
    color: #000;
}

.center {
    display: flex;
    justify-content: center;
}

img {
    width: calc(100vw - 50px);
    max-width: 480px;
    margin: 8vh 0;
}

.content a, .content2 a {
    color: #5c6575;
    text-decoration: underline #5c6575;
    transition: .2s;
}

.content a:hover, .content2 a:hover {
    color: #36393f;
    text-decoration: underline #36393f;
}