*, *::before, *::after {
    box-sizing: border-box;
}

body {
    padding: 0px;
    font-family: "Noto Sans JP", sans-serif;
    margin: 0px;
    font-size: 62.5%;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    padding: 0% 1% 0% 1%;
    color: white;
}

header h2 {
    padding: 0%;
    font-size: x-large;
}

nav {
    display: flex;
    height: 100%;
    margin-right: 1.5rem;
}

nav ul {
    list-style: none;
    display: flex;
    height: 100%;
    margin-right: 1%;
}

nav ul li {
    padding-right: 10%;
    min-height: 100%;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: medium;
    min-height: 100%;
    transition: -webkit-text-fill-color ease-out 200ms;
}

.YouTube:hover {
    -webkit-text-fill-color: red;
}

.Chatroom:hover {
    -webkit-text-fill-color: yellow;
}

.test {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.test_txt {
    min-height: 100%;
    min-width: 100%;
    text-align: center;
    font-size: xx-large;
}

.no_wrap {
    display: flex;
    flex-wrap: nowrap;
    text-wrap: nowrap;
}

@media (max-width: 768px) {
    body {
        font-size: 31.25%;
    }
}