Styled 3D Text Insets in CSS (draft)

In this example below you will see how to do a Styled 3D Text Insets in CSS (draft) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by deadflowers, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright deadflowers ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Styled 3D Text Insets in CSS (Haml draft)</title>
   <meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="content-language" content="en" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="mobile-device-ready" content="width=device-width">
<meta name="mobile-device-ready" content="700">
<link rel="canonical" href="https://codepen.io/deadflowers/embed/aLLyYr?height=300&amp;slug-hash=aLLyYr&amp;default-tabs=css,result&amp;host=https://codepen.io&amp;embed-version=2" />
 <meta name="viewport" content="width=device-width,minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="HandheldFriendly" content="true" />

<meta http-equiv="cleartype" content="on">

<meta name="language" content="English, en" />

<meta name="robots" content="index,nofollow">
<meta name="Access-Control-Allow-Origin" content="*">
<meta name="Access-Control-Allow-Method" content="GET">
<meta name="referrer" content="unsafe-url">

<meta name="license" content="BSD3">
<meta name="author" content="Ray Kooyenga">
<meta name="rating" content="family-safe" />

  <title>STYLED 3D TEXT & INSETS IN CSS Flexbox Haml</title>
<meta name="description" content="STYLED 3D TEXT & INSETS IN CSS Flexbox, Haml">
<meta itemprop="name" content="STYLED 3D TEXT & INSETS IN CSS Flexbox, Haml">
<meta name="application-name" content="STYLED 3D TEXT & INSETS IN CSS Flexbox,Haml">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="STYLED 3D TEXT & INSETS IN CSS">
<meta name="web-app-title" content="STYLED 3D TEXT & INSETS IN CSS">
<meta name="mobile-web-app-capable" content="yes">
<meta name="MobileOptimized" content="700" />

