@import url(/util.css);

body {
    gap: 10px; 
}

.back {
    margin-top: 0px; 
}

.sidebar {
    background-color: var(--bg-main);
    border: var(--border-primary); 
    width: 200px;
    padding: 10px; 
    display: flex;
    flex-direction: column;
    gap: 10px; 
    height: max-content; 
}

.acds {
    width: 200px;
    margin-bottom: 10px; 
}

.main-content {
    background-color: var(--bg-main);
    border: var(--border-primary); 
    width: 500px;
    padding-bottom: 10px; 
    padding-top: 15px; 
padding-left: 10px; 
padding-right: 10px; 
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.general-box {
    padding-left: 10px; 
    font-size: 13px;
}

.resource-box {
    display: flex;
    flex-direction: column;
    gap: 5px; 
    padding-left: 10px; 
    padding-right: 10px; 
    font-size: 13px;
}

.general-row {
    display: flex;
    gap: 5px; 
}

.general-pixel {
    aspect-ratio: 1;
    width: 20px;
}

.about-box {
    padding-left: 10px; 
    padding-right: 10px; 
    font-size: 13px;
    line-height: 1.2;
}

.chunk {
    margin-bottom: 7px;
}

.resident-box {
    display: flex;
    gap: 8px; 
    padding-left: 10px; 
    padding-right: 10px; 
}

.resident-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.resident {
    height: 60px; 
}

.resident-name {
    font-size: 13px;
    text-align: center;
}

.build img {
    width: 500px;
    height: 270px; 
}