cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="title">
    <h1 class="center">ToK Styling Sandbox</h1> 
</div>

<div id="hero">
    <img class = "tok-logo" src="http://towneofklock.com/style/tok.svg" alt="tok">
</div>

<div id="PainWell">
    <h1 class="icon-text red-icon-text">PW</h1> <h1 class="text-banner red-banner">  PAIN WELL</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="TravelRange">
    <h1 class="icon-text orange-icon-text">TR</h1> <h1 class="text-banner orange-banner">  TRAVEL RANGE</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="MetaImages">
    <h1 class="icon-text yellow-icon-text">MI</h1> <h1 class="text-banner yellow-banner">  META IMAGES</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="HealthPoints">
    <h1 class="icon-text green-icon-text">HP</h1> <h1 class="text-banner green-banner">  HEALTH POINTS</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="ActionPoints">
    <h1 class="icon-text blue-icon-text">AP</h1> <h1 class="text-banner blue-banner">  ACTION POINTS</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="Executables">
    <h1 class="icon-text indigo-icon-text">EX</h1> <h1 class="text-banner indigo-banner">  EXECUTABLES</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="Synchronicity">
    <h1 class="icon-text violet-icon-text">SC</h1> <h1 class="text-banner violet-banner">  SYNCHRONICITY</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="Skill-tmp">
    <h1 class="icon-text grey-icon-text">SC</h1> <h1 class="text-banner grey-banner">  SKILL STUFF</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="Skill-tmp">
    <h1 class="icon-text grey-icon-text">SC</h1> <h1 class="text-banner grey-banner">  SKILL LEVEL</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="Skill-tmp">
    <h1 class="icon-text grey-icon-text">ST</h1> <h1 class="text-banner grey-banner">  SKILL TIER</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text red-icon-text">1</h1> <h1 class="text-banner red-banner">JUMP</h1>
    <p> <strong>Action Points:</strong> 2</p>
    <p> <strong>Executables:</strong> 1</p>
    
    <p> <strong>Effect:</strong> Characters may make calculated jumps.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text red-icon-text">1</h1> <h1 class="text-banner red-banner">CLIMB</h1>
    <p> <strong>Action Points:</strong> 3</p>
    <p> <strong>Executables:</strong> 1</p>
    
    <p> <strong>Effect:</strong> Allows one to climb. May require rope.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text red-icon-text">1</h1> <h1 class="text-banner red-banner">SWIM</h1>
    <p> <strong>Action Points:</strong> 3</p>
    <p> <strong>Executables:</strong> 1</p>
    
    <p> <strong>Effect:</strong> Allows one to swim without drowning.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text red-icon-text">1</h1> <h1 class="text-banner red-banner">ACROBATICS</h1>
    <p> <strong>Action Points:</strong> 3</p>
    <p> <strong>Executables:</strong> 1</p>
    
    <p> <strong>Effect:</strong> Allows one to perform complex acrobatics.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text red-icon-text">1</h1> <h1 class="text-banner red-banner">THRASH</h1>
    <p> <strong>Action Points:</strong> 5</p>
    <p> <strong>Executables:</strong> 1</p>
    
    <p> <strong>Effect:</strong> 
        The person or creatures struggles, flails, and thrashes about. On a critical success they may escape any Tier 1 grip or hold skill. Any success deals 1 physical damage to an adjacent target at random. Critical failure results in dealing 1 physical damage to self.
    </p>
    <p> <strong>SPECIAL:</strong> Any and all creatures can use this skill without training. Additional, this skill opens to level 20 for everyone.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text orange-icon-text">0</h1> <h1 class="text-banner orange-banner">SPRINT</h1>
    <p> <strong>Action Points:</strong> 3</p>
    <p> <strong>Executables:</strong> 1</p>
    
    <p> <strong>Effect:</strong> This ability allows one to expend action points and gain a second moment phase this turn. Upon use, you may move up to your max TR as if it were your movement phase.</p>
    <p> <strong>SPECIAL:</strong> Any and all creatures can use this skill without training. Additional, this skill opens to level 100 for everyone and does not require any roll to use.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text orange-icon-text">1</h1> <h1 class="text-banner orange-banner">DODGE</h1>
    <p> <strong>Action Points:</strong> 1</p>
    <p> <strong>TIME:</strong> REACTION (NO EX COST)</p>
    
    <p> <strong>Effect:</strong> Allows one to avoid most kinds of physical attacks. DODGING is declared as one of several possible REACTION skills when a physical or projectile has you in it's path. Successes and failures are weighed based on the HIT chart.</p>
    <p> <em>Only one REACTION may be used per inbound strike (cannot DODGE and BLOCK the same punch).</em></p>
        <p> <strong>SPECIAL:</strong> Skill freely opens to 20.</p>
