.app {
width: 100%;
min-height: 100dvh;

display: flex;
justify-content: center;
align-items: center;

padding: 16px;

position: relative;
}

/* ==================================
PAGE SYSTEM
================================== */

.page {
display: none;
width: 100%;
height: 100%;
}

.page.active {
display: flex;
}

/* ==================================
CALCULATOR PAGE
================================== */

#calculatorPage {
flex: 1;
}

/* ==================================
CONVERTER PAGE
================================== */

#converterPage {
flex: 1;
}

/* ==================================
DESKTOP
================================== */

@media (min-width: 1200px) {

.app {


width: 100%;

min-height: 100dvh;

display: flex;

flex-direction: row-reverse;

align-items: stretch;

justify-content: flex-start;

gap: 24px;

padding: 24px;


}

.page.active {


display: flex;

flex: 1;

min-width: 0;


}

}