File: assets/css/main.css

/* main.css */
@import url("normalize.css");
@import url(style.css);
@font-face {
    font-family: 'scriptinaregular';
    src: url('assets/fonts/scriptina-webfont.eot');                                       /* IE9 Compat Modes */
    src: url('assets/fonts/scriptina-webfont.eot?#iefix') format('embedded-opentype');    /* IE6-IE8 */
    src: url('assets/fonts/scriptina-webfont.woff') format('woff'),                       /* Modern Browsers */
         url('assets/fonts/scriptina-webfont.woff2') format('woff2'),                     /* Modern Browsers */
         url('assets/fonts/scriptina-webfont.ttf') format('truetype'),                    /* Safari, Android, iOS */
         url('assets/fonts/scriptina-webfont.svg#scriptinaregular') format('svg');        /* iPad, iPhone with OS less than or equal to 4.1 */
    font-weight: normal;
    font-style: normal;
}

input[type="search"]::placeholder { color: #ffdd55; }

.included_font {
    font-family: scriptinaregular;
    font-size: 40px;
    border: #000 solid 1px;
    box-shadow: 15px 15px 15px rgb(16.9%, 36.1%, 62.7%);
    width: 500px;
    margin: 0 auto;
}

p::selection {
    color: #ff0000;
    background: #ffffff;
}

#frame {
    background: gray;
    background-image: linear-gradient(180deg, #909090 0%, #3d3d3d 50%, #404040 100%);
    color: #fff;
    font: normal 10px/12px Verdana, Arial, Helvetica, sans-serif;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    left: 0px;   /* 0px will be replaced with 0 */
    top:0050px;  /* 0050px will be replaced with 50px */
}

#point,
#mid,
#cap {
    display: block;
    position: relative;
    margin: 10px auto;
    width: 150px;
    height: 50px;
}

#point {
    background: #ffdd88;    /* #ffdd88 will be replaced with #fd8 */
    box-shadow: 10px 10px 10px rgb(43, 92, 160);
    border: 1px solid #747270;
    border-radius: 8px;
}

#mid {
    background: #999999;    /* #999999 will be replaced with #999 */
    box-shadow: 10px 10px 10px hsl(214.9,57.6%,39.8%);
}

#cap {
    background: #1e5799;
    background: linear-gradient(to top, #1e5799 0%, #b2cff0 100%);
    box-shadow: 10px 10px 10px rgba(43, 92, 160, 0.5);
    transition: height 0.25s ease .1s;  /* 0.25s will be replaced with .25s */
}

@viewport {
    width: device-width;
    zoom: 1;
    max-zoom: 2;
}

@keyframes eye {
    90% { transform: none; }
    95% { transform: scaleY(0.1); }
}

@document regexp("https:.*") {
    .ssl {
        display: block;
        background: #5bd4b6;
        color: #fff;
        padding: 20px;
        box-shadow: none;
    }
}