</div>


<div id="Skill-tmp" class="skill">
    <h1 class="icon-text yellow-icon-text">1</h1> <h1 class="text-banner yellow-banner">SNEAK</h1>
    <p> <strong>Action Points:</strong> 4</p>
    <p> <strong>Executables:</strong> 1</p>
    <p> <strong>Duration:</strong> Until failed or canceled.</p>
    
    <p> <strong>Effect:</strong> This ability can only be used if you have not yet been seen or otherwise detected. It allows one to remain undetected while performing simple interactions. Each skill used while "sneaking" has it's AP cost increased by 2 to maintain the stealth.</p>
    <p>While the sneak is maintained, all parties have their awareness halved when making standard rolls. Attacks may be made verse an ignore if undetected.</p>
    
    <p><strong>Bonus Effects:</strong>
        <ul>
            <li>76+: Standard awareness rolls are made at -50 instead. Non-standard awareness rolls (when characters are actively searching) are halved.</li>
            <li>100+: Standard awareness rolls are made at -75 instead.</li>
        </ul>
    </p>
    <p> <strong>SPECIAL:</strong> Any and all creatures can use this skill without training. Additional, this skill opens to level 10 for everyone.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text yellow-icon-text">3</h1> <h1 class="text-banner yellow-banner">CONJURE META MATERIALS</h1>
    <p> <strong>Action Points:</strong> 4</p>
    <p> <strong>Time (EX*):</strong> 8 Hours - Consumes all EX through its duration.</p>
    <p> <strong>Effect:</strong> </p>
    <p> <strong>Requires Meta Image conduit if YELLOW base is less than 10.</strong> </p>
    <p> On a successful roll, the player increases their current MI count by 1. On a critical success player increases their current MI count by 2.</p>
    <p> <strong>BONUS EFFECTS:</strong>
        <ul>
            <li>51+ Time reduced to 6 hours.</li>
            <li>71+ MI gathered increases by +2.</li>
            <li>91+ Time reduced to 4 hours.</li>
        </ul>
    </p>
    <p> <strong>SPECIAL:</strong> This skill can only be opened with training.</p>
</div>


