:root {
	--ds-100: 650px;
	--ds-200: 700px;
	--ds-300: 750px;
	--ds-400: 825px;
	--ds-500: 1350px;
	--ds-600: 1875px;
	--ds-700: 1900px;
	--ds-800: 2800px;
	--ds-900: 5750px;	
}

.data_forwarding,
.ex_stage,
.hazard_detection,
.id_stage,
.if_stage,
.mem_stage,
.mips32_processor,
.pipeline_ex_mem,
.pipeline_id_ex,
.pipeline_if_id,
.pipeline_mem_wb,
.processor_stages,
.wb_stage {
    max-height: 100%;
}

.data_forwarding { width: var(--ds-200); }
.ex_stage { width: var(--ds-600); }
.hazard_detection { width: var(--ds-300); }
.id_stage { width: var(--ds-800); }
.if_stage { width: var(--ds-700); }
.mem_stage { width: var(--ds-400); }
.mips32_processor { width: var(--ds-900); }
.pipeline_ex_mem { width: var(--ds-200); }
.pipeline_id_ex { width: var(--ds-100); }
.pipeline_if_id { width: var(--ds-100); }
.pipeline_mem_wb { width: var(--ds-300); }
.processor_stages { width: var(--ds-500); }
.wb_stage { width: var(--ds-200); }

.hazard_example, .hazard_example__control { max-width: var(--width-1); }

.hazard_example { max-height: min(21.25vh, 170px); }

.hazard_example__control { max-height: min(25vh, 204px); }

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

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