/* Start - Global Styles */

html {
  overflow:                 auto;
  scroll-behavior:          smooth;
  display:                  grid;
  height:                   100%;
  padding:                  16px;
  box-sizing:               border-box;
  transition-duration:      1s;
}

body {
  margin:                   0;
  background-color:       #0a2840;
  color:                  black;
  font-family:              Space Grotesk, system-ui, sans-serif;
  -webkit-font-smoothing:   antialiased;
  font-size:                .875rem;
  line-height:              1.25rem;
  color:                  white;
}

/* End - Global Styles */

/* Start - Layout */

body {
  position: relative;
  display: grid;
  grid-template-areas:
      "head"
      "main"
      "foot";
  grid-template-rows: 60px 1fr 60px;
}

header {
  grid-area:              head;
  height:                 60px;
  display:                grid;
  background-color:       rgb(0,0,0);
  box-shadow:             0 0 8px 0 rgba(0, 0, 0, 1);
  padding:                0 16px;
  border-radius:          8px;
}

.logo {
  height:                 30px;
  line-height:            28px;
  text-decoration:        none;
  text-align:             center;
  padding:                0;
  font-size:              x-large;
  margin:                 auto 0;
  border-bottom:        whitesmoke 2px solid;
  border-top:             2px solid whitesmoke;
  font-style:             italic;
  box-shadow:             0 0 8px 0 rgba(0, 0, 0, 1);
  background-color :    #0a2840;
  color:                whitesmoke;
}

main {
  position:               relative;
  grid-area:              main;
  margin-top:             16px;
  margin-bottom:          16px;
  border:                 16px solid black;
  border-radius:          8px;
  background-color:     black;
  box-shadow:             0 0 8px 0 rgba(0, 0, 0, 1);
}

footer {
  display:                grid;
  grid-template-rows:     1fr;
  background-color :    black;
  text-align:             center;
  font-style:             italic;
  padding:                0 16px;
  box-shadow:             0 0 8px 0 rgba(0, 0, 0, 1);
  color:                  whitesmoke;
  height:                 60px;
  grid-area:              foot;
  border-radius:          8px;

  /* Animation Programming with height-max property */
  position:               absolute;
  bottom:                 0;
  left:                   0;
  right:                  0;
}

footer > button {
  display:                grid;
  border-top:             2px whitesmoke solid;
  border-bottom:          2px solid whitesmoke;
  border-radius:          6px;
  text-decoration:        none;
  text-align:             center;
  padding:                0;
  font-size:              x-large;
  margin:                 auto 0;
  font-style:             italic;
  box-shadow:             0 0 8px 0 rgba(0, 0, 0, 1);
  color:                whitesmoke;
  height:                 30px;
  background-color :    #0a2840;
}

/* max-height is a programmed transition effect */
.footerClose {
  max-height: 60px;
  transition: max-height 1.5s ease-out;
}

.footerOpen {
  max-height: 100%;
  transition: max-height 1.5s ease-out;
}

.bodyOpen {
  max-height: 100%;
  transition: max-height 1.5s ease-out;
}

.bodyClose {
  max-height: 0px;
  transition: max-height 1.5s ease-out;
}

/* End - Layout */

/* Start - Inner Box */

.border {
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.inner {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  border-radius: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  box-sizing: content-box;
  padding-bottom: 16px;
}

.inner::-webkit-scrollbar {
  background-color:           grey;
  border-top-right-radius:      6px;
  border-bottom-right-radius:   6px;
  background:                   linear-gradient(124deg, #e8891d, #e8b71d, #e3e81d, #1de840, #1ddde8);
  background-size:              1800%;
}

.inner::-webkit-scrollbar-track {
  background-color:           aquamarine;
  margin:                       16px;
  background:                   linear-gradient(124deg, #e8891d, #e8b71d, #e3e81d, #1de840, #1ddde8);
  background-size:              1800%;
}

.inner::-webkit-scrollbar-thumb {
  background-color:           aquamarine;
}