:root {
    --blue: #2f5c96;
    --blue2: #29A3B0;
    --white: #FCFCFC;
    --tan: #f0f0f0;
    --brown: #362825;
    --lb: #e6fcff;
}

body { 
    margin: 0 10px;   
    font-family: monospace;
    font-size: 15px;
    background-image: url(/img/kaisei.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#logo {
    display: inherit;
    align-items: inherit;
    gap: 20px;
}


header {
    border-radius: 10px;
    border-style: solid;
    border-width: 4px;
    border-color: var(--brown);

    max-width: 900px;
    max-height: 50px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    background-color: var(--blue);
    color: white;
    margin: 35px auto;
    padding: 10px;
    border-radius: 10px;

    img {
        max-width: 120px;
    }

    ul {
        display: flex;
        gap: 10px;
        list-style: none;
        a {
            color: white;
        }
    }
}


footer {
    border-radius: 10px;
    border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: var(--brown);

    min-height: 80px;
    margin: auto;
    margin-top: 10px;
    background-color: var(--blue);
    border-radius: 10px 10px 0px 0px;
    max-width: 900px;
    padding: 10px;
    text-align: center;
    color: white;

}

.content {
    text-align: justify;
    text-justify: inter-word;
    margin: 0 20px;
    
}

.widthwrapper
{
    max-width: 910px;
    margin:  auto;
    
}


.main {
    background-color: var(--white);
    min-height: calc(100vh - 270px);
    border-radius: 10px;
    display: flex;
    border-style: solid;
    border-width: 4px;
    border-color: var(--brown);
}

#sidebar {
    min-width: fit-content;
    padding: 0px 10px;
    background-color: var(--tan);
    border-radius: 10px 0px 0px 10px;
    border-style: solid;
    border-color: var(--brown);
    border-width: 0px 4px 0px 0px;
    text-align: center;
    
}

@media screen and (max-width: 600px) {
    aside {
        display: none;
    }
}