/* p { color:blue; }  /* Targets all <p> tags */
.header { background-color:navy; }  /* Targets elements with class="header" */
#main-title { font-size:32px; }  /* Targets element with id="main-title" */
header nav { color:white; }  /* Targets <nav> inside <header> */

.container {
    width:1200px;
    padding:20px;          /* 20px inside */
    margin:0 auto;         /* Center horizontally */
    border:1px solid gray;
}

h1 {
    font-family: "Yu Gothic UI", "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size:32px;
    font-weight:bold;
    color:#333;
    line-height:1.5;
    text-align:center;
    letter-spacing: normal;
}

header {
    background-color:#2c3e50;
    color:white;
    padding:15px 0;
}

.nav-items {
    display:flex;
    gap:20px;           /* Space between items */
    justify-content:center;  /* Horizontal alignment */
    align-items:center;      /* Vertical alignment */
}

nav {
    position: fixed;
    top: 0;
    width: 100%;

    body {
        margin-top: 50px;  /* Height of the fixed nav */}
}

/* Desktop */
.content {
    width: 80%;
    margin: 0 auto;
}

/* Tablet & Mobile */
@media (max-width: 768px) {
    .content {
        width: 95%;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .content {
        width: 100%;
        padding: 10px;
    }   
}