<div id="Skill-tmp" class="skill">
    <h1 class="icon-text yellow-icon-text">3</h1> <h1 class="text-banner yellow-banner">CLOAK</h1>
    <p> <strong>Action Points:</strong> 4</p>
    <p> <strong>Executables:</strong> 1</p>
    <p> <strong>Meta Images:</strong> 3</p>
    <p> <strong>Duration:</strong> 3 Cycles.</p>
    <p> <strong>Requires Meta Image conduit if YELLOW base is less than 10.</strong> </p>
    <p> The light bends around you, rendering you effectively invisible to the naked eye. Detection cannot be made based on naked eyesight. If successfully stealthed, no naked detection (detection based on sight / sound) roles will be made until the cloak ends. If attack is made against you, you have a +50 to dodge. If you are hit by an attack or hit with an attack you cease to maintain the cloak and the illusion is broken.</p>
    <p> <strong>BONUS EFFECTS:</strong>
        <ul>
            <li>51+ Duration increased to 4 Cycles.</li>
            <li>71+ MI Cost reduced to 2.</li>
            <li>91+ Duration increased to 5 Cycles.</li>
            <li>101+ Effect is not broken by attacking.</li>
        </ul>
    </p>
    <p> <strong>SPECIAL:</strong> This skill can only be opened with training.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text green-icon-text">1</h1> <h1 class="text-banner green-banner">FIRST AID</h1>
    <p> <strong>Action Points:</strong> 5</p>
    <p> <strong>Time (EX*):</strong> Instant - Consumes all EX through its duration.</p>
    <p> <strong>Duration:</strong> 100 - Skill Level minutes (100 - SL min).</p>
    <p> <em>Reminder: 1 Cycle is 10 seconds, 6 cycles in 1 minute.</em></p>

    <p> <strong>Effect:</strong> Can be used to slow or stop bleeding. If a successful physician skill has diagnosed any broken bones, or injuries that do not require surgery--First aid can apply stints or other temporary relief to temporarily prevent accrewing PW points.</p>
    <p> <strong>SPECIAL:</strong> Characters have a natural +33 to opening first-aid if a physician has diagnosed the problem. Characters have a natural +20 to open if assisting another character with this skill. If the Character's GREEN SCORE >= 10, this skill opens at +10.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text green-icon-text">2</h1> <h1 class="text-banner green-banner">PHYSICIAN</h1>
    <p> <strong>Action Points:</strong> 5</p>
    <p> <strong>Time (EX*):</strong> Instant - Consumes all EX through its duration.</p>
    <p> <strong>Duration:</strong> 100 - Skill Level minutes (100 - SL min).</p>
    <p> <em>Reminder: 1 Cycle is 10 seconds, 6 cycles in 1 minute.</em></p>
    <p> <strong>Effect:</strong> Used to diagnose injuries and impairments. Required prior to treating any serious wounds.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text blue-icon-text">1</h1> <h1 class="text-banner blue-banner">OBSERVATION</h1>
    <p> <strong>Action Points:</strong> 1 </p>
    <p> <strong>Executables:</strong> 15 - Skill Mastery <em>(SL / 10)</em> </p>
    <p> <strong>Range:</strong> Skill Mastery <em>(SL / 10)</em> yards</p>
    <p> <strong>Effect:</strong> Allows one to gain a vague understanding of a device or machine's purpose and function through critical observation without directly touching it. If the machine or device requires power or is otherwise broken or non-operational, OBSERVATION cannot be used.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text blue-icon-text">2</h1> <h1 class="text-banner blue-banner">DECONSTRUCT</h1>
    <p> <strong>Action Points:</strong> - </p>
    <p> <strong>Time (EX*):</strong> Instant - Consumes all EX through its duration.</p>
    <p> <strong>Duration:</strong> 1 hour per Machine's TIER</p>
    <p> <strong>Effect:</strong> Allows one to disassemble a device or machine in order to understand its basic inner workings. This is a methotical process where one takes meticulous notes attempting to understand each component. This skill can only be used on devices that have a TIER of equal or lesser than its user's BLUE score.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text blue-icon-text">3</h1> <h1 class="text-banner blue-banner">RECONSTRUCT</h1>
    <p> <strong>Action Points:</strong> - </p>
    <p> <strong>Time (EX*):</strong> Instant - Consumes all EX through its duration.</p>
    <p> <strong>Duration:</strong> 2 hours per Machine's TIER</p>
    <p> <strong>Effect:</strong> Allows one to re-assemble a device or machine in order to gain further understanding of its inner workings. This requires one to already have disassembled or otherwise successfully attained knowlege of the device or machine. This skill can only be used on devices that have a TIER of equal or lesser than its user's BLUE score.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text indigo-icon-text">1</h1> <h1 class="text-banner indigo-banner">RHETORIC</h1>
    <p> <strong>Action Points:</strong> 1</p>
    <p> <strong>Time (EX*):</strong> Instant - Requires all EX this Cycle</p>
    <p> <strong>Duration:</strong> Until next turn.</p>

    <p> <strong>Effect:</strong> This skill allows one to attempt to speak influentially. It constitutes a role playing action--requiring the player to speak for their character in an attempt to influence with a non-player character verbally. Results may vary based on GM discretion, but a critical failure will almost certainly prove antithetical to the player's interests--leaving the NPC hostile, untrusting, or otherwise annoyed. A critical success will likely strengthen the NPC's disposition toward the player's character along the lines of the acted speech (intimidation, charm, bartering, coaxing for information, etc.)</p>
    <p> <strong>SPECIAL:</strong> All characters have this skill open to at least level 10. Rhetoric forms the basis for all speech-based skills. If the player is mute, the recipiant is deph or doesn't speak the same language as the intended target any roll--even a critical success--is regarded as a moderate failure.</p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text indigo-icon-text">0</h1> <h1 class="text-banner indigo-banner">SING</h1>
    <p> <strong>Action Points:</strong> 2</p>
    <p> <strong>Time (EX*):</strong> Instant - Requires all EX this Cycle</p>
    <p> <strong>Duration:</strong> Assumed to be maintained or canceled based on game context</p>

    <p> <strong>Effect:</strong> This skill allows one to sing. It's an entertainment skill. Used as a base for other entertainment skills (like playing an instrument). SING recieves a +1 for each 10 levels of Rhetoric the player has.</p>
    <p> <strong>SPECIAL:</strong> All characters have this skill open to at least level 5.</p>
    <p> <em><strong>OPTIONAL:</strong> Player may elect to take a free INSTRUMENT related skill (count as free invention using SING as template). Examples: drums, flutes, harps, etc. Character also may begin with a QUALITY 1 (low or basic) version of that instrument. If choosing the INSTRUMENT option, no Rhetoric bonus will be applied. If the instrument is a drum, harp, or other implement which does not require the use of one's breath, a successful rhetoric roll may be used change any moderate success into a critical success (though it does not count toward leveling up the skill). If the instrument does require the use of their breath (flutes, pipes, etc.), and they have any relavent swimming score, that skill recieves recieves a +1 for each 10 levels of their SWIM skill.</em></p>
