html {
    background-color: #F7FDFF;
}

.home-header {
    display: grid;
    grid-template-columns: 20% auto;
    gap: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

.logo-container {
    width: 200px;
    text-align: center;
}
.logo-container img {
    margin: 2rem 0;
    height: 40px;
}

.title-container .title {
    padding: 2rem;
    line-height: 40px;
    font-size: 1.4em;
    text-align: right;
}

.home-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}
.menu-container {
    margin: 0 auto;
    padding: 0;
    width: 600px;
    overflow: hidden;
    /* background-color: #F7FDFF; */
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 280px);
    gap: 1rem;
}
.menu-card {
    background-color: #ccc;
    color: white;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}
.menu-card a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #126290;
}
.menu-card .guide a {
    padding: 2rem 0;
    width: 100%;
    font-weight: 600;
    background-color: #aee7fa;
}
.menu-card .api a {
    padding: 1rem 0;
    width: 100%;
    background-color: #DEF7FF;
    border-top: #36A0D9 1px solid;
}
.menu-card a:hover span {
    border-bottom: #DEF7FF;
}

.home-desc {
    padding: 40px;
}
.home-content p {
    margin: 0 auto;
    padding: 0.5rem 0;
    max-width: 780px;
    font-size: 0.8em;
    font-weight: 200;
}

.home-content .home-bottom {
    margin-top: 5rem;
}
.home-content .home-bottom .bottom {
    margin: 40px;
    border-top: #36A0D9 1px solid;
}
.home-content .home-bottom p {
    padding: 1rem 0 2rem;
}