/** 
 ** Batman-Comic.CSS
 ** Copyright 2024 Alvaro Montoro (alvaromontoro@gmail.com) 
 **/

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700');

:where(.batman-comic) {
    --size: 1vmin;
    font-size: var(--size);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vmin;
    width: 98vmin;
    margin-bottom: 1em;

    &.four-panels {
        font-size: calc(var(--size) * 0.8);
        width: 98vmin;
        grid-template-columns: repeat(4, 1fr);

        & > section {
            border: 0.4em solid;
        }
    }

    & > .panel,
    & > section {
        position: relative;
        border: 0.5em solid;
        border-radius: 0.5em;
        height: 32em;
        box-sizing: border-box;
        background: linear-gradient(#c9c6, #c9c0 80%);
        overflow: hidden;

        &.two {
            grid-column-end: span 2;
        }

        &.three {
            grid-column-end: span 3;
        }

        &.four {
            grid-column-end: span 4;
        }

        & *,
        & *::before,
        & *::after {
            position: absolute;
            box-sizing: border-box;
        }
    }

    .bubble {
        transform: translateX(-50%);
        font-size: 1.6em;
        font-family: 'Comic Neue', 'Comic Sans', 'Comic Sans MS', Helvetica, Arial, sans-serif;
        text-align: center;
        text-wrap: balance;

        &::before {
            --pos: 50%;
            content: "";
            width: 2em;
            height: 3em;
            border-radius: 0 0 100% 0;
            border: 0.15em solid;
            border-top: 0;
            clip-path: polygon(0.2em 0.2em, 100% 0.2em, 100% 100%, 0.2em 100%);
            transform: translate(-50%, -0.2em);
            left: var(--pos);
            top: 100%;
        }

        &.short {
            &::before {
                height: 2em;
            }
        }

        &.tall {
            &::before {
                height: 4em;
            }
        }

        &.left {
            &::before {
                transform: translate(-50%) scaleX(-1);
            }
        }

        &.off-panel {
            &::before {
                width: 100%;
                transform: translate(-100%);
            }

            &.left {
                &::before {
                    transform: translate(0%) scaleX(-1);
                }
            }
        }
    }

    .batman {
        /* colors */
        --skin-color: #fca;
        --mouth-color: #700;
        --suit-color: #333;
        --suit-color-dark: #222;
        --logo-color: #ff5;
        --logo-color-dark: #dd2;
        --eye-color: #fff;
        /* others */
        --mouth: radial-gradient(farthest-side at 50% 0, var(--mouth-color) 99%, #0000) 50% 90% / 13% 8% no-repeat;
        --mouth-position: 50%;
        --mouth-direction: linear-gradient(#0000 0 0);
        --arms-position: 50%;
        --arms-width: 54%;
        --arms-height: 115%;
        --eye1-size: 8%;
        --eye2-size: 8%;
        --eyelids: linear-gradient(#0000 0 0);
        --extra: linear-gradient(#0000 0 0);
        --extra-under-mask: linear-gradient(#0000 0 0);
        --ears:
            radial-gradient(150% 150% at 10% 36%, var(--suit-color-dark) 5%, #0000 5.25%),
            radial-gradient(150% 150% at 90% 36%, var(--suit-color-dark) 5%, #0000 5.25%)
            ;
        /* modifiers */
        --rotation: 0deg;
        width: 19em;
        height: 22em;
        background:
            /* ears */
            var(--ears),
            /* cuello */
            radial-gradient(var(--suit-color-dark) 20%, #0000 21%),
            /* logo */
            linear-gradient(to top right, var(--suit-color) 50%, #0000 0) 50.5% 74% / 4% 4% no-repeat,
            linear-gradient(to top left, var(--suit-color) 50%, #0000 0) 49.5% 74% / 4% 4% no-repeat,
            conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 50% 80% / 10% 7% no-repeat,
            conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 47.5% 79% / 10% 5% no-repeat,
            conic-gradient(from 340deg, var(--suit-color) 40deg, #0000 41deg) 52.5% 79% / 10% 5% no-repeat,
            radial-gradient(14% 5% at 50% 75%, var(--logo-color) 36% 49%, #0000 50%) 50% 69% / 60% 60% no-repeat,
            radial-gradient(14% 5% at 50% 75%, var(--logo-color) 36% 49%, #0000 50%) 50% 81.1% / 60% 60% no-repeat,
            radial-gradient(20% 10% at 50% 75%, var(--suit-color) 35%, var(--logo-color) 36% 49%, #0000 50%),
            /* cuerpo */
            linear-gradient(var(--logo-color-dark) 0 0) 50% 100% / 8% 6% no-repeat,
            linear-gradient(var(--logo-color-dark) 0 0) 37% 100% / 3% 6% no-repeat,
            linear-gradient(var(--logo-color-dark) 0 0) 63% 100% / 3% 6% no-repeat,
            linear-gradient(var(--logo-color) 0 0) 50% 100% / 40% 5% no-repeat,
            conic-gradient(at 50% -20%, #0000 170deg, var(--suit-color) 170.33deg 189.66deg, #0000 190deg) 50% 100% / 80% 80% no-repeat,
            /* brazos */
            radial-gradient(var(--arms-width) 115% at var(--arms-position) 118%, var(--suit-color-dark) 55%, #0000 55.2%);
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotate(var(--rotation));
        transform-origin: 50% 100%;
        box-shadow: 
            0 10em 0 -5.5em var(--suit-color),
            0 10em 0 -4.1em var(--suit-color-dark);

        &::before {
            content: "";
            --rotation: 0deg;
            width: 17em;
            height: 12em;
            background: 
              var(--extra),
              /* eyes */
              var(--eyelids),
              radial-gradient(circle at 35% 53%, var(--eye-color) var(--eye1-size), #0000 calc(var(--eye1-size) + 0.6%)),
              radial-gradient(circle at 65% 53%, var(--eye-color) var(--eye2-size), #0000 calc(var(--eye2-size) + 0.6%)),
              /* mask */
              linear-gradient(100deg, var(--suit-color) 30%, #0000 30.25%),
              linear-gradient(-100deg, var(--suit-color) 30%, #0000 30.25%),
              linear-gradient(-181deg, var(--suit-color) 69%, #0000 69.25%),
              conic-gradient(from -50deg at 50% 76%, #0000, var(--suit-color) 1deg 99deg, #0000 100deg),
              /* extra under mask */
              var(--extra-under-mask),
              /* mouth */
              var(--mouth-direction),
              var(--mouth),
              var(--skin-color);
            border-radius: 50% / 20%;
            top: 5%;
            left: 50%;
            transform: translateX(-50%) rotate(var(--rotation));
            transform-origin: 50% 100%;
            clip-path: polygon(10% 0, 90% 0, 100% 80%, 100% 100%, 0 100%, 0 80%)
        }
        
        &::after {
            --rotation: 0deg;
            content: "";
            width: 17em;
            height: 25%;
            left: 50%;
            top: -8%;
            transform: translateX(-50%) rotate(var(--rotation));
            transform-origin: 50% 100%;
            background:
              /*     linear-gradient(-120deg, #0000 87%, var(--gray) 88%),
              linear-gradient(120deg, #0000 87%, var(--gray) 88%), */
              conic-gradient(from 160deg at 11% 0, var(--suit-color) 26deg, #0000 27deg) no-repeat,
              conic-gradient(from 174deg at 89% 0, #0000, var(--suit-color) 1deg 26deg, #0000 27deg) no-repeat
              ;
        }

        &.rotate-head-right {
            --ears:
                radial-gradient(150% 150% at 16% 32%, var(--suit-color-dark) 5%, #0000 5.25%),
                radial-gradient(150% 150% at 92.5% 43%, var(--suit-color-dark) 5%, #0000 5.25%)
            ;
            
            &::before {
                --rotation: 10deg;
                top: 7%;
            }

            &::after {
                --rotation: 10deg;
                left: 59%;
                top: -6%;
            }
        }

        &.rotate-head-left {
            --ears:
                radial-gradient(150% 150% at 7.5% 45%, var(--suit-color-dark) 5%, #0000 5.25%),
                radial-gradient(150% 150% at 83% 33%, var(--suit-color-dark) 5%, #0000 5.25%)
            ;
            
            &::before {
                --rotation: -10deg;
                top: 7%;
            }

            &::after {
                --rotation: -10deg;
                left: 41.5%;
                top: -6%;
            }
        }

        /* general cara */
        &.blush {
            --extra-under-mask: 
                radial-gradient(40% 40% at 30% 50%, #f006, #0000),
                radial-gradient(40% 40% at 70% 50%, #f006, #0000);
        }
        &.scare {
            --extra-under-mask: 
                radial-gradient(40% 40% at 30% 50%, #00f3, #0000),
                radial-gradient(40% 40% at 70% 50%, #00f3, #0000);
        }
        &.shame {
            --extra-under-mask: 
                radial-gradient(40% 40% at 30% 50%, #f006, #0000),
                radial-gradient(40% 40% at 70% 50%, #f006, #0000);
        }

        /* boca */
        &.mouth-no {
            --mouth: linear-gradient(#0000 0 0);
        }

        &.mouth-angry,
        &.mouth-sad {
            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 90% / 13% 8% no-repeat;
        }

        &.mouth-talk {
            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 88% / 15% 5% no-repeat;
        }

        &.mouth-round {
            --mouth: radial-gradient(circle at var(--mouth-position) 86%, var(--mouth-color) 3%, #0000 4%);
        }

        &.mouth-whisper {
            --mouth: radial-gradient(55% 100% at var(--mouth-position) 86%, var(--mouth-color) 3%, #0000 4%);
        }

        &.mouth-to-right {
            --mouth-direction: linear-gradient(186deg, #0000 86%, var(--skin-color) 86.5%) var(--mouth-position) 50% / 30% 100% no-repeat;
        }

        &.mouth-to-left {
            --mouth-direction: linear-gradient(174deg, #0000 86%, var(--skin-color) 86.5%) var(--mouth-position) 50% / 30% 100% no-repeat;
        }

        &.mouth-left {
            --mouth-position: 45%;
        }

        &.mouth-right {
            --mouth-position: 55%;
        }
        

        /* eyes */
        &.eyes-no {
            --eye-color: #0000;
        }

        &.eyes-think {
            --eyelids: linear-gradient(var(--suit-color) 48%, #0000 0);
        }

        &.eyes-doubt {
            --eyelids: linear-gradient(var(--suit-color) 47%, #0000 0 60%, var(--suit-color) 0 70%, #0000 0);
        }

        &.eyes-sad {
            --eyelids: conic-gradient(at 50% 45%, var(--suit-color) 105deg, #0000 0 255deg, var(--suit-color) 0);
        }

        &.eyes-angry {
            --eyelids: conic-gradient(at 50% 55%, var(--suit-color) 80deg, #0000 0 280deg, var(--suit-color) 0);
        }

        &.eyes-suspicious {
            --eyelids: conic-gradient(at 52% 55%, var(--suit-color) 83deg, #0000 0 285deg, var(--suit-color) 0);
        }

        &.eyes-surprise {
            --eye1-size: 12%;
            --eye2-size: 12%;
        }

        &.eyes-shock {
            --eye1-size: 9%;
            --eye2-size: 11%;
        }
    }



    .robin {
        /* colores */
        --skin-color: #fca;
        --skin-color-dark: #da8;
        --mouth-color: #fff;
        --suit-color: #f00;
        --shirt-color: #080;
        --cape-color: #ff5;
        --logo-color: #ff5;
        --logo-color-dark: #000;
        --eye-color: #fff;
        --mask-color: #000;
        --hair-color: #000;
        /* otros */
        --mouth:
            radial-gradient(100% 140% at 50% 0%, var(--mouth-color) 30%, #0000 30.5%) 50% 100% / 30% 22% no-repeat;
        --mouth-position: 50%;
        --mouth-direction: linear-gradient(#0000 0 0);
        --arms-position: 50%;
        --arms-width: 54%;
        --arms-height: 115%;
        --eye1-size: 8%;
        --eye2-size: 8%;
        --eyelids: linear-gradient(#0000 0 0);
        --extra: linear-gradient(#0000 0 0);
        --extra-under-mask: linear-gradient(#0000 0 0);
        --ears:
            radial-gradient(circle at 6% 35%, var(--skin-color-dark) 5%, #0000 5.25%),
            radial-gradient(circle at 94% 35%, var(--skin-color-dark) 5%, #0000 5.25%);
        /* modifiers */
        --rotation: 0deg;
        --dir: 50%;
        width: 19em;
        height: 20em;
        background:
            /* ears */
            var(--ears),
            /* cuello */
            conic-gradient(at 50% 100%, var(--skin-color-dark) 40deg, #0000 42deg 318deg, var(--skin-color-dark) 320deg) var(--dir) 55% / 80% 20% no-repeat,
            radial-gradient(var(--cape-color) 21%, #0000 21.5%),
            /* botones */
            linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 75% / 80% 2% no-repeat,
            linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 85% / 80% 2% no-repeat,
            linear-gradient(90deg, #0000 47%, var(--cape-color) 0 53%, #0000 0) var(--dir) 95% / 80% 2% no-repeat,
            /* robin logo */
            linear-gradient(var(--logo-color) 0 0) 56.75% 77% / 1.5% 7% no-repeat,
            radial-gradient(farthest-side at 0 50%, #0000 70%, var(--logo-color) 72% 98%, #0000 99.9%) 59.75% 74.75% / 4% 4.5% no-repeat,
            linear-gradient(45deg, #0000 45%, var(--logo-color) 47% 68%, #0000 70%) 60% 78% / 3% 3% no-repeat,
            radial-gradient(circle at 58% 75%, var(--logo-color-dark) 4%, #0000 4.5%),
            /* cuerpo */
            conic-gradient(at 50% -20%, #0000 170deg, var(--suit-color) 170.33deg 189.66deg, #0000 190deg) 50% 100% / 80% 80% no-repeat,
            /* mangas y brazos */
            conic-gradient(at 50% 5%, #0000 155deg, var(--shirt-color) 155.5deg 204.75deg, #0000 205deg) 50% 60% / 80% 50% no-repeat,
            radial-gradient(50% 50% at 50.125% 0, var(--shirt-color) 99%, #0000 99%) 50% 84% / 45% 5% no-repeat,
            conic-gradient(at 55% -250%, #0000 170deg, var(--skin-color-dark) 170.25deg 193.75deg, #0000 194deg) 50% 100% / 70% 30% no-repeat
            ;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotate(var(--rotation));
        transform-origin: 50% 100%;
        box-shadow: 
            0 7em 0 -6.2em var(--suit-color),
            0 10em 0 -6.2em var(--suit-color),
            0 10em 0 -5em var(--skin-color-dark);

        &::before {
            --rotation: 0deg;
            content: "";
            width: 16em;
            height: 11em;
            border-radius: 50% / 20%;
            top: 5%;
            left: 50%;
            transform: translateX(-50%) rotate(var(--rotation));
            background:
                var(--extra),
                /* eyes + mascara */
                var(--eyelids),
                radial-gradient(circle at 35% 47%, var(--eye-color) var(--eye1-size), #0000 calc(var(--eye1-size) + 0.5%)),
                radial-gradient(circle at 65% 47%, var(--eye-color) var(--eye2-size), #0000 calc(var(--eye2-size) + 0.5%)),
                radial-gradient(75% 70% at 30% 45%, var(--mask-color) 30%, #0000 31%),
                radial-gradient(75% 70% at 70% 45%, var(--mask-color) 30%, #0000 31%),
                /* nariz */
                conic-gradient(at 50% 100%, var(--skin-color-dark) 34deg, #0000 36deg 324deg, var(--skin-color-dark) 326deg) 50% 65% / 20% 20% no-repeat,
                /* boca */
                var(--mouth-direction),
                var(--mouth),
                /* base */
                var(--extra-under-mask),
                var(--skin-color);
        }
        
        &::after {
            --rotation: 0deg;
            content: "";
            width: 80%;
            height: 20%;
            left: 50%;
            top: 0.4%;
            transform: translate(-50%, -50%) rotate(var(--rotation));
            background: 
                conic-gradient(at 50% 20%, #0000 100deg, var(--hair-color) 101deg 140deg, #0000 142deg),
                radial-gradient(100% 100% at 60% 100%, var(--hair-color) 45%, #0000 46%)
                ;
            border-radius: 100%;
            box-shadow: inset -5em -0.5em var(--hair-color);
        }

        &.rotate-head-right {
            --ears:
                radial-gradient(circle at 12% 25%, var(--skin-color-dark) 5%, #0000 5.25%),
                radial-gradient(circle at 94.5% 41%, var(--skin-color-dark) 5%, #0000 5.25%);
            
            &::before {
                --rotation: 10deg;
                top: 4%;
                left: 55%;
            }

            &::after {
                --rotation: 10deg;
                left: 59%;
                top: 0%;
            }
        }

        &.rotate-head-left {
            --ears:
                radial-gradient(150% 150% at 8% 40%, var(--skin-color-dark) 5%, #0000 5.25%),
                radial-gradient(150% 150% at 91% 26%, var(--skin-color-dark) 5%, #0000 5.25%)
            ;
            
            &::before {
                --rotation: -10deg;
                top: 4%;
            }

            &::after {
                --rotation: -10deg;
                left: 49%;
                top: -2%;
            }
        }

        /* general cara */
        &.blush {
            --extra-under-mask: 
                radial-gradient(40% 40% at 30% 60%, #f002, #f000),
                radial-gradient(40% 40% at 70% 60%, #f002, #f000);
        }

        &.scare {
            --extra-under-mask: 
                linear-gradient(#00f3, #f000 40%);
        }

        &.shame {
            --extra-under-mask: 
                radial-gradient(40% 40% at 30% 50%, #f003, #0000),
                radial-gradient(40% 40% at 70% 50%, #f006, #0000);
        }

        /* boca */
        &.mouth-no {
            --mouth: linear-gradient(#0000 0 0);
        }

        &.mouth-angry,
        &.mouth-sad {
            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 87% / 13% 8% no-repeat;
        }

        &.mouth-talk {
            --mouth: radial-gradient(farthest-side at 50% 100%, var(--mouth-color) 99%, #0000) var(--mouth-position) 86% / 14% 6% no-repeat;
        }

        &.mouth-round {
            --mouth: radial-gradient(circle at var(--mouth-position) 85%, var(--mouth-color) 3%, #0000 4%);
        }

        &.mouth-whisper {
            --mouth: radial-gradient(55% 100% at var(--mouth-position) 84%, var(--mouth-color) 3%, #0000 4%);
        }

        &.mouth-to-right {
            --mouth-direction: linear-gradient(186deg, #0000 83%, var(--skin-color) 83.5%) var(--mouth-position) 50% / 30% 100% no-repeat;
        }

        &.mouth-to-left {
            --mouth-direction: linear-gradient(174deg, #0000 83%, var(--skin-color) 83.5%) var(--mouth-position) 100% / 30% 90% no-repeat;
        }

        &.mouth-left {
            --mouth-position: 45%;
        }

        &.mouth-right {
            --mouth-position: 55%;
        }
        

        /* eyes */
        &.eyes-no {
            --eye-color: #0000;
        }

        &.eyes-think {
            --eyelids: linear-gradient(var(--mask-color) 48%, #0000 0) 50% 45% / 50% 15% no-repeat;
        }

        &.eyes-doubt {
            --eyelids: 
                linear-gradient(var(--mask-color) 25%, #0000 0 60%, var(--mask-color) 0 70%, #0000 0)  30% 50% / 25% 35% no-repeat,
                linear-gradient(var(--mask-color) 25%, #0000 0 60%, var(--mask-color) 0 70%, #0000 0)  70% 50% / 25% 35% no-repeat;
        }

        &.eyes-sad {
            --eyelids: 
                linear-gradient(170deg, var(--mask-color) 35%, #0000 36%)  30% 50% / 25% 35% no-repeat,
                linear-gradient(190deg, var(--mask-color) 35%, #0000 36%)  70% 50% / 25% 35% no-repeat;
        }

        &.eyes-angry {
            --eyelids:
                linear-gradient(190deg, var(--mask-color) 35%, #0000 36%)  30% 50% / 25% 35% no-repeat,
                linear-gradient(170deg, var(--mask-color) 35%, #0000 36%)  70% 50% / 25% 35% no-repeat;
        }

        &.eyes-suspicious {
            --eyelids: 
                linear-gradient(185deg, var(--mask-color) 38%, #0000 39%)  30% 50% / 25% 35% no-repeat,
                linear-gradient(165deg, var(--mask-color) 32%, #0000 33%)  70% 50% / 25% 35% no-repeat;
        }

        &.eyes-surprise {
            --eye1-size: 12%;
            --eye2-size: 12%;
        }

        &.eyes-shock {
            --eye1-size: 9%;
            --eye2-size: 11%;
        }
    }


    /* posiciones personajes */
    .pos-x-0   { left:   0%; }
    .pos-x-5   { left:   5%; }
    .pos-x-10  { left:  10%; }
    .pos-x-15  { left:  15%; }
    .pos-x-20  { left:  20%; }
    .pos-x-25  { left:  25%; }
    .pos-x-30  { left:  30%; }
    .pos-x-35  { left:  35%; }
    .pos-x-40  { left:  40%; }
    .pos-x-45  { left:  45%; }
    .pos-x-50  { left:  50%; }
    .pos-x-55  { left:  55%; }
    .pos-x-60  { left:  60%; }
    .pos-x-65  { left:  65%; }
    .pos-x-70  { left:  70%; }
    .pos-x-75  { left:  75%; }
    .pos-x-80  { left:  80%; }
    .pos-x-85  { left:  85%; }
    .pos-x-90  { left:  90%; }
    .pos-x-95  { left:  95%; }
    .pos-x-100 { left: 100%; }

    .pos-line-0   { &::before { left:   0%; } }
    .pos-line-5   { &::before { left:   5%; } }
    .pos-line-10  { &::before { left:  10%; } }
    .pos-line-15  { &::before { left:  15%; } }
    .pos-line-20  { &::before { left:  20%; } }
    .pos-line-25  { &::before { left:  25%; } }
    .pos-line-30  { &::before { left:  30%; } }
    .pos-line-35  { &::before { left:  35%; } }
    .pos-line-40  { &::before { left:  40%; } }
    .pos-line-45  { &::before { left:  45%; } }
    .pos-line-50  { &::before { left:  50%; } }
    .pos-line-55  { &::before { left:  55%; } }
    .pos-line-60  { &::before { left:  60%; } }
    .pos-line-65  { &::before { left:  65%; } }
    .pos-line-70  { &::before { left:  70%; } }
    .pos-line-75  { &::before { left:  75%; } }
    .pos-line-80  { &::before { left:  80%; } }
    .pos-line-85  { &::before { left:  85%; } }
    .pos-line-90  { &::before { left:  90%; } }
    .pos-line-95  { &::before { left:  95%; } }
    .pos-line-100 { &::before { left: 100%; } }

    .pos-y-0   { top:   0%; }
    .pos-y-5   { top:   5%; }
    .pos-y-10  { top:  10%; }
    .pos-y-15  { top:  15%; }
    .pos-y-20  { top:  20%; }
    .pos-y-25  { top:  25%; }
    .pos-y-30  { top:  30%; }
    .pos-y-35  { top:  35%; }
    .pos-y-40  { top:  40%; }
    .pos-y-45  { top:  45%; }
    .pos-y-50  { top:  50%; }
    .pos-y-55  { top:  55%; }
    .pos-y-60  { top:  60%; }
    .pos-y-65  { top:  65%; }
    .pos-y-70  { top:  70%; }
    .pos-y-75  { top:  75%; }
    .pos-y-80  { top:  80%; }
    .pos-y-85  { top:  85%; }
    .pos-y-90  { top:  90%; }
    .pos-y-95  { top:  95%; }
    .pos-y-100 { top: 100%; }

    .width-0   { width:   0%; }
    .width-5   { width:   5%; }
    .width-10  { width:  10%; }
    .width-15  { width:  15%; }
    .width-20  { width:  20%; }
    .width-25  { width:  25%; }
    .width-30  { width:  30%; }
    .width-35  { width:  35%; }
    .width-40  { width:  40%; }
    .width-45  { width:  45%; }
    .width-50  { width:  50%; }
    .width-55  { width:  55%; }
    .width-60  { width:  60%; }
    .width-65  { width:  65%; }
    .width-70  { width:  70%; }
    .width-75  { width:  75%; }
    .width-80  { width:  80%; }
    .width-85  { width:  85%; }
    .width-90  { width:  90%; }
    .width-95  { width:  95%; }
    .width-100 { width: 100%; }

    .rotate-0   { --rotation:   0deg; }
    .rotate-5   { --rotation:   5deg; }
    .rotate-10  { --rotation:  10deg; }
    .rotate-15  { --rotation:  15deg; }
    .rotate-20  { --rotation:  20deg; }
    .rotate-25  { --rotation:  25deg; }
    .rotate-30  { --rotation:  30deg; }
    .rotate--5  { --rotation:  -5deg; }
    .rotate--10 { --rotation: -10deg; }
    .rotate--15 { --rotation: -15deg; }
    .rotate--20 { --rotation: -20deg; }
    .rotate--25 { --rotation: -25deg; }
    .rotate--30 { --rotation: -30deg; }
}