:root {
    --ds-100: 400px;
    --ds-200: 490px;
    --ds-300: 800px;
    --ds-400: 850px;
    --ds-500: 940px;
    --ds-600: 1050px;
    --ds-700: 1915px;
    --ds-800: 3550px;
}

.processor,
.alu_controller,
.controller,
.datapath,
.ex_stage,
.id_stage,
.if_stage,
.mem_stage,
.wb_stage {
    max-height: 100%;
}

.processor { width: var(--ds-700); }
.alu_controller { width: var(--ds-100); }
.controller { width: var(--ds-300); }
.datapath { width: var(--ds-800); }
.if_stage { width: var(--ds-400); }
.id_stage { width: var(--ds-500); }
.ex_stage { width: var(--ds-600); }
.mem_stage { width: var(--ds-300); }
.wb_stage { width: var(--ds-200); }

.instruction { 
    max-width: var(--width-2);
    max-height: min(12.5vh, 100px);
}

@media (max-width: 768px) { 
    .instruction {
        width: 100%;
        height: auto;
    }
}