* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* centering */
span, #outer, #enter, #nmiddle span, .smlside {
  align-self: center;
  justify-self: center;
}

#Full, #top, #dleft, #dright, #nmiddle {
  align-items: center;     
  justify-items: center;
}
/* max out width/height */
body, #alpha, #dleft, #dmiddle, #dright {
  min-height: 100%;
}

body, main, #alpha, #dleft, #dmiddle, #dright, #dpad-area, #dcenter {
  max-width: 100%;
}

/* element selectors */
h1 {
  min-height: 2.6cqh;
  font-size: 2.6cqh;
  text-align: center;
}

span {
  height: 1.4cqh;
  text-align: center;
  color: darkred;
  font-size: 1.2cqh;
}

button {
  background: black;
  color: white;
  border-radius: 2cqw;
  font-size: clamp(0.65rem, 2.2cqi, 1rem);
}

div {
  border-radius: 1em;
}

/* core div content */
body {
  overflow: hidden;
}

main {
  display: flex;
  overflow: hidden;
  justify-content: center;
}

/* calculator start */
#Full {
  container-type: size;
  margin-top: 1dvh;
  display: flex;
  flex-direction: column;
  background-color: darkgray;
  width: clamp(310px, 45dvw, 365px);
  height: min(97dvh, 883px);
}

#outer {
  display: grid;
  width: clamp(295px, 43dvw, 350px);
  height: min(95dvh, 860px);
  background-color: lightgray;
  grid-template-rows: 3.5fr 2.5fr 2fr 2fr;
}

#top {
  width: 95%;
  justify-self: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#header {
  text-align: center;
  min-height: 2.7cqh;
}

#output {
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  color: lightblue;
  font-size: 2cqh;
}

#screen {
  border-radius: 0;
  margin: 1.1cqh auto 2px auto;
  height: 100%;
  min-width: 90%;
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#dpad-area {
  overflow: hidden;
  height: 97%;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

#numpad {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

#dpadholder {
  display: grid;
  background: darkgray;
  width: 100%;
  height: 95%;
  gap: 0;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: /* 3 x 3 */
  ". up ."
  "left center right"
  ". down .";
}

#alpha {
  display: grid;
  margin-top: .5cqh;
  grid-template-columns: 1fr 4fr 1fr;
}

/* dpad divs and extras */
#dleft {
  display: grid;
  grid-template-rows: .25fr .6fr .25fr .6fr .25fr .6fr;
  grid-template-areas:
  "goback"
  "esc"
  "save"
  "calc"
  "."
  "tab";
}

#dright {
  display: grid;
  grid-template-rows: .25fr .6fr .25fr .6fr .25fr .6fr;
}

#dcenter {
  height: 95%;
  width: 95%;
  border-radius: 50%;
  background: black;
}

#dright button, #dleft button {
  width: max(48px, 80%);
  height: 70%;
  border-radius: .5cqw;
}

#dmiddle button {
  height: 90%;
  width: 95%;
  border-radius: 1cqh;
}


#calcwrapper {
    line-height: 1;
    font-size: 3.8cqh;
    transform: translateY(-.5cqi);
}

/* Numpad divs and extras*/

#nleft {
  display: grid;
  padding-left: .5dvw;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: .6fr .25fr .6fr .6fr .6fr .25fr .6fr .25fr .6fr;
  grid-template-areas:
  "ctrl ."
  "ineq help"
  "equal trig"
  "nthroot sqrt"
  "power square"
  "natlog log"
  "invnat invlog"
  "brackets curly"
  "lpar rpar";
}

#nmiddle {
  display: grid;
  margin-top: .05cqh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: .1fr .5fr .5fr .5fr .5fr .1fr .5fr;
  grid-template-areas:
  "caps . sto"
  "shift . var" 
  "seven eight nine"
  "four five six"
  "one two three"
  ". capture ans"
  "zero decimal neg";
}

