body, input, textarea, select {
        font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica,   Arial, sans-serif;
    }
    
    body {
        background-color: #FFFFFF;
        text-align: center;
        color: #555;
        padding-bottom: 2em;
    }
    
    .examples {
        list-style-type: none;
        max-width: 900px;
        margin: 0 auto;
        text-align: left;
        padding-left: 0;
    }
    
    examples li {
     padding-left: 0;
    }
    
    .examples .ui {
        width: 18.75rem;
        text-align: center;
    }
    
    .examples .ui, .examples pre {
        display: inline-block;
        vertical-align: top;
        float: left;
    }
    
    .examples .ui p {
        text-align: center;
        margin-bottom: 0;
        padding: 0 2em;
    }
    
    p {
        max-width: 51.625rem;
        margin: 1.875em auto;
        font-size: 1.0625em;
        font-weight: 300;
        line-height: 1.5625em;
        text-align: left;
    }
    
    .examples .ui button {
        margin-top: .75em;
    }
    
    
    .btnmsg {
        background: linear-gradient(135deg,#727cf5 0,#8F75DA 160%);
        color: #fff;
        border: 0;
        padding: .8em 1.5em;
        -webkit-box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        font-size: 1.125em;
        font-weight: 500;
        border-radius: .25em;
        cursor: pointer;
        white-space: nowrap;
        width: 216px;
    }
    .examples .ui p {
        display: none;
    }
    .examples .ui {
        width: auto;
    }
    
    .btnmsg:hover {
        background: #4e5bf2;
    }
    
    .btnmsg:active {
        background: #3645f1
    }
    
    .btnmsg:focus{
        -webkit-box-shadow: 0 0 0 0.2rem rgba(135, 144, 247, .5) !important;
        box-shadow: 0 0 0 0.2rem rgba(135, 144, 247, .5) !important;
    }
@media (min-width: 769px){
    ul li {
        position: absolute;
    }
    ul li {
        position: absolute;
    }
    ul li:first-child {
        left: 10%;
        top: 28%;
    }
    ul li:nth-child(2) {
        left: 50%;
        margin-left: -5.8%;
        top: 28%;
    }
    ul li:nth-child(3) {
        right: 10%;
        top: 28%;
    }
    ul li:nth-child(4) {
        top: 50%;
        margin-top: 4%;
        left: 10%;
        bottom: 30%;
    }
    ul li:nth-child(5) {
        top: 50%;
        margin-top: 4%;
        left: 50%;
        margin-left: -5.8%;
        bottom: 30%;
    }
    ul li:nth-child(6) {
        top: 50%;
        margin-top: 4%;
        right: 10%;
    }
    ul li:nth-child(7) {
        bottom: 10%;
        left: 10%;
    }
    ul li:nth-child(8) {
        bottom: 10%;
        left: 50%;
        margin-left: -5.8%;
    }
    ul li:last-child {
        right: 10%;
        bottom: 10%;
    }
}
@media (max-width: 768px) {
    .examples{
    margin-top: 28px
    }
    ul li {
        position: relative;
        float: left;
        margin-bottom: 1em;
    }
    .examples .ui p {    
        display: none;
    }
}
        
.btnmsg {
    background: linear-gradient(135deg,#727cf5 0,#8F75DA 160%);
    color: #fff;
    border: 0;
    padding: .8em 1.5em;
    -webkit-box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    font-size: 1.125em;
    font-weight: 500;
    border-radius: .25em;
    cursor: pointer;
    white-space: nowrap;
    width: 216px;
}
h1{
    margin-top: 5%;
}