:root {
    --microtip-transition-duration: .3s;
    --microtip-transition-delay: 0s;
    --microtip-transition-easing: ease-in-out;
    --microtip-font-size: 13px;
    --microtip-font-weight: normal;
    --microtip-text-transform: none
}
.outline {
    background-color: #fff;
    border: dashed 1px #36c;
    padding: 14px 30px;
    min-width: 120px;
    display: inline-block;
    text-align: center;
    line-height: 1.5
}
.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center
}

.nav__item {
    flex: 1;
    position: relative;
    margin: 10px
}

.nav__link {
    text-decoration: none;
    color: #36c
}

.mast {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 80px
}

.mast__inner {
    max-width: 510px;
    text-align: center
}

.mast__input {
    font-size: 20px;
    font-family: "Source Code Pro", "Inconsolata", "Droid Sans Mono", monospace;
    border: 0;
    outline: 0;
    background-color: #36c;
    color: #fff;
    padding: 20px 60px;
    border-radius: 4px;
    margin-bottom: 12px
}

.demo {
    margin: 80px 0;
    background-color: #eff3fd;
    width: 100%;
    border: solid 1px #d3dcf2;
    border-radius: 3px;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.demo__inner {
    display: inline-block;
    margin: auto;
    text-align: center
}

.demo__center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 30px
}