@font-face {
    font-family: 'Trebuchet MS';
    font-style: normal;
    font-weight: normal;
    src: local('Trebuchet MS'), local('Trebuchet'), url(../HTML/font/trebuc.ttf);
}

@font-face {
    font-family: 'Trebuchet MS';
    font-style: normal;
    font-weight: bold;
    src: local('Trebuchet MS Bold'), local('Trebuchet Bold'), local('Trebuchet MS'), local('Trebuchet'), url(../HTML/font/trebucbd.ttf);
}

@font-face {
    font-family: 'Trebuchet MS';
    font-style: italic;
    font-weight: normal;
    src: local('Trebuchet MS Italic'), local('Trebuchet Italic'), local('Trebuchet MS'), local('Trebuchet'), url(../HTML/font/trebucit.ttf);
}

@font-face {
    font-family: 'Trebuchet MS';
    font-style: italic;
    font-weight: bold;
    src: local('Trebuchet MS Bold Italic'), local('Trebuchet Bold Italic'), local('Trebuchet MS'), local('Trebuchet'), url(../HTML/font/trebucbi.ttf);
}

@font-face {
    font-family: 'DayPosterBlack';
    src: local('DayPosterBlack'), url(../HTML/font/DayPosterBlack.ttf);
}

body {
    background: hsl(218, 80%, 95%);
}

body, button, a.button, input, textarea {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 13pt;
    margin: 0;
}

button, a.button {
    border: none;
    cursor: pointer;
    box-shadow: rgba(0,0,0,.3) 2px 2px 5px;
    border-radius: 5pt;
    text-decoration: none;
    color: black;
}

    button:hover, button.perm, a.button:hover, a.button.perm {
        color: white;
    }

h1 {
    text-align: center;
}

    h1.text {
        font-family: DayPosterBlack;
        font-size: 64pt;
        margin-top: 128pt;
        text-align: center;
        color: hsl(220, 50%, 50%);
        text-shadow: 0 0 10px rgba(0,0,0,.3);
        line-height: .9;
    }

    h1.logo img.logo {
        max-width: 95%;
    }

#everything {
    box-sizing: border-box;
    max-width: 700pt;
    min-height: 100vh;
    margin: 0 auto;
    padding: 20pt 20pt 100pt;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    background: white;
}

.error {
    border: 1px solid #a86;
    background: #fdd;
    padding: 10pt 20pt;
    font-size: 15pt;
    font-weight: bold;
}

.controls {
    padding: 5pt 0;
    list-style: none;
    margin: 0;
}

    .controls > li > button {
        background: hsl(110, 90%, 75%);
        font-size: 15pt;
        padding: 5pt 10pt;
    }

        .controls > li > button:hover {
            background: hsl(110, 100%, 20%);
        }

    .controls > li {
        display: inline-block;
    }

        .controls > li:not(:first-child)::before {
            content: '\a0 •\a0';
        }

.header {
    background: #def;
    border: 1px solid #28c;
    padding: .5em 1em;
    font-size: 10pt;
}

    .header > strong {
        font-size: 12pt;
    }

.edit-icon {
    width: 18pt;
    height: 18pt;
    margin: 0 0 0 5pt;
    vertical-align: middle;
    background: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M .7,.1 .9,.3 .3,.9 .1,.9 .1,.7 z" stroke-width=".05" stroke="black" fill="none" /><path d="M .3,.9 .1,.9 .1,.7 z" stroke="none" fill="black" /></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75%;
    display: inline-block;
}

    .edit-icon:hover {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M .7,.1 .9,.3 .3,.9 .1,.9 .1,.7 z" stroke-width=".05" stroke="white" fill="none" /><path d="M .3,.9 .1,.9 .1,.7 z" stroke="none" fill="white" /></svg>');
    }

    .edit-icon::-moz-focus-inner {
        border: 0;
    }

body.pristine .req-priv {
    display: none !important;
}