<link rel="shortcut icon" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/favicon.ico" type="image/x-icon">
<link rel="icon" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/favicon.ico" type="image/x-icon">
<link rel="fluid-icon" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/icon.png">
<link rel="apple-touch-icon" sizes="192x192" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/icon.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/startup-icon.png"> 
<link rel="apple-touch-icon" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/news_192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/news_160x160.png" sizes="160x160"> 
<link rel="icon" type="image/png" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/news_96x96.png" sizes="96x96"> 
<link rel="icon" type="image/png" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/news_16x16.png" sizes="16x16"> 
<link rel="icon" type="image/png" href="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/news_32x32.png" sizes="32x32"> 
<meta name="msapplication-TileColor" content="#000000"> 
<meta name="msapplication-TileImage" content="https://d39dlwgeopmdw0.cloudfront.net/apps/news/img/mstile-144x144.png"> 
<link href="https://fonts.googleapis.com/css?family=Adamina:400|Droid+Serif:400|Playfair+Display:700,900|PT+Serif:400,700" type="text/css" rel="stylesheet" charset="UTF-8" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-105799300-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-105799300-1');
</script><!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NS5G4MM');</script>
<!-- End Google Tag Manager -->

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head></head>
<body>
  <div class='wrap'>
    <header>
      <h1>
        <a>
          Styled 3D Text Insets in CSS
        </a>
      </h1>
      <h1>
        <div id='wheel'>
          <a>⚙</a>
        </div>
        <p>hover for effect</p>
      </h1>
    </header>
  </div>
  <div class='wrap'>
    <div></div>
    <p></p>
  </div>
  <div class='wrap'>
    <div class='gridl'>
      <h5>
      <a arialabel='this is a h5 tag' class='tooltip' href='#5'>h5</a>
      </h5>
      <h4>
      <a arialabel='this is a h4 tag' class='tooltip' href='#4'>h4</a>
      </h4>
      <h3>
      <a arialabel='this is a h3 tag' class='tooltip' href='#3'>h3</a>
      </h3>
      <h2>
      <a arialabel='this is a h2 tag' class='tooltip' href='#2'>h2</a>
      </h2>
      <h1>
      <a arialabel='this is a h1 tag' class='tooltip' href='#1'>h1</a>
      </h1>
    </div>
    <div class='gridm'>
      <h0>
        <a arialabel='this is a jumbo H0 tag' class='tooltip' href='#'>⚜ h0 ⚜</a>
      </h0>
    </div>
    <div class='gridr'>
      <h1>
      <a arialabel='this is a h1 tag' class='tooltip' href='#1'>h1</a>
      </h1>
      <h2>
      <a arialabel='this is a h2 tag' class='tooltip' href='#2'>h2</a>
      </h2>
      <h3>
      <a arialabel='this is a h3 tag' class='tooltip' href='#3'>h3</a>
      </h3>
      <h4>
      <a arialabel='this is a h4 tag' class='tooltip' href='#4'>h4</a>
      </h4>
      <h5>
      <a arialabel='this is a h5 tag' class='tooltip' href='#5'>h5</a>
      </h5>
    </div>
  </div>
  <div class='wrap'>
    <div class='gridm'>
      <h1>
        <p>
          <a class='tooltip' href='https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fcodepen.io%2F&amp;ref_src=twsrc%5Etfw&amp;region=follow_link&amp;screen_name=raymondkooyenga&amp;tw_p=followbutton' rel='noopener' target='_blank' title='Follow @raymondkooyenga on Twitter'>Follow me on Twitter</a>
        </p>
      </h1>
      <h0>
        <div class='spin'>
          <a arialabel='follow me on twitter' class='tooltip' href='https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fcodepen.io%2F&amp;ref_src=twsrc%5Etfw&amp;region=follow_link&amp;screen_name=raymondkooyenga&amp;tw_p=followbutton' rel='noopener' target='_blank' title='Follow @raymondkooyenga'>🦃</a>
        </div>
      </h0>
    </div>
  </div>
  <div class='wrap'>
    <div class='faq'>
      <div class='q'>
        <summary>H0 tags?</summary>
        <details>I know there's no H0 tag, I just made it up :) it's less confusing than an unusually large H5</details>
      </div>
      <div class='q'>
        <summary>Why is it in H-AML</summary>
        <details>This is a test for another project, once satisfactory I found an odd compulsion to do the HTML over with in H-AML and be able to loop the H elements. I don't know actually know H-aml at all so it consisted of banging my head against the wall until it worked, it's not a joke I've hit "run" 50x easy, but alas it works. Notable that a warning is displayed from Codepen for the very word "H-AML". Though it does pique my curiosity, nearly everything does I don't have time for that one.</details>
      </div>
      <div class='q'>
        <summary>fear and loathing with h-aml</summary>
        <details>Beginning very simple I was initially a fan of the idea of playing with H-aml and excited to have a new tool in my arsenal for items such as the main two loops here 4-0 and 1 through 0 or 4 through 1 employing each, down to, and up to which have existed through the course of writing this, in endless variations. Some simple and sleek, and even clever, but finally cluttered and far from elegant. This has included upon initial difficulty counting down in a loop, down to's such as "4.downto(0) do |i|" "0.upto(5) do |i|" finally for testing reasons and the relatively small number of iterations necessary, I settled on each loops specifically calling each step as in "(1,2,3,4).each" which although feels like cheating and fails to take full advantage of the control structures purpose for existing, alas is the most straightforward. And although it looks far more verbose than the original sub 10 line concept, it was a worthwhile process and I feel the next time I set out to use H-aml for any reason I will be coming from a very familiar place and likely not bang my head against the wall or even have to research anything. The bulk of the structure is a combination of balancing the obstacle of my own design, that for the effect to be applied an a href tag must exist on the h1 through 5 or 0 tags. In H-aml this means given the 1 element per line rule, that all such cases doubles line usage among other complications. %h3 %a for instance is not legal</details>
      </div>
      <div class='q'>
        <summary>H-aml tempered enthusiasm</summary>
        <details>Seeking a marriage of aesthetic appeal and the opportunity for iterative functions in abbreviated form with H-AML I concede it is in fact useful and powerful but that not significantly so. in most cases I'm saving for many sacrifices, 50% of code/markup. That sounds significant but its not. By "code" I mean tags the content which is 90% us unchanged iterative structures notwithstanding. "%p hello world" I'm saving 4 characters per paragraph. It's appreciated, but where can I use it? Support is not widespread, to be frank Codepen is the first and last place I've seen it referenced in 4 years. Markdown has many advantages over my own made up markup languages over the years. Support is phenomenal and growing rapidly this offsets many of it's limitations. In this case it would be more familiar, more readable, more cross platform useable, to in retrospect have done this in the ubiquitous javascript. It is no surprise to learn H-aml is born of Ruby. I have all the same complaints with Ruby almost uniquely so, and though I rely when in chromeos, quite heavily on ruby, I have failed consistently to appreciate the love affair many in the mac community, or at Github for instance have with this not so straightforward platform.</details>
      </div>
      <div class='q'>
        <summary>on Flexbox</summary>
        <details>In my effort to stretch further from the scope and purpose of the original test of a font effect, I ventured into H-aml. I can say two things I don't like it, its more trouble than it is worth and that documentation, and implementation are almost equally lacking and inconsistent. I decided flex-box is worth experimentation its built for gridding, and I understand it does this well. So phase two was to experiment with that implementation this has proved to be a disappointment as well. My own observation is that margins, padding, content, border are properties which though in more skilled and knowledgeable hands are likely sufficiently powerful, I am not of the opinion that these technologies are at a point where they achieve successfully what they set out to in any hands but the most knowledgeable. In other words I cannot think of any circumstance where dramatically transforms the way I would do something, nor the time involved. In fact its just more to learn. I am optimistic though because I respect the people like Chris Coyier who are excited about it. Between it being young and likewise my familiarity cursory, in time it can be all its hyped to be and more. Until then a bit of a disappointment, I feel the time I devoted to it has left me with no better skill set for solving these particular problems than existed in the 90's. I have a separate test container I used that I run on jsbin.com and w3schools. I'll post it here to just to have it handy.</details>
      </div>
      <div class='q'>
        <summary>The tool tip hover effect</summary>
        <details>I've included this effect to dress up the hover on the h tags, similar to the effect I  have on one of my websites where a paragraph is illuminated from the background upon a timed hover in css by delayed transition, this was from the authoritative pen example on tool tips in css. You'll note that aria-label has no dash. That's a hack to get the H-aml parser to accept it. The dash though proper for aria or data tags, because the label suffix is not recognized results only in error and failure to compile to HTMl.</details>
      </div>
      <div class='q'>
        <summary>animations and stylesheets</summary>
        <details>for fun and experiment yes I am toying with spinning the graphic UTF-8 text and employing fonts from Medium for no particular reason.</details>
      </div>
    </div>
  </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/deadflowers/styled-3d-text-insets-in-css-draft-aLLyYr */
