@import "./vars.scss";

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Roboto', sans-serif; // font-family: Verdana, Geneva, sans-serif;
   font-size: 18px;
   width: 100%;
   height: 100%;
}

html {
   min-height: 100%;
   display: flex;
}

$header-margin: .5em;
$header-icon-size: calc(1.5rem * 1);
// $header-icon-size: 100%;

header {
   display: flex;
   justify-content: space-between;
   margin-bottom: $header-margin;
   align-content: center;
   padding: 0.75em;
   border-bottom: solid var(--border-color) 1px;
   background-color: var(--primary);

   >* {
      margin: 0;
      color: white;
      background: var(--primary);
   }

   >.header-title {
      overflow: hidden;
      text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      flex-grow: 1;
      margin: 0 1em;
   }

   .header-icon-button {
      display: block;
      margin-top: auto;
      margin-bottom: auto;
      min-width: $header-icon-size;

      >svg {
         height: $header-icon-size;
         width: $header-icon-size;
      }
   }

}

.def-shadow {
   box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);
}


.ccontainer {
   margin: 0 1rem;
   max-width: 100%;
}

@media (min-width: 45rem) {
   .ccontainer {
      max-width: 50rem;
      margin: 0 auto;
   }
}