bigscreen.css

/*TODO screen size adjustments*/

#theme1{
  --equals-color:hsl(6, 63%, 50%);
  --equals-shadow: hsl(6, 70%, 34%);
  --equals-key-text: white;
  --key-text: black;
  --highlight-key-text: white;
  --highlight-color: hsl(225, 21%, 49%);
  --highlight-shadow: hsl(224, 28%, 35%);
  --key-front-color: hsl(30, 25%, 89%);
  --key-shadow: hsl(28, 16%, 65%);
  --main-background-color: hsl(222, 26%, 31%);
  --header-text-color: white;
  --display-text-color: hsl(220, 6%, 46%);
  --display-color: hsl(224, 36%, 15%);
  --calc-body-color: hsl(223, 31%, 20%);
}

#theme2{
  --equals-color: hsl(25, 98%, 40%);
  --equals-shadow: hsl(25, 99%, 27%);
  --equals-key-text: white;
  --key-text: hsl(60, 10%, 19%);
  --highlight-key-text: white;
  --highlight-color: hsl(185, 42%, 37%);
  --highlight-shadow: hsl(185, 58%, 25%);
  --key-front-color: hsl(45, 7%, 89%);
  --key-shadow: hsl(35, 11%, 61%);
  --main-background-color: hsl(0, 0%, 90%);
  --header-text-color: hsl(60, 10%, 19%);
  --display-text-color: hsl(60, 10%, 19%);
  --display-color: hsl(0, 0%, 93%);
  --calc-body-color: hsl(0, 5%, 81%);
}

#theme3{
  --equals-color: hsl(176, 100%, 44%);
  --equals-shadow: hsl(177, 92%, 70%);
  --equals-key-text: hsl(198, 20%, 13%);
  --key-text: hsl(52, 100%, 62%);
  --highlight-key-text: white;
  --highlight-color: hsl(281, 89%, 26%);
  --highlight-shadow: hsl(285, 91%, 52%);
  --key-front-color: hsl(268, 47%, 21%);
  --key-shadow: hsl(290, 70%, 36%);
  --main-background-color: hsl(268, 75%, 9%);
  --header-text-color: hsl(52, 100%, 62%);
  --display-text-color: hsl(52, 100%, 62%);
  --display-color: hsl(268, 71%, 12%);
  --calc-body-color: hsl(268, 71%, 12%);
}

@font-face {
  font-family: '16segments-basic';
  src: url('images/16_segments/16Segments-Basic.woff');}

body{
    width: 95vw;
    height: 95vh;
    background-color: var(--main-background-color);
    font-family: 'Spartan', sans-serif;
    font-weight: 700;
    display: flex;
    place-items: center;
}

#card{
    display:flex;
    flex-direction: column;
    width: 565px;
    margin: auto;
    border-radius: 15px;
}
.header{
    margin: 20px 0px;
    display: flex;
    flex-direction: row;
    color: var(--header-text-color);
    width: 100%;
    align-content: center;
    justify-content: space-between;
}

.header .header-text{
    font-size: xx-large;
    order:1;
    align-self: center;
}

.header-toggle{
    font-size: xx-small;
    display: flex;
    flex-direction: row;
    padding-right: 10px;
    order:2;
}

.toggle-col{
    display: flex;
    flex-direction: column;
    align-content: center;
}

.theme-ids{
    display: flex;
    width: 80%;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 5px; 
}

.header .toggle-text{
    align-self: center;
    margin-right: 5px;
    margin-top: 15px;
}

.header .toggle-trough{
    height: 20px;
    width: 70px;
    background-color: var(--calc-body-color);
    border-radius: 20px;
    display: flex;
}

.toggle-trough .toggle-dot{
  content: "";
  height: 15px;
  width: 15px;
  border: 1px solid #7b7777;
  border-radius: 100%;
  background-color: var(--equals-color);
  align-self: center;
}

#display{
    display: flex;
    width: 100%;
    align-self: center;
    height: 100px;
    margin-bottom: 10px;
    background-color: var(--display-color);
    color: var(--display-text-color);
    border-radius: inherit;
    font-family: '16segments-basic', 'Segment7Standard';
    font-size: 50pt;
}

#display p{
  position: relative;
  bottom: 55px;
  margin-left: auto;
  margin-right: 5px;
  width: 95%;
  height: 70%;
  text-align: right;
  overflow: hidden;

}
/*###################################################*/

.pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    width: 100%;
    height: 100%;
  }
  .shadow {
    position: absolute;
    top: 10;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-color: var(--key-shadow);
    will-change: transform;
    transform: translateY(2px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    /* background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100% 
    ); */
  }
  .front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 2.5rem;
    font-family: 'Spartan', sans-serif;
    font-weight: 700;
    color: var(--key-text);
    background: var(--key-front-color);
    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
   .pushable:hover {
    filter: brightness(110%);
  }
  /*
  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  } */
  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  /* .pushable:hover .shadow {
    transform: translateY(4px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  } */
  .pushable:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
  }
  .pushable:focus:not(:focus-visible) {
    outline: none;
  }

/*###################################################*/

table{
    border-spacing: 20px;
    background-color: var(--calc-body-color);
    border-radius: inherit;
    margin-top: 15px;
}

table td{
    width: 25%;
    font-size: 2em;
}
 
.highlight-key .front{
    background-color:var(--highlight-color);
    color: var(--highlight-key-text);
}

.highlight-key .shadow{
  background-color:var(--highlight-shadow);
}

.equals-key .front{
    background-color:  var(--equals-color);
    color: var(--equals-key-text);
}

.equals-key .shadow{
    background-color: var(--equals-shadow);
}






.attribution {
    font-size: 11px;
    text-align: center; 
}

.attribution a {
    color: hsl(228, 45%, 44%);
}


/* special thanks to 
https://www.joshwcomeau.com/animation/3d-button/#color-and-aesthetics
for the awesome button tutorial  

16 segment font from https://www.dafont.com/16-segments.font
*/