@charset "UTF-8";
@import url('https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/m.css');
@import url('https://fonts.googleapis.com/css?family=Adamina:400|Droid+Serif:400|Playfair+Display:700,900|PT+Serif:400,700');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  overflow: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse farthest-corner at center center, rgba(0, 0, 0, 0.01) 20%, rgba(0, 0, 0, 0.05) 100%) repeat scroll 0% 0%;
  transition: 2200ms;
}
html,
body {
  text-align: left;
  font-family: 400 0.55555556px 'Adamina', sans-serif !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  color: #474747;
  background: url('https://d39dlwgeopmdw0.cloudfront.net/apps/news/subtle_grunge.png') repeat;
  background-image: url('https://d39dlwgeopmdw0.cloudfront.net/apps/news/subtle_grunge.png') repeat;
  background-color: transparent;
  background-color: #f9f7f1;
  text-decoration: none;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
header {
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2;
  margin-bottom: 10px;
}
h0,
h1 {
  font: 900 96px/1 'Playfair Display', 'PT Sans', 'Nato Sans', 'Lato', Helvetica, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #969595;
  text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
}
h2,
h3 {
  font-family: 400 0.75px 'PT Serif', sans-serif !important;
  font-style: normal;
  color: #969595;
}
h4,
h5 {
  font-family: 400 0.55555556px 'Adamina', sans-serif !important;
}
h0 {
  font-size: 96px;
}
h1 {
  font-size: 72px;
}
h2 {
  font-size: 48px;
}
h3 {
  font-size: 36px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 18px;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h0 a {
  /*color: rgb(47,47,47)!important; */
  /*    text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15)opacity:.98;*/
  text-decoration: none;
  font: normal 72px / normal;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  color: #404040!important;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 0.005em 0em 0 #4e4e4e, 0.005em 0.01em 0 #4e4e4e, 0.005em 0.023em 0 #5a5a5a, 0.005em 0.033em 0 #5a5a5a, 0.005em 0.05em 0 #5a5a5a, 0.005em 0.06291em 0 #505050, 0.08em 0.063em 0.08em rgba(0, 0, 0, 0.7);
  -webkit-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a.link:hover,
a:hover {
  color: rgba(47, 47, 47, 0.5) !important;
  text-shadow: 1px 4px 6px #f9f7f1, 0 0 0 #000, 1px 4px 6px #f9f7f1;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
summary,
details {
  text-align: left;
  text-transform: uppercase;
  font-size: 24px;
}
details {
  padding-left: 30px;
}
p {
  text-align: left;
  text-transform: none;
  font-size: 24px;
}
header p {
  text-align: center;
  font-size: 38px;
  margin: 20px 4px 20px;
  color: rgba(255, 90, 0, 0.5) !important;
}
p,
summary,
details {
  margin: 20px 0 20px 0;
  color: rgba(255, 90, 0, 0.5) !important;
  text-shadow: 1px 4px 6px #f9f7f1, 0 0 0 #000, 1px 4px 6px #f9f7f1;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* top=1em, right=2em, bottom=3em, left=2em */
div.wrap,
div.grid,
header {
  max-width: 930px;
}
div.wrap,
header {
  min-width: 320px;
}
div.wrap {
  width: 83%;
  left: 0px;
  top: 0px;
  right: 0px;
  float: none;
  margin-left: 8%;
  display: flex;
  flex-direction: row;
  align-content: center;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: .31rem;
  flex-wrap: nowrap;
}
.tilt a {
  transform: translateZ(-2954px) translateX(-2745px) rotateY(-76deg);
}
div.wrap header {
  width: 50%;
  left: 0%;
  top: 0%;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: center;
  flex: 50%;
  align-items: center;
  box-sizing: border-box;
  display: flex;
}
div.wrap {
  width: 80%;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
div.gridl {
  order: 1;
  float: left;
  text-align: right;
  flex: 0 0 40%;
  z-index: 2;
  overflow: clip;
  text-overflow: ellipses;
}
div.gridm {
  order: 2;
  float: none;
  text-align: left;
  flex: 0 0 8%;
  z-index: 1;
  padding: 0 0 0 .4rem;
}
div.gridr {
  order: 3;
  float: right;
  text-align: left;
  flex: 0 0 40%;
  z-index: 2;
  overflow: clip;
  text-overflow: ellipses;
}
div.gridl,
div.gridm,
div.gridr {
  justify-content: center;
  left: 0px;
  top: 0px;
  right: 0px;
  margin-left: 0%;
  margin-top: 9vh;
  align-items: center;
  box-sizing: content-box;
  display: flex;
}
.faq,
.q {
  width: 100%;
}
.tooltip {
  cursor: pointer;
  position: relative;
}
.tooltip::before {
  position: absolute;
  top: -6em;
  left: -30px;
  bottom: 8em;
  background-color: transparent;
  border-radius: 5px;
  color: #474747;
  content: attr(arialabel);
  padding: 2em;
  text-transform: none;
  transition: all 2.0s ease;
  width: 120%;
}
.tooltip::after {
  position: relative;
  padding: 10px;
  top: 42px;
  left: -10px;
  content: " ";
  font-size: 0;
  line-height: 0;
  margin-left: 3px;
  width: 0;
}
.tooltip::before,
.tooltip::after {
  opacity: 0;
  pointer-events: none;
  text-align: center;
  line-height: 20px;
  letter-spacing: 1;
  font-size: 24px;
  margin: 50px 0 40px 5px;
  margin: 30px -10px 30px 5px;
  margin: 10px -1px 10px 5px;
  padding: 10px;
  color: rgba(255, 90, 0, 0.5) !important;
  text-transform: none;
  text-shadow: 1px 4px 6px #f9f7f1, 0 0 0 #000, 1px 4px 6px #f9f7f1;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tooltip:focus::before,
.tooltip:focus::after,
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: .99;
  transition: all 2.75s ease;
}
.spin:hover,
div#wheel:hover,
div.gridm:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.spin {
  -webkit-animation: spinnity  6s linear 6s 1;
  animation: spinnit  6s linear 6s 1;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
div#wheel {
  -webkit-animation: spinnity 2s infinite linear forwards;
  animation: spinnit 2s infinite linear forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
div.gridm {
  -webkit-animation: spinnit 4s ease-in-out 2s;
  animation: spinnit 4s ease-in-out 2s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
@-webkit-keyframes spinnit {
  0%,
  50%,
  90%,
  100% {
    text-shadow: #b0b0b0 0 0 1px;
  }
  15% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  60%,
  80%,
  90% {
    text-shadow: #b0b0b0 0 0 2px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  55% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  70% {
    text-shadow: #b0b0b0 0 0 8px;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media (max-width: 700px) {
  .wrap {
    padding: 0 10%;
  }
  #error-debugging-info {
    overflow: auto;
  }
}
@media (max-height: 600px) {
  .error-code {
    margin-top: 10px;
  }
}
@media (max-width: 420px) {
  button,
  [dir='rtl'] button,
  .small-link {
    float: none;
    font-size: .825em;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    width: 100%;
  }
  #details {
    margin: 20px 0 20px 0;
  }
  #details p:not(:first-of-type) {
    margin-top: 10px;
  }
  #details-button {
    display: block;
    margin-top: 20px;
    text-align: center;
    width: 100%;
  }
  .wrap {
    padding: 0 5%;
  }
  #extended-reporting-opt-in {
    margin-top: 24px;
  }
  .nav-wrapper {
    margin-top: 30px;
  }
}
/**
 * Mobile specific styling.
 * Navigation buttons are anchored to the bottom of the screen.
 * Details message replaces the top content in its own scrollable area.
 */
/* Fixed nav. */
@media (min-width: 240px) and (max-width: 420px) and (min-height: 401px), (min-width: 421px) and (min-height: 240px) and (max-height: 560px) {
  body .nav-wrapper {
    background: #f7f7f7;
    bottom: 0;
    box-shadow: 0 -22px 40px #f7f7f7;
    margin: 0;
    max-width: 736px;
    padding-left: 0px;
    padding-right: 48px;
    position: fixed;
    z-index: 2;
  }
  .wrap {
    max-width: 736px;
  }
  #details,
  #main-content {
    padding-bottom: 40px;
  }
  #details {
    padding-top: 5.5vh;
  }
}
@media (max-width: 420px) and (orientation: portrait), (max-height: 560px) {
  body {
    margin: 0 auto;
  }
}
@media screen and (min-width: 570px), screen and (max-width: 952px) {
  html,
  body {
    min-width: 570px!important;
    max-width: 952px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
  }
  div.wrap {
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  div.gridm {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}
@media screen and (min-width: 952px), screen and (max-width: 1280px) {
  html,
  body {
    min-width: 952px!important;
    max-width: 1280px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
  }
  div.wrap {
    min-width: 952px!important;
    max-width: 1200px!important;
    width: 100%!important;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  div.gridm {
    padding-left: .3rem;
    padding-right: .1rem;
  }
}
@media screen and (min-width: 170px) and (max-width: 350px) {
  html,
  body {
    min-width: 170px!important;
    max-width: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
  }
  body {
    zoom: 50%;
  }
}

Comments