@font-face {
    font-family: "SourceCodePro";
    src: url('terminal/SourceCodePro-Regular.otf') format('opentype');
    font-weight: normal;
}

@font-face {
    font-family: "SourceCodePro";
    src: url('terminal/SourceCodePro-Bold.otf') format('opentype');
    font-weight: bold;
}

body.terminal {
    background: black;
    width: 100%;
    overflow: hidden;
    padding: 50px 0;
    text-align: center;

    #term {
        -moz-user-select: text;
        overflow: hidden;
        display: inline-block;

        * {
            margin: 0;
            padding: 0;
        }

        &>div {
            float: left;
            clear: both;
        }

        pre {
            &:first-child {
                display: none;
            }

        font-family: "SourceCodePro", monospace;
            color: white;
            font-size: 12px;
            padding: 0;
            margin: 0;
            display: inline-block;

            &.cursor {
                text-decoration: underline;
            }
        }
    }

    #paste {
        margin: 10px auto;
        width: 600px;

        textarea {
            display: block;
            width: 100%;
            height: 20px;
            padding: 10px 20px;
            background: #111;
            border: #222;
            color: #555;
            font-style: italic;
        }
    }
}


.control.terminal-thumbnail {
    cursor: pointer;
    position: relative;
    float: left;
    padding: 5px;

    img {
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0,0,0,.25);
        &:hover {
            opacity: .9;
        }
    }

    a {
        position: absolute;
        top: 5px;
        right: 5px;
        background: rgba(255,255,255,0.75);
        border-radius: 0 0 0 2px;
        width: 14px;
        height: 14px;
        text-align: center;
        padding: 3px;
        color: black;

        &:hover {
            background: rgba(255,255,255,0.75);
        }

        &:active {
            background: rgba(255,255,255,0.25);
        }
    }
}