main {
            display: flex;
            flex-direction: row-reverse;
        }

        * {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.smol-sidebar {
  display: grid;
  grid-template-columns: minmax(min(50vw, 30ch), 1fr) fit-content(20ch);
  /*display: flex;
  flex-wrap: wrap;*/
}

h1 {
  text-shadow: 2px 2px 2px #fff;
  text-align: center;
}
h3 {
  text-shadow: 2px 2px 2px #aaa;
  text-align: center;
}

phone-book {
  display: block;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

phone-book h1 {
  font-family: sans-serif;
  font-style: italic;
  background: black;
  color: white;
  text-shadow: 2px 2px 2px gray;
  text-align: right;
  padding:3px;
  width: 100%;
  margin-bottom: 0;
}

phone-book .subtitle {
  font-family: 'Consolas Bold',monospace;
  font-size: 1.5em;
  text-align: right;
  width: 100%;
  display: block;
  margin-top: 0;
  padding-right: 0.2em;
}


phone-book a, phone-book a:visited {
  color: black;
  text-decoration: none;
}
phone-book .subtitle:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  font-style: italic;
}

.calculator__display {
  margin-bottom:1em;
  font-size: 2em;
  font-family: 'Roboto Condensed', sans-serif;
}

#center-bottom {
  font-family: 'Roboto Condensed', sans-serif;
}

dl {
  max-width: 80ch;
  margin-left: 2vw;
  margin-right: 2vw;
  font-size: 1em;
  line-height: 1.3rem;
}

dl.cast-list {
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        display: block;
        font-family: 'benne', serif;
    }

    dl.cast-list div {
        /* Setup the DT (character) and DD (cast) items as a flexible layout. */
        display: flex ;
        margin: -5px 0 0 0;
    }

    dl.cast-list dt {
        /*
            Setup the DT element as a NESTED flexible layout. This will control the
            IMPLICIT TEXT element (character) and the :after pseudo-element (dots)
            layouts.
        */
        display: flex ;
        /* Setup the DT (character) element to grow and take-up space. */
        flex: 1 1 auto ;
        margin: 0;
    }

    dl.cast-list dt:after {
        border-bottom: 2px dotted #787878 ;
        content: "" ;
        /*
            Setup the pseudo-element (dots) to grow and take-up space. This will fill
            the white-space with "dots" because it growing inside of another layout
            which is also growing.
        */
        flex: 1 1 auto ;
        margin: 0px 0px 10px 0px ;
    }

    dl.cast-list dd {
        /* Setup the DD (cast) element to shrink, allow for dots to fill space. */
        flex: 0 1 auto ;
        margin: 0px 0px 0px 0px ;
    }

    dd {
    text-transform: uppercase;
    font-size: smaller;
}

rotary-phone {
  padding: 2vw;
}

/*rotary-phone, phone-book {
  flex-basis: 50%;
  flex-grow: 1;
}*/

#dial-outer {
  position: /*absolute; */ relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border: 1px solid #ffd;
  border-radius: 50%;
  box-shadow: 2px 2px 3px #888, inset 2px 2px 3px #888, inset -2px -2px 3px #ffd,
    inset 2px -2px 3px #ffd, inset -2px 2px 3px #ffd, -2px -2px 3px #ffd,
    2px -2px 3px #ffd, -2px 2px 3px #ffd;
  z-index: 1;
}

#dial-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 484px;
  height: 484px;
  background-color: #ccc;
  border: 1px solid #ffd;
  border-radius: 50%;
  box-shadow: -2px -2px 3px #ffd, 2px 2px 3px #888, inset -2px -2px 3px #ffd,
    inset 2px 2px 3px #888, inset 2px -2px 3px #ffd, inset -2px 2px 3px #ffd,
    2px -2px 3px #ffd, -2px 2px 3px #ffd;
  z-index: 2;
}

#dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  padding-top: 40px;
  background-image: url(dial-label.png);
  border-radius: 50%;
  box-shadow: -2px -2px 3px #888, 2px 2px 3px #888, -2px 2px 3px #888,
    2px -2px 3px #888;
  overflow: hidden;
  text-align: center;
  z-index: 3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

span {
  display: block;
  font-size: 15px;
}

#center-bottom {
  display:none;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translatex(-50%);
  width: 280px;
  height: 85px;
  background-color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #777;
  z-index: 4;
}

#stop {
  position: relative;
  top: -30%;
  left: 50%;
  transform: translate(50px, 123px) rotate(-27.5deg);
  width: 70px;
  height: 130px;
  border-bottom: 6px solid rgba(0, 0, 0, 1);
  border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%;
  z-index: 6;
}

svg {
  margin-left: -10px;
}

button, .btn {
  font-family: 'Gill Sans Bold', sans-serif;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffd;
  border: 2px solid #aaa;
  border-radius: 50%;
  font-size: 28px;
  line-height: 45px;
  text-align: center;
  transition-timing-function: linear;
  cursor: pointer;
  z-index: 999;
}

#btn0 {
  transform: translate(-200px, -104px);
  transition-duration: 0.5s;
  z-index: 999;
}

#btn1 {
  transform: translate(-159px, -164px);
  z-index: 999;
}

#btn2 {
  transform: translate(-97px, -206px);
  z-index: 999;
}

#btn3 {
  transform: translate(-23px, -219px);
  z-index: 999;
}

#btn4 {
  transform: translate(49px, -204px);
  z-index: 999;
}

#btn5 {
  transform: translate(109px, -164px);
  z-index: 999;
}

#btn6 {
  transform: translate(150px, -104px);
  z-index: 999;
}

#btn7 {
  transform: translate(164px, -34px);
  z-index: 999;
}

#btn8 {
  transform: translate(155px, 35px);
  z-index: 999;
}

#btn9 {
  transform: translate(120px, 95px);
  z-index: 999;
}

phone-book {
    border: black 2px solid;
}


details {
    width:100%;
}

summary {
    cursor: pointer;
}

details p {
    max-width: 80ch;
    font-family: monospace;
    margin-left: auto;
    margin-right: auto;
}

dl a {
    text-decoration: none;
    color:inherit;
    font-family: inherit;
    cursor:default;
}