#contents {
    width: 538px;
    margin: 0 auto;
    font-family: sans-serif;
}

#pyramids {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#legend {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-family: sans-serif;
    line-height: 18px;
    margin-top: 8px;
}

.box {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

#male-box {
    background-color: lightblue;
}

#female-box {
    background-color: pink;
    margin-left: 20px;
}

#buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    background-color: beige;
    padding: 5px 0px;
}

.jump, #year {
    margin: 0 8px;
    height: 32px;
}

#year {
    line-height: 32px;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 600;
}

.jump {
    width: 48px;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:8px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:sans-serif;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.jump:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.jump:active {
	position:relative;
	top:1px;
}
.jump:disabled {
    visibility: hidden ;
}


.pyramid {
    position: relative;
    width: 264px;
    height: 336px;
}

.scale {
    border-top: solid 1px black;
    width: 264px;
    display: flex;
    justify-content: space-between;
}

.scale-marks {
    height: 3px;
    width: 112px;
    display: flex;
    justify-content: space-between;
}

.mark {
    height: 3px;
    border-left: solid 1px;
}

.mark.mark-12 {
    visibility: hidden;
}

.scale-label-container {
    width: 264px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;   
}

.scale-labels {
    width: 132px; 
    display: flex; 
}

.scale-labels.female {
    justify-content: flex-end;
    text-align: right;
}

.scale-label.m-p {width: 25px;}
.scale-label.m-6 {width: 28px;}
.scale-label.m-4 {width: 28px;}
.scale-label.m-2 {width: 28px;}
.scale-label.f-p {width: 25px;}
.scale-label.f-6 {width: 28px;}
.scale-label.f-4 {width: 28px;}
.scale-label.f-2 {width: 28px;}


.country-name {
    width: 264px;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.rect {
    position: absolute;
    height: 15px; 
    transition: width 0.5s;
}

.label {
    position: absolute;
    height: 16px;
    width: 112px;
    font-family: sans-serif;
    font-size: 10px;
    line-height: 16px;
}

.age-group {
    position: absolute;
    height: 16px;
    width: 40px;
    font-family: sans-serif;
    font-size: 11px;
    left: 112px;
    text-align: center;
    line-height: 16px;
}

.rect.male, .label.male {
    right: 152px;
}

.rect.male {
    background-color: lightblue;
}

.label.male {
    text-align: right;
    padding-right: 4px;
}

.rect.female, .label.female {
    left: 152px;
}

.rect.female {
    background-color: pink;
}

.label.female {
    text-align: left;
    padding-left: 4px;
}

.m-0-4, .f-0-4, .label-m-0-4, .label-f-0-4, .g-0-4 { bottom: 0px; }
.m-5-9, .f-5-9, .label-m-5-9, .label-f-5-9, .g-5-9 { bottom: 16px; }
.m-10-14, .f-10-14, .label-m-10-14, .label-f-10-14, .g-10-14 { bottom: 32px; }
.m-15-19, .f-15-19, .label-m-15-19, .label-f-15-19, .g-15-19 { bottom: 48px; }
.m-20-24, .f-20-24, .label-m-20-24, .label-f-20-24, .g-20-24 { bottom: 64px; }
.m-25-29, .f-25-29, .label-m-25-29, .label-f-25-29, .g-25-29 { bottom: 80px; }
.m-30-34, .f-30-34, .label-m-30-34, .label-f-30-34, .g-30-34 { bottom: 96px; }
.m-35-39, .f-35-39, .label-m-35-39, .label-f-35-39, .g-35-39 { bottom: 112px; }
.m-40-44, .f-40-44, .label-m-40-44, .label-f-40-44, .g-40-44 { bottom: 128px; }
.m-45-49, .f-45-49, .label-m-45-49, .label-f-45-49, .g-45-49 { bottom: 144px; }
.m-50-54, .f-50-54, .label-m-50-54, .label-f-50-54, .g-50-54 { bottom: 160px; }
.m-55-59, .f-55-59, .label-m-55-59, .label-f-55-59, .g-55-59 { bottom: 176px; }
.m-60-64, .f-60-64, .label-m-60-64, .label-f-60-64, .g-60-64 { bottom: 192px; }
.m-65-69, .f-65-69, .label-m-65-69, .label-f-65-69, .g-65-69 { bottom: 208px; }
.m-70-74, .f-70-74, .label-m-70-74, .label-f-70-74, .g-70-74 { bottom: 224px; }
.m-75-79, .f-75-79, .label-m-75-79, .label-f-75-79, .g-75-79 { bottom: 240px; }
.m-80-84, .f-80-84, .label-m-80-84, .label-f-80-84, .g-80-84 { bottom: 256px; }
.m-85-89, .f-85-89, .label-m-85-89, .label-f-85-89, .g-85-89 { bottom: 272px; }
.m-90-94, .f-90-94, .label-m-90-94, .label-f-90-94, .g-90-94 { bottom: 288px; }
.m-95-99, .f-95-99, .label-m-95-99, .label-f-95-99, .g-95-99 { bottom: 304px; }
.m-100, .f-100, .label-m-100, .label-f-100, .g-100 { bottom: 320px; }