@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic%7Croboto";* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth
}

:root {
    --gradient-2: #fc1795 80%, #e99e13 50%;
    --font-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --font-primary: "Open Sans";
    --border-1: 1px solid #333
}

body {
    margin: auto;
    max-width: 1200px;
    background-color: #ececec;
    color: #222;
    font-family: var(--font-primary),var(--font-default);
    font-size: 16px;
    line-height: 1.625
}

::selection {
    background-color: #eca600;
    color: #fff
}

a {
    text-decoration: none;
    color: #fff
}

a:hover {
    color: #949494
}

.blog-pager,.comments,.date-header,.feed-links,.home-link,.status-msg-wrap,a.quickedit {
    display: none
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: linear-gradient(100deg,#ebb537,#f8b737,#eca600)
}

header>a {
    color: #fff;
    font-size: 30px;
    margin: 0 0 0 1em;
    font-family: open sans,roboto;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 70px;
    overflow: hidden;
    font-weight: 600
}

header>a:hover {
    color: #fff
}

nav {
    font-size: 14px;
    line-height: 70px;
    font-weight: 500;
    text-transform: uppercase;
    overflow: hidden
}

nav a {
    padding: 0 5px;
    font-size: 13px;
    display: inline-block;
    transition: .17s all
}

nav a:hover {
    color: #fff;
    background: #111
}

.showcase {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    background-size: cover;
    overflow: hidden;
    color: #fff;
    z-index: -1;
    text-align: center
}

.show {
    height: 100%;
    background: -o-linear-gradient(bottom,#000000de,#000000d2);
    background: -webkit-gradient( linear,left bottom,left top,from(#000000de),to(#000000d2) );
    backdrop-filter: blur(5px);
    background: linear-gradient(0deg,#000000de,#000000d2)
}

.show-cnt {
    max-width: 90%;
    padding: 1em 2em;
    margin: auto
}

.show-img {
    max-width: calc(5vw + 3em);
    margin: 0 auto
}

.show ul {
    margin: 1em 0
}

.show li {
    font-size: 18px;
    list-style-type: none
}

.show p {
    font-size: 17px;
    margin: 10px 0;
    color: #fff;
    text-align: center;
    line-height: 1.8em
}

.show li::before {
    content: "\25B6  "
}

.cnt {
    padding: 10px 20px;
    background-color: #fff
}

.cnt a {
    color: #f67a24
}

.cnt a:hover {
    text-decoration: underline;
    color: #e47434
}

p {
    margin: 26px 0;
    padding: 0;
    color: #333;
    font-size: 17px;
    line-height: 2.3em
}

h1,h2,h3,h4,h5,h6 {
    user-select: none;
    font-family: open sans,sans-serif;
    color: #111;
    font-weight: 400;
    margin: 6px 0
}

h1.title {
    text-align: center;
    font-family: open sans,roboto,sans-serif;
    font-size: 27px;
    color: #fff;
    font-weight: 300
}

.entry-title,.post-title {
    text-align: center;
    font-size: 40px;
    color: #4e4e4e;
    font-weight: 700;
    padding: 1em .1em;
    margin: 0;
    background-color: #fff
}

hr {
    margin: 1em 0;
    height: 1px;
    border: none;
    background-color: #ccc
}

.fh-1 {
    color: #fff;
    font-weight: 400;
    background: linear-gradient(100deg,#ebb537,#f8b737,#eca600);
    width: auto;
    margin: 1em 0;
    font-size: 25px;
    line-height: 1;
    padding: 14px;
    border-left: 10px solid #1f1f21
}

.fh-2 {
    color: #fff;
    background: #212121;
    display: inline-block;
    padding: 5px 12px;
    box-shadow: 0 0 7px #00000040;
    border-left: 40px solid #242424
}

.fh-3 {
    margin: 0;
    background: #d37f01;
    color: #fff
}

.dsn-1 {
    padding: 1em;
    border: 1px solid #d37f01
}

.icon {
    color: #000;
    text-align: center;
    display: block;
    margin: auto;
    font-size: 50px
}

.ss {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    user-select: none
}

.ss img {
    max-width: 49%;
    flex: 1;
    margin: 0 5px;
    pointer-events: none
}

.fh-sm {
    font-weight: 600;
    margin: 1em auto;
    font-size: calc(0.3vw + 1em)
}

.fh {
    font-weight: 700;
    margin: 1em auto;
    font-size: calc(0.5vw + 1.3rem)
}

footer {
    font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;
    color: #fff;
    background: #222;
    padding: 10px 40px;
    line-height: 3.5em;
    color: #fff;
    font-size: 13px;
    text-align: center;
    letter-spacing: 1px;
    font-variant-caps: all-petite-caps
}

footer a,footer a:hover {
    color: #fff
}

.links a {
    padding: 0 10px;
    display: inline-block
}

footer p {
    color: #fff;
    text-transform: unset;
    font-size: 12px;
    opacity: .8;
    font-variant-caps: all-small-caps
}

.links a:hover {
    opacity: .7
}

.center {
    text-align: center
}

ul {
    margin: 1em 0 1em 2.5em
}

li {
    margin: 6px 0
}

img {
    -webkit-user-drag: none;
    display: block;
    margin: 1em auto;
    max-width: 70%
}

table {
    margin: auto;
    width: 100%;
    border-collapse: collapse
}

th {
    font-weight: 700;
    background: #f67b243d
}

td,th {
    text-align: left;
    padding: 7px 5px;
    vertical-align: top
}

tr:hover {
    background-color: #e4e4e4a2
}

tr:nth-child(odd) {
    background-color: #e4e4e44d
}

.btndiv {
    margin: 3em 0
}

.btndiv a {
    color: #fff
}

.btndiv a:hover {
    color: #fff
}

a.btn {
    border: 2px solid #ea8d01;
    font-size: calc(0.2vw + 1em);
    border-radius: 5px;
    font-weight: 600;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 11px 20px;
    margin: 1.5em auto;
    color: #000;
    font-variant-caps: all-small-caps;
    letter-spacing: 1px;
    -webkit-box-shadow: 0 5px 10px 0 #00000052;
    box-shadow: 0 5px 10px 0 #00000052;
    -webkit-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

a.btn:hover {
    text-decoration: none;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    color: #ea8d01;
    border-color: #ea8d01a9;
    opacity: unset
}

a.download {
    color: #fff;
    border-radius: 4px;
    font-size: 20px
}

.text-glow {
    user-select: none;
    display: block;
    background: -o-linear-gradient(60deg,var(--gradient-2));
    background: linear-gradient(30deg,var(--gradient-2));
    color: #fff;
    font-weight: 700;
    margin: auto;
    padding: .3em 1em;
    border-radius: 5px;
    font-size: calc(0.7vw + 1.5em);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-variant-caps: titling-caps;
    text-shadow: #ea076a 0 5px 20px
}

.typewrite {
    margin: 0
}

.typewrite .wrap {
    border-right: .1em solid #ffffff31
}

.faq {
    font-weight: 700;
    font-size: 20px;
    color: #fd3800
}

.faq::before {
    font-family: FontAwesome;
    content: "\f0a4  "
}

.ans {
    list-style-type: "";
    font-size: 16px;
    margin: 0 0 15px 10px
}

.ans::before {
    font-family: FontAwesome;
    content: "\f0da  "
}

.toc {
    display: inline-block;
    margin: 1em 0;
    padding: 10px;
    border: 1px solid #2727270f;
    background-color: #00000009
}

.toc li {
    margin: 0 1em;
    list-style-type: square
}

.toc a {
    color: #f8801d
}

.toc a:hover {
    text-decoration: underline
}

.dl-wrapper {
    display: -ms-grid;
    display: grid;
    place-items: center;
    margin: 2em 0
}

.dl-wrapper p {
    margin: .2em 0
}

.share {
    background-color: #fff;
    color: #fff;
    text-align: center;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.share ul {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 2;
    margin: 0
}

.share ul li {
    list-style: none;
    flex: 1;
    width: 12%;
    padding: 0;
    float: left;
    margin: 1%
}

.share ul li a {
    padding: 15px 0;
    color: #fff;
    display: block;
    border-radius: 2px;
    transition: .4s
}

.whatsapp {
    background-color: #25d366
}

.facebook {
    background-color: #3b5998
}

.twitter {
    background-color: #55acee
}

.telegram {
    background-color: #08c
}

.pinterest {
    background-color: #cc2127
}

.share a:hover {
    color: #fff;
    opacity: .9
}

.reviews {
    box-shadow: 0 0 4px 1px #d6d6d6;
    font-family: roboto,sans-serif;
    padding: 10px 20px;
    border-radius: 3px;
    line-height: 2em
}

.reviews span {
    display: block;
    font-size: 30px;
    margin: 10px 0
}

.reviews img {
    border-radius: 20%;
    max-width: 6em;
    margin: 1em 0
}

.boxdiv {
    background: #f5f5f5;
    margin: 4em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.box {
    flex: 1;
    border-radius: 5px;
    text-align: center;
    margin: 10px
}

.boxtxt {
    background: #f5723077;
    font-size: 30px;
    color: #fff;
    text-align: center;
    border-right: 5px solid #fff;
    border-left: 5px solid #fff
}

#countdown {
    display: flex;
    border: 8px solid #afafaf;
    background: #232323;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-family: system-ui;
    margin: 1em auto;
    text-align: center;
    width: 100px;
    height: 100px;
    font-size: 40px;
    color: #fff;
    user-select: none
}

#hidden-cnt {
    display: none
}

@media screen and (max-width: 720px) {
    .entry-title,.post-title {
        font-size:25px
    }

    header {
        flex-direction: column
    }

    header>a {
        margin: 0
    }

    nav {
        line-height: 50px
    }

    .cnt {
        padding: 1em
    }

    img {
        max-width: 100%
    }

    .show-img {
        max-width: 50%;
        float: none;
        padding: 0;
        display: block;
        margin: auto
    }

    .boxdiv {
        flex-direction: column;
        margin: 0
    }

    .box {
        margin: 1em 0
    }

    .ss img {
        max-width: 100%;
        margin: 5px 0
    }

    footer {
        text-align: center;
        padding: 0
    }

    .links {
        font-size: 11px
    }

    .share {
        width: 100%
    }

    .reviews {
        text-align: center
    }

    .reviews img {
        margin: 1em auto
    }
}























  
#readout {
    font-size: 12rem;
    font-family: sans-serif;
    line-height: 12rem;
  }
  
  button {
    padding: 1rem 2rem;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 1.5rem;
    text-transform: uppercase;
  }
  
  button:focus {
    outline: none;
  }
  
  #show-mph {
    border-radius: 10px 0px 0 10px;
    margin-right: -6px;
  }
  
  #show-kmh {
    border-radius: 0px 10px 10px 0px;
  }
  
  .selected {
    background-color:rgb(238,168,6);
    color: #fff;
  }
  
  #start {
    margin-top: 1rem;
    background-color: hsl(114, 96%, 92%);
  }
  
  #start.selected {
    background-color: hsl(0, 96%, 92%);
    color: #000;
  }
  
  body.dark {
    background: radial-gradient(ellipse at center, #1b1b1b 0%, #000000 100%);
    color: #01a003;
  }
  
  body.dark button {
    background-color: #2a2a2a;
    border: 1px solid #01a003;
    color: #01a003;
  }
  
  body.dark .selected {
    background-color: #01a003;
    color: #fff;
  }
  
  body.dark #start {
    margin-top: 1rem;
    background-color: hsl(114, 100%, 18%);
  }
  
  body.dark #start.selected {
    background-color: hsl(0, 100%, 18%);
    color: #fff;
    border-color: hsl(15, 100%, 18%);
  }