@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');

:root {
  /* generic */
  --gutterSm: 0.4rem;
  --gutterMd: 0.8rem;
  --gutterLg: 1.6rem;
  --gutterXl: 2.4rem;
  --gutterXx: 7.2rem;
  --colorPrimary400: #7e57c2;
  --colorPrimary600: #5e35b1;
  --colorPrimary800: #4527a0;
  --fontFamily: "Dosis", sans-serif;
  --fontSizeSm: 1.2rem;
  --fontSizeMd: 1.6rem;
  --fontSizeLg: 2.1rem;
  --fontSizeXl: 2.8rem;
  --fontSizeXx: 3.6rem;
  --lineHeightSm: 1.1;
  --lineHeightMd: 1.8;
  --transitionDuration: 300ms;
  --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
  
  /* floated labels */
  --inputPaddingV: var(--gutterMd);
  --inputPaddingH: var(--gutterLg);
  --inputFontSize: var(--fontSizeLg);
  --inputLineHeight: var(--lineHeightMd);
  --labelScaleFactor: 0.8;
  --labelDefaultPosY: 50%;
  --labelTransformedPosY: calc(
    (var(--labelDefaultPosY)) - 
    (var(--inputPaddingV) * var(--labelScaleFactor)) - 
    (var(--inputFontSize) * var(--inputLineHeight))
  );
  --inputTransitionDuration: var(--transitionDuration);
  --inputTransitionTF: var(--transitionTF);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body{   background-image: url("../Area.jpg");
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    text-align: center;

}
.navbar{
  overflow:hidden;
}

.navbar a{
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
}


.navbar a:hover{
  background-color:rgb(78, 188, 92);
  /* color:#000; */
}

.side-nav{
  height:120%;
  width:0;
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  background-color:rgb(108, 94, 133);
  opacity:0.9;
  overflow-x:hidden;
  padding-top:60px;
  transition:0.5s;
}

.side-nav a{
  padding:10px 10px 10px 30px;
  text-decoration:none;
  font-family:'Roboto slab',serif;
  font-size:22px;
  color:#ccc;
  display:block;
  transition:0.3s;
}

.side-nav a:hover{
  color:#fff;
}

.side-nav .btn-close{
  position:absolute;
  top:0;
  right:22px;
  font-size:36px;
  margin-left:50px;
}
@media(max-width:568px){
  .navbar-nav{display:none}
}
#title{
    background: #913fb7;
    opacity: 0.9;
}
    #title h1{
        color: #000;
        font-size: 5em;
		font-weight: 400;
		font-family: 'Passion One', cursive;
        margin: 0;
        text-align: center;

    }

/* Calculator box */

.calculator{
    display:inline-block;
    -webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
    -moz-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
    box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
    background-color: #913fb7;
    padding:25px 32px;
    
    height:50%;
    border-radius: 17px;
    width: 50%;
    position: relative;
    top: 150px;
}
    #theme {
        position: relative;
        left: -250px;
        width: 95%;
        top: -45px;
        font-size: 1em;
    }
    #theme select{
        width:15%;
        height: 25px;
    }
    


    Input[type=submit]{
      display:inline-block;
      background-color: #f1924e;
      padding:15px 50px;
      margin:0 0.1em 0.1em 0;
      border:0.16em solid rgba(255,255,255,0);
      border-radius:2em;
      box-sizing: border-box;
      text-decoration:none;
      font-family: 'Roboto Slab', serif;
      font-size:20px; 
      color:#ffff;
      text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
      text-align:center;
      transition: all 0.2s;
      }
      Input[type=submit]:hover{
      border-color: rgba(255,255,255,1);
      }
      @media all and (max-width:30em){
      input[type=submit]{
       display:block;
       margin:0.2em auto;
      }
      } 
      .Input {
        position: relative;
      }
      
      .Input-text {
        display: block;
        margin-top: 40px;
        padding: var(--inputPaddingV) var(--inputPaddingH);
        color: inherit;
        font-size: var(--inputFontSize);
        font-weight: inherit;
        line-height: var(--inputLineHeight);
        border: none;
        border-radius: 0.4rem;
        transition: box-shadow var(--transitionDuration);
      }
      
      .Input-text::placeholder {
        color: #B0BEC5;
      }
      
      .Input-text:focus {
        outline: none;
        box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
      }
      
      .Input-label {
        display: block;
        position: absolute;
        bottom: 50%;
        left: 1rem;
        color: #fff;
        font-family: 'Roboto slab',serif;
        font-size: var(--inputFontSize);
        font-weight: inherit;
        line-height: var(--inputLineHeight);
        opacity: 0;
        transform: 
          translate3d(0, var(--labelDefaultPosY), 0)
          scale(1);
        transform-origin: 0 0;
        transition:
          opacity var(--inputTransitionDuration) var(--inputTransitionTF),
          transform var(--inputTransitionDuration) var(--inputTransitionTF),
          visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
          z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
      }
      
      .Input-text:placeholder-shown + .Input-label {
        visibility: hidden;
        z-index: -1;
      }
      
      .Input-text:not(:placeholder-shown) + .Input-label,
      .Input-text:focus:not(:placeholder-shown) + .Input-label {
        visibility: visible;
        z-index: 1;
        opacity: 1;
        transform:
          translate3d(0, var(--labelTransformedPosY), 0)
          scale(var(--labelScaleFactor));
        transition:
          transform var(--inputTransitionDuration),
          visibility 0ms,
          z-index 0ms;
      }
      .input-label {
        display: block;
        position: absolute;
        bottom: 10%;
        left: 1rem;
        color: #fff;
        font-family: 'Roboto slab',serif;
        font-size: var(--inputFontSize);
        font-weight: inherit;
        line-height: var(--inputLineHeight);
        opacity: 0;
        transform: 
          translate3d(0, var(--labelDefaultPosY), 0)
          scale(1);
        transform-origin: 0 0;
        transition:
          opacity var(--inputTransitionDuration) var(--inputTransitionTF),
          transform var(--inputTransitionDuration) var(--inputTransitionTF),
          visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
          z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
      }
      
      .Input-text:placeholder-shown + .input-label {
        visibility: hidden;
        z-index: -1;
      }
      
      .Input-text:not(:placeholder-shown) + .input-label,
      .Input-text:focus:not(:placeholder-shown) + .input-label {
        visibility: visible;
        z-index: 1;
        opacity: 1;
        transform:
          translate3d(0, var(--labelTransformedPosY), 0)
          scale(var(--labelScaleFactor));
        transition:
          transform var(--inputTransitionDuration),
          visibility 0ms,
          z-index 0ms;
      }
      
select {
  position: relative;
  top: 80%;
  bottom:45px ;
  left: 50%;
  transform: translate(-50%, -50%);
}

select {
  background-color: #f1924e;
  color: white;
  padding: 12px;
  width: 250px;
  border: none;
  font-size: 20px;
  font-family:'Roboto Slab',serif ;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}
select::before {
  content: "\f13a";
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 45px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

select:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

select  {
  padding: 30px;
}