#nright {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: .3fr .6fr .3fr .6fr .3fr .6fr .3fr .6fr .05fr .6fr;
  grid-template-areas:
  ". clear" 
  ". del"
  "cata lib" 
  "fraction book"
  "dotx vrt"
  "multiply divide"
  "bridown briup"
  "add minus"
  "approx approx"
  "enter enter";
}

#nleft button, #nright button {
  width: max(30px, 75%);
  border-radius: .6dvw;
  align-items: flex-start;
}

#ctrl {
  background: yellow;
  color: black;
  width: 95%;
}


#nmiddle span {
  height: 1cqh;
}

#var {
  justify-self: flex-start !important;
}

#underscore {
  width: 90% !important;
  height: 65% !important;
  border-radius: .3cqh !important;
}

#enter {
  height: 90% !important;
  width: 80% !important;
}
#menu button {
  padding-right: 1em;
}

.num, #var, #shift {
  border-radius: 5px;
  height: 70%;
  width: 75%;
}

#seven, #four, #one, #zero, #var, #shift {
  justify-self: flex-end;
}

#neg, #three, #six, #nine {
  justify-self: flex-start;
}

/* alpha area divs and extra */

#alpha button {
  height: 60%;
  width: max(20px, 90%);
  border: .05cqh solid black;
}

#amiddle {
  display: grid;
  justify-self: center;
  width: 90%; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: .07em;
}

#aright, #aleft {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.smlside {
  width: max(25px, 45%) !important;
  border-radius: 3cqh !important;
}

/* make numpad and alpha x y z black on white */
button#nine, button#eight, button#seven, button#six, button#five, button#four, button#three, button#two, button#one, button#zero, button#decimal, button#neg, button#x, button#y, button#z {
  background: white;
  color: black;
}

/* GRID AREAS ONLY */
/* dleft grid-areas */
#goback { grid-area: goback; } #esc { grid-area: esc; } #save { grid-area: save; } #calc { grid-area: calc; } #tab { grid-area: tab; }
/* dpad areas */
#larr { grid-area: left; } #rarr { grid-area: right; } #darr { grid-area: down; } 
#uarr { grid-area: up; } #dcenter { grid-area: center; }
/*npad left areas */
/* spans */
#ineq { grid-area: ineq; } #help { grid-area: help; } #nthroot { grid-area: nthroot; } #sqrt { grid-area: sqrt; }
#natlog { grid-area: natlog; } #log { grid-area: log; } #brackets{ grid-area: brackets; } #curly { grid-area: curly; }
/* buttons */
#ctrl { grid-area: ctrl; } #equal {    grid-area: equal; } #trig {    grid-area: trig; } #power {    grid-area: power; }
#square {    grid-area: square; } #invnatlog {    grid-area: invnat; } #invlog { grid-area: invlog; }
#leftparen { grid-area: lpar; } #rightparen { grid-area: rpar; }
/* npad spans */
#caps { grid-area: caps; } #sto { grid-area: sto; } #capt { grid-area: capture; } #ans { grid-area: ans; }
/* numpad middle buttons */
#var { grid-area: var; } #shift { grid-area: shift; } #seven { grid-area: seven; } #eight { grid-area: eight; }
#nine {  grid-area: nine; } #four { grid-area: four; } #five { grid-area: five; } #six {  grid-area: six; }
#three { grid-area: three; } #two { grid-area: two; } #one { grid-area: one; } #zero { grid-area: zero; }
#decimal { grid-area: decimal; } #neg {  grid-area: neg; }
/* numpad right spans */
#clear { grid-area: clear; } #catalog { grid-area: cata; } #lib { grid-area: lib; } #dotx { grid-area: dotx; }
#vrtfrac { grid-area: vrt; } #bridown { grid-area: bridown; } #briup { grid-area: briup; } #approx { grid-area: approx; }
/*numpad right buttons */
#enter { grid-area: enter; } #del { grid-area: del; } #fraction { grid-area: fraction; } #book { grid-area: book; }
#multiply { grid-area: multiply; } #divide { grid-area: divide; } #add { grid-area: add; } #minus { grid-area: minus; }