html {

    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Zen Maru Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
}

body {
    display: grid;
    grid-auto-flow: row;
    justify-content: center;
    gap: 0;
    line-break: strict;
    margin: 0;
    padding: 0 0;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.box {
    display: grid;
    grid-auto-flow: row;
    justify-content: center;
    gap: 40px;
    margin: 0 20px;
    justify-self: center;
    max-width: 50rem;
}

.title {
    justify-self: center;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: calc(8/6*1rem);
    font-feature-settings: "palt";
}

.subtitle {
    justify-self: center;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: calc(8/5*1rem);
    font-feature-settings: "palt";
}

.monitor {
    justify-self: center;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: calc(8/6*1rem);
    font-feature-settings: "palt";
}

.link {
    display: grid;
    justify-self: center;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: calc(8/7*1rem);
}

.link a {
    justify-self: center;
}

.text {
    justify-self: start;
    line-height: calc(8/5*1rem);
}

.img {

    justify-self: center;
    object-fit: contain;
    font-optical-sizing: auto;
    font-weight: 530;
    letter-spacing: 0.05em;
    font-style: normal;
}

.img p:nth-of-type(n+2) {

    font-size: calc(8/9*1rem);
    font-weight: 550;
    letter-spacing: 0.05em;
}

header {
    margin: 0;
    padding: 0;
    width: 100%;
}

footer {
    margin-bottom: 20px;
    justify-self: center;
    font-optical-sizing: auto;
    font-weight: 530;
    font-style: normal;
}

a {
    color: rgb(0, 0, 255);
    text-decoration: none;
}

a:hover {
    color: rgb(200, 200, 255);
    font-weight: 900;
    text-decoration: underline
}

p {
    margin: 0;
    padding: 0;
    width: 100%;
}

img {
    margin: 0;
    padding: 0;
    width: 100%;
}

@media screen and (max-width: 600px) {

    html {
        font-size: 15px;
    }


}