ari.lt/content/styles/box/box.scss

$box-meta-colour: #e7d0ab;

$tbrown: #4a393334;
$brown: #4A3933;


$yellow: #F0A500;
$lyellow: #e9b648;

.box {
    margin-top: 1em;

    .heading {
        text-align: center;

        font-family: Hack, monospace;
        font-size: 1.65em;

        margin-bottom: 0.3em;
    }

    .contents {
        display: none;
    }

    .content {
        display: inline-block;
        margin-left: 2em;

        font-family: Hack, monospace;
        font-size: 0.7em;

        padding: 0;
    }


    p {
        font-size: 1.5em;

        margin-left: 1.5em;
        margin-right: 1.5em;

        width: 82%;
        min-width: 100px;
        max-width: 100%;
    }

    .imageArea * {
        display: block;
        margin: 0.2em;
        padding-left: 2.5em;
        width: 40%;
    }

    h1 {
        width: 94%;
        font-size: 1.75em;
    }


    @media screen and (min-width: 1500px) {
        .heading {
            display: block;

            text-align: left;
            font-size: 2em;

            margin-left: 1em;
            margin-bottom: 0.8em;
        }


        .contents {
            display: block;
            float: left;

            padding-left: 1.5em;
            padding-right: 1em;
            padding-top: 0.5em;
            padding-bottom: 0.5em;

            background-color: $box-meta-colour;
            border: 1px solid transparent;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;

            list-style: ' * ';

            box-shadow: $tbrown 1px 0px 3px 1px;

            font-family: Hack, monospace;

            width: 38%;
            height: 100%;

            a {
                text-decoration: none;
                color: $brown;
                transition: color 0.6s;
            }
            a:hover {
                color: $yellow;
            }
        }
        .contents::before {
            content: 'Contents:';

            font-family: Hack, monospace;
            font-weight: 700;
            font-size: 1.2em;
        }

        .content {
            display: inline-block;
            margin-left: 2em;
            width: 60%;

            font-family: Hack, monospace;
            font-size: 0.86em;

            padding: 0;
        }
    }
}