:root {
    --mainColor: #ff9800
}

body {
    background-attachment: scroll;
    
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.is-mac-os .win,.mac {
    display: none
}

.is-mac-os .mac {
    display: inline-block
}

h1 {
    color: #ee1919;
    font-size: 30px;
    margin-bottom: 0;
    text-align: center
}

h1 a {
    color: gray;
    font-size: 28px;
    text-decoration: none
}

h1 img {
    width: 120px
}

.ads {
    font-size: 16px;
    line-height: 32px;
    margin: 10px auto 30px;
    text-align: center
}

.ads img {
    position: relative;
    top: 10px
}

.ads a {
    background: linear-gradient(to bottom,var(--mainColor) 0,var(--mainColor) 100%);
    background-size: 3px 3px;
    color: #202124;
    color: #000;
    margin-right: 10px
}

.ads a,.ads a:hover {
    background-position: 0 100%;
    background-repeat: repeat-x;
    text-decoration: none
}

.ads a:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%27squiggle-link%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 xmlns:ev=%27http://www.w3.org/2001/xml-events%27 viewBox=%270 0 20 4%27%3E%3Cstyle type=%27text/css%27%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX%280%29;}to {transform:translateX%28-20px%29;}}%3C/style%3E%3Cpath fill=%27none%27 stroke=%27%23ff9800%27 stroke-width=%272%27 class=%27squiggle%27 d=%27M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3%27/%3E%3C/svg%3E");
    background-size: auto 6px
}

.ads .hl {
    background-color: #ffa8a8;
    background-color: #f34b4b;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    margin-right: 5px;
    padding: 3px 10px
}

.ads .wavy {
    text-decoration: #f34b4b wavy underline
}

#steps {
    align-items: center;
    display: flex;
    justify-content: space-around
}

.control {
    font-size: 14px;
    margin-bottom: 10px
}

.left,.right {
    border-radius: 10px;
    width: 40%
}

.center {
    height: 240px;
    margin: 1rem;
    text-align: center
}

#step1 {
    background-color: #4285f4
}

#step1,#step2 {
    border-radius: 10px;
    padding: 20px
}

#step2 {
    background-color: #ff9800;
    margin-top: 20px
}

#step4 {
    background-color: #008b8b;
    border-radius: 10px;
    padding: 20px
}

.step-title {
    color: #fff
}

@media (max-width: 768px) {
    #steps {
        flex-direction:column
    }

    .left,.right {
        width: 90%
    }

    .center {
        height: auto
    }
}

#make-btn {
    background-color: #f34b4b;
    border: 0;
    border-radius: 10%;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding: 1rem
}

#zsm {
    position: relative
}

#zsm img {
    display: none;
    left: -140px;
    position: absolute;
    top: 30px
}

#jy-file,#srt {
    height: 200px
}

#jy-file,#new-jy-file,#srt {
    border: 0;
    border-radius: 10px;
    outline: none;
    width: 100%
}

#new-jy-file {
    height: 550px
}

#saveAsFilePicker {
    display: none
}

.button-16 {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #3c4043;
    cursor: pointer;
    font-family: arial,sans-serif;
    font-size: 14px;
    height: 36px;
    line-height: 27px;
    min-width: 54px;
    padding: 0 16px;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    white-space: pre
}

.button-16:hover {
    border-color: #dadce0;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    color: #202124
}

.button-16:focus {
    border-color: #4285f4;
    outline: none
}

input[type=file] {
    color: #fff
}