.puzzle-group {
    background: hsl(220,90%,95%);
    position: relative;
    padding: 3pt;
    margin-top: 25pt;
}

    .puzzle-group.req-priv {
        background: hsl(0,90%,95%);
    }

    .puzzle-group .title {
        font-size: 20pt;
        font-weight: bold;
        background: hsl(220,90%,85%);
        padding: 3pt 7pt;
    }

    .puzzle-group.req-priv .title {
        background: hsl(0,90%,85%);
    }

    .puzzle-group button, .puzzle-group.req-priv .puzzle:not(.req-priv) button,
    .puzzle-group a.button, .puzzle-group.req-priv .puzzle:not(.req-priv) a.button {
        background-color: hsl(220,90%,75%);
    }

        .puzzle-group button:hover, .puzzle-group button.perm, .puzzle-group.req-priv .puzzle:not(.req-priv) button:hover, .puzzle-group.req-priv .puzzle:not(.req-priv) button.perm,
        .puzzle-group a.button:hover, .puzzle-group a.button.perm, .puzzle-group.req-priv .puzzle:not(.req-priv) a.button:hover, .puzzle-group.req-priv .puzzle:not(.req-priv) a.button.perm {
            background-color: hsl(220,100%,20%);
        }

    .puzzle-group.req-priv button, .puzzle.req-priv > button,
    .puzzle-group.req-priv a.button, .puzzle.req-priv > a.button {
        background-color: hsl(0,90%,75%);
    }

        .puzzle-group.req-priv button:hover, .puzzle-group.req-priv button.perm, .puzzle.req-priv > button:hover, .puzzle.req-priv > button.perm,
        .puzzle-group.req-priv a.button:hover, .puzzle-group.req-priv a.button.perm, .puzzle.req-priv > a.button:hover, .puzzle.req-priv > a.button.perm {
            background-color: hsl(0,100%,20%);
        }

    .puzzle-group .puzzle.req-priv > button,
    .puzzle-group .puzzle.req-priv > a.button {
        background-color: hsl(0,90%,75%);
    }

        .puzzle-group .puzzle.req-priv > button:hover, .puzzle.req-priv > button.perm,
        .puzzle-group .puzzle.req-priv > a.button:hover, .puzzle.req-priv > a.button.perm {
            background-color: hsl(0,100%,20%);
        }

    .puzzle-group .group-info {
        position: absolute;
        top: 17pt;
        right: 6pt;
        transform: translate(0,-50%);
        text-align: right;
    }

        .puzzle-group .group-info > * {
            display: inline-block;
            margin-left: .7em;
        }

        .puzzle-group .group-info > .author::before {
            content: 'by\a0 ';
            color: rgba(0,0,0,.4);
        }

    .puzzle-group .controls {
        padding: 5pt 10pt;
    }

    .puzzle-group .puzzles {
        list-style: none;
        padding: 5pt 10pt;
        margin: 10pt 0;
    }

        .puzzle-group .puzzles .puzzle {
            margin: 5pt 0;
            display: block;
            position: relative;
            padding: 5pt 10pt 5pt 25pt;
            background-color: hsl(220, 90%, 85%);
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M 0,0 .7,.5 0,1 z" stroke="none" fill="hsl(220, 90%, 75%)" /></svg>');
            background-position: 3pt center;
            background-size: auto 20pt;
            background-repeat: no-repeat;
        }

            .puzzle-group .puzzles .puzzle.new {
                padding-left: 55pt;
            }

                .puzzle-group .puzzles .puzzle.new:before {
                    content: '';
                    position: absolute;
                    left: 25px;
                    top: 3px;
                    width: 45px;
                    height: 30px;
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"><path fill="%23dde41c" d="M67.4 1l9.5 16.2L86.9 0l2.5 17.3 16.7-16-5.2 17.6 21.8-12.4-12 17.7 25.6-9.9-17.5 15.3 26.6-4.7-21 12 25.5-.1-23.9 8.9 24 4.1-26.6 4.8 21.7 8.4-27.5-.4L135 75l-25-4.9 10.2 15.5-20.2-9 3.7 16.7-15.4-12.7L84 98.1l-9-15.4L65 100l-2.6-17.5-16.8 15.7 5.2-17.6L29 93l10.8-16.5L15.4 85l17.2-14.8L6 75.1 27 62 0 62.5l25.4-8.4-24.1-5 26.7-4-21.4-8.9 26 .9-16-12.5 25 4.7-11.7-15 21.8 9-3.8-17.6 15.5 13.6z"/><path d="M61 66.8L44 50l3.3 18.9-3.4.6-4.7-26.3 1.5-.3L57 58.8l-3.2-18.2 3.4-.6L62 66.6zm5.9-25.2l1.3 7.3 8.6-1.5.6 3-8.7 1.6 1.7 9.5 11.9-2.1.6 3.2-15.6 2.7L62.7 39l15.7-2.8.6 3.3zm40.4 17l-1.1.2-9.5-17L94 61l-1 .2L80 36l3.7-.7 8.5 17.5 2.5-19.4 1.3-.2 9 17.3 2-19.3 3.8-.7z"/></svg>');
                    background-position: 0 0;
                    background-size: contain;
                    background-repeat: no-repeat;
                }

            .puzzle-group .puzzles .puzzle.missing {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M .2,0 .5,.3 .8,0 1,.2 .7,.5 1,.8 .8,1 .5,.7 .2,1 0,.8 .3,.5 0,.2 z" stroke="none" fill="hsl(220, 90%, 75%)" /></svg>');
            }

            .puzzle-group .puzzles .puzzle:visited {
                color: hsl(0, 100%, 35%);
            }

            .puzzle-group .puzzles .puzzle:hover {
                background-color: hsl(220, 100%, 75%);
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M 0,0 .7,.5 0,1 z" stroke="none" fill="hsl(220, 100%, 65%)" /></svg>');
            }

            .puzzle-group .puzzles .puzzle.missing:hover {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M .2,0 .5,.3 .8,0 1,.2 .7,.5 1,.8 .8,1 .5,.7 .2,1 0,.8 .3,.5 0,.2 z" stroke="none" fill="hsl(220, 100%, 65%)" /></svg>');
            }

            .puzzle-group .puzzles .puzzle .puzzle-title {
                text-decoration: none;
                font-weight: bold;
                color: hsl(220, 100%, 10%);
            }

                .puzzle-group .puzzles .puzzle .puzzle-title:visited {
                    color: hsl(220, 100%, 35%);
                }

            .puzzle-group .puzzles .puzzle.req-priv {
                background-color: hsl(0, 90%, 85%);
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M 0,0 .7,.5 0,1 z" stroke="none" fill="hsl(0, 90%, 75%)" /></svg>');
            }

                .puzzle-group .puzzles .puzzle.req-priv .puzzle-title {
                    color: hsl(0, 100%, 10%);
                }

                .puzzle-group .puzzles .puzzle.req-priv.missing {
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M .2,0 .5,.3 .8,0 1,.2 .7,.5 1,.8 .8,1 .5,.7 .2,1 0,.8 .3,.5 0,.2 z" stroke="none" fill="hsl(0, 90%, 75%)" /></svg>');
                }

                .puzzle-group .puzzles .puzzle.req-priv:hover {
                    background-color: hsl(0, 100%, 75%);
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M 0,0 .7,.5 0,1 z" stroke="none" fill="hsl(0, 100%, 65%)" /></svg>');
                }

                .puzzle-group .puzzles .puzzle.req-priv.missing:hover {
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M .2,0 .5,.3 .8,0 1,.2 .7,.5 1,.8 .8,1 .5,.7 .2,1 0,.8 .3,.5 0,.2 z" stroke="none" fill="hsl(0, 100%, 65%)" /></svg>');
                }

                .puzzle-group .puzzles .puzzle.req-priv .puzzle-title:visited {
                    color: hsl(0, 100%, 35%);
                }

            .puzzle-group .puzzles .puzzle button, .puzzle-group .puzzles .puzzle a.button {
                padding: 3pt 6pt;
                margin-left: 10pt;
                font-size: 10pt;
                position: relative;
                top: -1pt;
            }

                .puzzle-group .puzzles .puzzle button.move-here {
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    top: calc(100% + 3pt);
                    float: none;
                    z-index: 1;
                }

                    .puzzle-group .puzzles .puzzle button.move-here:first-child {
                        top: -3pt;
                    }

            .puzzle-group .puzzles .puzzle .puzzle-buttons {
                float: right;
                position: relative;
                top: -1px;
            }

                .puzzle-group .puzzles .puzzle .puzzle-buttons > * {
                    vertical-align: middle;
                    display: inline-block;
                }

            .puzzle-group .puzzles .puzzle .puzzle-info {
                display: inline-block;
                margin-left: 10pt;
                margin-top: 1pt;
                font-size: 8pt;
                text-align: right;
                position: relative;
                top: -2px;
            }

                .puzzle-group .puzzles .puzzle .puzzle-info > .puzzle-author::before {
                    content: 'by\a0 ';
                    color: rgba(0,0,0,.4);
                }

                .puzzle-group .puzzles .puzzle .puzzle-info > .puzzle-date::before {
                    content: 'released\a0 ';
                    color: rgba(0,0,0,.4);
                }

            .puzzle-group .puzzles .puzzle .puzzle-answer {
                font-size: 12pt;
                padding-left: 20pt;
            }

            body:not(.pristine) .puzzle-group.editable .puzzles .puzzle .puzzle-buttons .check-answer-span {
                display: none;
            }
            .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span {
                margin-left: 10pt;
            }
            .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span .check-answer {
                width: 100pt;
            }
            .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span.correct .check-answer,
            .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span.correct .check-answer-btn,
            .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span .correct-answer {
                display: none;
            }
            .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span.correct .correct-answer {
                display: inline;
                font-weight: bold;
                font-size: 14pt;
            }
                .puzzle-group .puzzles .puzzle .puzzle-buttons .check-answer-span.correct .correct-answer::after {
                    content: '✓';
                    color: #009200;
                    padding-left: 6pt;
                }