@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&family=Inter:wght@200&family=Libre+Baskerville:ital,wght@0,700;1,400&family=Pacifico&family=Smooch&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sometype+Mono:ital@1&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: white;
  margin: 0 auto;
  width: 90%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.text-3d-m {
  font-family: "Pacifico", sans-sherif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 10px;
  font-size: 85px;
  font-weight: 10px;
  color: rgb(53, 46, 46);
  text-shadow: 1px 1px #919191, 1px 2px #919191, 1px 3px #919191, 1px 4px #919191, 1px 5px #919191, 1px 6px #919191, 1px 7px #919191, 1px 8px #919191, 1px 9px #919191, 1px 10px #919191, 1px 12px 4px rgba(45, 45, 45, 0.4), 1px 16px 8px rgba(45, 45, 45, 0.4), 1px 20px 26px rgba(45, 45, 45, 0.4), 1px 40px 40px rgba(45, 45, 45, 0.4);
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
  -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
  user-select: none; /* Propriété standard */
}

.text-3d-codec {
  font-family: "Verdana", sans-sherif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 85px;
  font-weight: 10px;
  color: rgb(53, 46, 46);
  text-shadow: 1px 1px #919191, 1px 2px #919191, 1px 3px #919191, 1px 4px #919191, 1px 5px #919191, 1px 6px #919191, 1px 7px #919191, 1px 8px #919191, 1px 9px #919191, 1px 10px #919191, 1px 12px 4px rgba(45, 45, 45, 0.4), 1px 16px 8px rgba(45, 45, 45, 0.4), 1px 20px 26px rgba(45, 45, 45, 0.4), 1px 40px 40px rgba(45, 45, 45, 0.4);
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
  -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
  user-select: none; /* Propriété standard */
}

.text-3d-codec-small {
  -webkit-transform: translateY(22px);
          transform: translateY(22px);
  font-family: "Verdana", sans-sherif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 30px;
  font-weight: 10px;
  color: rgb(53, 46, 46);
  text-shadow: 1px 1px #919191, 1px 2px #919191, 1px 3px #919191, 1px 4px #919191, 1px 5px #919191, 1px 6px #919191, 1px 16px 8px rgba(45, 45, 45, 0.4), 1px 20px 26px rgba(45, 45, 45, 0.4), 1px 40px 40px rgba(45, 45, 45, 0.4);
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
  -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
  user-select: none; /* Propriété standard */
}

.maj {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -20px;
  margin-bottom: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media screen and (max-width: 475px) {
  .maj {
    font-size: 0.9rem;
  }
}

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  list-style-type: none;
  margin-bottom: 20px;
}
.navbar-nav .active a {
  color: black;
}
.navbar-nav a {
  text-decoration: none;
  padding: 10px;
  font-size: 1.5rem;
  color: rgba(71, 60, 60, 0.692);
}
@media screen and (max-width: 500px) {
  .navbar-nav a {
    font-size: 1.2rem;
  }
}
.navbar-nav li {
  color: black;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}

.empty {
  height: 20px;
}

.choise {
  margin-top: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.choise .select {
  padding: 2px;
  border-radius: 10px;
  border-width: 1px;
  border-color: black;
  font-size: 1.1rem;
  background-color: rgb(117, 192, 192);
  margin-right: 12px;
}
.choise .select:hover {
  color: white;
  background-color: black;
}

.app {
  display: grid;
  width: 350px;
  margin: 0 auto;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
  grid-template-rows: 50px repeat(7, 45px);
  grid-template-areas: "fps warning tc res res res res symbol" "seven seven  eight eight nine nine reset reset" "four four five five six six reset reset" "one one two two three three back back" "zero zero zero doubleZero equal equal equal equal" "more more minus minus memorise memorise memorise memorise" "Hour Hour Hour Hour TenHours TenHours TenHours TenHours" "TwoHours TwoHours TwoHours TwoHours TwentyHours TwentyHours TwentyHours TwentyHours";
  border: 2px solid teal;
  border-radius: 10px;
}
.app button {
  background: teal;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  outline: none;
}
.app #requal {
  grid-area: equal;
  font-size: 1.4rem;
}
.app #equal:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  background: rgb(198, 212, 212);
}
.app #memorise {
  grid-area: memorise;
}
.app .info {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 350px;
  height: 50px;
  z-index: 0;
}
.app #fps {
  grid-area: fps;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 4px;
  padding-top: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.app #warning {
  position: absolute;
  font-size: 0.9rem;
  grid-area: warning;
  background-color: red;
  border-radius: 5px;
  color: white;
  top: 0;
  left: 0;
  -webkit-transform: translateY(2px) translateX(65px);
          transform: translateY(2px) translateX(65px);
  padding-left: 5px;
  padding-right: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 500px) {
  .app #warning {
    font-size: 0.9rem;
    -webkit-transform: translateY(30px) translateX(35px);
            transform: translateY(30px) translateX(35px);
  }
}
.app #symbol {
  position: absolute;
  font-size: 2rem;
  font-weight: bold;
  grid-area: symbol;
  color: black;
  bottom: 0;
  left: 0;
  -webkit-transform: translateY(5px) translateX(5px);
          transform: translateY(5px) translateX(5px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.app .tc {
  grid-area: tc;
}
.app h3 {
  font-family: "Courrier", sans-sherif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  margin: 7px 10px 0 0;
  font-size: 2rem;
  border-radius: 4px;
  grid-area: res;
}
.app #seven {
  grid-area: seven;
  z-index: 1;
}
.app #eight {
  grid-area: eight;
  z-index: 1;
}
.app #nine {
  grid-area: nine;
  z-index: 1;
}
.app #four {
  grid-area: four;
}
.app #five {
  grid-area: five;
}
.app #six {
  grid-area: six;
}
.app #one {
  grid-area: one;
}
.app #two {
  grid-area: two;
}
.app #three {
  grid-area: three;
}
.app #clear {
  grid-area: reset;
}
.app #clear::after {
  content: "C";
  display: inline-block;
  -webkit-transform: scale(2.5);
          transform: scale(2.5);
}
.app #back {
  grid-area: back;
}
.app #back::after {
  content: "➙";
  display: inline-block;
  -webkit-transform: rotate(180deg) scale(3);
          transform: rotate(180deg) scale(3);
  padding: 0;
  margin: 0;
  border: none;
}
.app #more {
  grid-area: more;
}
.app #zero {
  grid-area: zero;
}
.app #doubleZero {
  grid-area: doubleZero;
}
.app #minus {
  grid-area: minus;
}
.app #multi {
  grid-area: multi;
}
.app #divise {
  grid-area: divi;
}
.app #Hour {
  grid-area: Hour;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.app #TwoHours {
  grid-area: TwoHours;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.app #TenHours {
  grid-area: TenHours;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.app #TwentyHours {
  grid-area: TwentyHours;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}/*# sourceMappingURL=calcul.css.map */