</div>

<div id="Skill-tmp" class="skill">
    <h1 class="icon-text grey-icon-text">0</h1> <h1 class="text-banner grey-banner">SHADOW</h1>
    <p> <strong>Action Points:</strong> 0</p>
    <p> <strong>Duration:</strong> Until next turn.</p>
    <p> <strong>Time (EX*):</strong> Instant - Requires all EX this Cycle</p>
    
    <p> <strong>Effect:</strong> Using Shadow causes one's self to enter a period of rest and recover their action points. Until the start of your next turn, you cannot spend any EX. At the start of your next turn your AP is restored to its maximum value.</p>
    <p> <strong>SPECIAL:</strong>  Any and all creatures can use this skill without training. Additional, this skill opens to level 100 for everyone and does not require any roll to use.</p>
</div>

            
          
!
            
              body {
    font-size:100%;
    background-color:#f5f5f5;
    min-width:310px;
    font-family: Trebuchet MS, Arial, sans-serif; 
    color: #616161;
    margin: 0 auto;
    padding: 0 auto;
}

p, li {
     box-sizing: border-box;
    font-size:1em;
    margin:0em 1em 1em 0.75em;
    padding: 0 1em 0 2em;
}

.center {
    text-align: center;
}

h1 {
    font-family: Futura, Trebuchet MS, Arial, sans-serif; 
    font-size: 2.0em;
    margin:0 0 0.5em 0.25em;
}

img.tok-logo {
    box-sizing: inline-table;
    height: 5em;
    width: 100%;
    background-color: #e0e0e0;
}

.icon-text {
    display:inline-table;
    background-color:#FFFFFF;
    z-index: 2;
    width:2.0em;
    height:2.0em;
    line-height: 2.0em;
    font-weight: bold;
    text-align:center;
    border-radius: 50%;
}

.text-banner {
    display: inline-table;
    width: 100%;
    width: calc(100% - 3.0em);
    padding: 0.46em 0 0.42em 1.5em;
    margin: 0 -5em 0.5em -1.25em;
    position: relative;
    z-index: -1;
    color: #FFFFFF;
}

.skill {
    display: inline-table;
    width: 50%;
    width: calc(50% - 0.126em);
/*     min-width: 21em; */
}

/* 
.skill-banner {
    display:inline-table;
    width:45%;
    width: calc(50% - 3.0em);
    padding: 0.46em 0 0.42em 1.5em;
    margin: 0 -5em 0 -1.25em;
    position: relative;
    z-index: -1;
    color: #FFFFFF;
}
 */
.red-banner {
    background-color: #D32F2F;
}

.red-icon-text {
    color: #D32F2F;
    border: 4px solid #D32F2F;
}

.orange-banner {
    background-color: #F57C00;
}

.orange-icon-text {
    color: #F57C00;
    border: 4px solid #F57C00;
}

.yellow-banner {
    background-color: #FBC02D;
}

.yellow-icon-text {
    color: #FBC02D;
    border: 4px solid #FBC02D;
}

.green-banner {
    background-color: #388E3C;
}

.green-icon-text {
    color: #388E3C;
    border: 4px solid #388E3C;
}

.blue-banner {
    background-color: #0288D1;
}

.blue-icon-text {
    color: #0288D1;
    border: 4px solid #0288D1;
}

.indigo-banner {
    background-color: #303F9F;
}

.indigo-icon-text {
    color: #303F9F;
    border: 4px solid #303F9F;
}

.violet-banner {
    background-color: #7B1FA2;
}

.violet-icon-text {
    color: #7B1FA2;
    border: 4px solid #7B1FA2;
}


.grey-banner {
    background-color: #616161;
}

.grey-icon-text {
    color: #616161;
    border: 4px solid #616161;
}




/* @media only screen and (orientation: landscape) {
    h1
} */

@media (max-width: 34em)
{
    .text-banner {

    width:80%;
}
    .icon-text {
    line-height: 2.0em;
     }

    h1 {
        font-size: 1.25em;
    }
}

@media (max-width: 55em)
{
 .skill {
    display: inline-table;
    width: 100%;
/*     width: calc(50% - 0.126em); */
}
   
}
            
          
!
999px
Loading ..................

Console