styles.css

    /***Page sizing and fonts***/
    
    html,
    body {
        width: 100%;
        margin: 0;
        background: #121212;
        font-family: Roboto, "Google Sans", sans-serif;
    }
    
    .card {
        background-color: #121212;
        margin: 30px auto 0;
        max-width: 450px;
        padding: 48px 40px 36px;
        border-radius: 8px;
        border: 1px solid #333333;
    }
    /***Header part***/
    
    .header {
        width: 100%;
        height: 100%;
    }
    
    .header img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    
    h1 {
        color: #FFF;
        font-size: 24px;
        text-align: center;
        font-family: "Google Sans", Roboto, sans-serif;
        font-weight: 400;
    }
    /***Form part***/
    
    .form {
        padding: 24px 0 0;
    }
    
    .input {
        display: inline-block;
        width: 215px;
        margin: 8px auto;
        text-align: center;
    }
    
    .input:first-child {
        margin-right: 16px;
    }
    
    input {
        width: 215px;
        height: 20px;
        border-radius: 4px;
        background-color: #121212;
        border: 1px solid #333333;
        color: #fff;
        padding: 13px 0;
        outline: none;
        text-indent: 15px;
        font-size: 15px;
        transition: border-color 0.1s;
    }
    
    input:focus {
        border: 2px solid #1a73e8;
        padding: calc(13px - 1px) 0;
        width: calc(100% - 2px);
        text-indent: 14px;
    }
    
    input:focus:required:invalid {
        border-color: #d93025;
    }
    
    input::placeholder {
        color: #80868b;
    }
    
    #copied {
        color: #ffffff;
        opacity: 0;
        transition: .28s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    #generate {
        background-color: #0060ff;
        border-radius: 4px;
        box-shadow: none;
        width: 96px;
        font-size: 15px;
        color: #fff;
        padding: 11px 15px;
        border: 0;
        outline: none;
        text-align: center;
        font-family: "Google Sans", Roboto, sans-serif;
        transition: .28s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    #generate:hover {
        background-color: #287ae6;
        box-shadow: 0 1px 1px 0 rgba(66, 133, 244, 0.45), 0 1px 3px 1px rgba(66, 133, 244, 0.3);
    }
    
    #generate:focus {
        background-color: #3367d6;
    }
    
    .output {
        margin: 8px auto 0;
        min-width: 400px;
        text-align: center;
    }
    
    #output {
        min-width: 100%;
        max-height: 24em;
        min-height: 8em;
        resize: vertical;
        border-radius: 4px;
        border: 1px solid #333333;
        background-color: #121212;
        color: #fff;
        outline: none;
        padding: 0;
        font-size: 8px;
    }
    
    .footer,
    a:link,
    a:visited,
    a:hover,
    a:active {
        color: #757575;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        padding: 12px 0;
    }
    /***For mobile devices***/
    
    @media only screen and (max-width: 601px) {
        .card {
            background-color: fff;
            margin: 0;
            max-width: 450px;
            padding: 48px 40px 0;
            border-radius: 0;
            border: 0;
        }
        .input {
            width: 100%;
            margin: 8px auto;
            text-align: right;
        }
        .input:first-child {
            margin-right: 16px;
        }
        input {
            width: 100%;
        }
        #generate {
            width: 96px;
        }
        .output {
            margin: 8px auto 0;
            width: 100%;
            min-width: 0;
            text-align: center;
        }
        #output {
            width: 100%;
            max-height: 24em;
            min-height: 8em;
            resize: vertical;
            border-radius: 4px;
            border: 1px solid #dadce0;
            outline: none;
            padding: 0;
            font-size: 8px;
        }
    }
    /***Scroll Bar (From Google)***/
    
     ::-webkit-scrollbar {
        height: 16px;
        overflow: visible;
        width: 16px;
    }
    
     ::-webkit-scrollbar-button {
        height: 0;
        width: 0;
    }
    
     ::-webkit-scrollbar-track {
        background-clip: padding-box;
        border: solid transparent;
        border-width: 0 0 0 4px;
    }
    
     ::-webkit-scrollbar-track:hover {
        background-color: rgba(0, 0, 0, .05);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
    }
    
     ::-webkit-scrollbar-track:active {
        background-color: rgba(0, 0, 0, .05);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07);
    }
    
     ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        background-clip: padding-box;
        border: solid transparent;
        border-width: 1px 1px 1px 6px;
        min-height: 28px;
        padding: 100px 0 0;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
    }
    
     ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    }
    
     ::-webkit-scrollbar-thumb:active {
        background-color: rgba(0, 0, 0, 0.5);
        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
    }