a(class='logo', href='http://pentia.dk')
  .logo__icon
  .logo__text pentia
View Compiled
@import "compass/css3";

$device-small: 768px;
$icon-base-size: 36px;
$text-base-size: 200%;
$calc-device-small: 2;
$brand-color: #131217;
$codepen-color: #1d1f20;

@keyframes spin { 
  100% { 
    transform: rotate(360deg); 
  } 
}

html, body {
  xbackground-color: $codepen-color;
  color: white;  
  box-sizing: border-box;
  text-align: center; 
  display: flex;
  align-items: center;
  justify-content: center;  
  min-height: 100vh;
  transform-style: preserve-3d;   
}

.logo{
  text-decoration: none;
  padding: 2em;
  display: inline-flex;  
  align-items: center;  
  color: white;    
  transition: padding 0.5s;  
  position: relative;
  font-family: 'Ubuntu', sans-serif;    
  background-color: $brand-color;
  &:hover{
     padding: 4em;
  }        
  
  &__text{         
    &::before{
      xcontent: '-';
      position: absolute;
      right: 20%;
      top: -14.5%;       
    }
        
    line-height: 1.2;
    position: relative;    
    padding-left: 0.4em;
    font-size: $text-base-size;
     @media (min-width: $device-small){
       font-size:  $text-base-size * $calc-device-small;
    }    
    
    font-variant-ligatures: 
      common-ligatures
      discretionary-ligatures
      historical-ligatures;        
  }

  &__icon {     
  animation:spin 50s linear infinite;
  display: inline-block;
  min-width: $icon-base-size;
  min-height: $icon-base-size;  
  @media (min-width: $device-small){      
      min-width: $icon-base-size * $calc-device-small;
      min-height: $icon-base-size * $calc-device-small;
  }
  xbackground-color: red;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjM2IgogICBoZWlnaHQ9IjM2IgogICBpZD0ic3ZnMzM0MCIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0icGVudGlhbG9nby5zdmciPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTMzNTAiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMzMzQ4IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTUzNiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI4MDMiCiAgICAgaWQ9Im5hbWVkdmlldzMzNDYiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjIuOTcxOTYyNiIKICAgICBpbmtzY2FwZTpjeD0iLTI3LjQyMjk1NiIKICAgICBpbmtzY2FwZTpjeT0iMTcuNSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzMzNDIiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9InRydWUiCiAgICAgYm9yZGVybGF5ZXI9InRydWUiIC8+CiAgPGcKICAgICBpZD0iZzMzNDIiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEpIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDI2LjUsMzIuOSBjIDAuNywwLjIgMS41LDAuNCAyLjIsMC40IGwgMCwwLjEgMCwtMC4xIGMgMy45LDAgNywtMy4yIDcsLTcuMSAwLC0yLjcgLTEuNSwtNS4xIC0zLjksLTYuMyBsIC0wLjEsMCAtOS4yLC01LjEgYyAtMS4xLDAuNiAtMi4yLDEgLTMuNCwxLjEgbCA2LjksMy45IC0wLjEsMCBjIC0yLjYsMS4xIC00LjIsMy43IC00LjIsNi41IDAsMC45IDAuMiwxLjkgMC42LDIuOCAwLjgsLTAuNCAxLjYsLTAuOSAyLjIsLTEuNSAtMC4xLC0wLjQgLTAuMiwtMC44IC0wLjIsLTEuMyAwLC0xLjIgMC41LC0yLjMgMS4zLC0zLjEgMC44LC0wLjggMS45LC0xLjMgMy4xLC0xLjMgMi40LDAgNC40LDIgNC40LDQuNCAwLDIuMyAtMS43LDQuMiAtMy45LDQuNCAtMC45LDAuOCAtMS44LDEuNSAtMi43LDIuMiB6IE0gMi4zLDIwLjggQyAwLjgsMjIuMSAwLDI0IDAsMjYgYyAwLDMuOSAzLjEsNy4xIDcsNy4xIGwgMCwwLjEgMCwtMC4xIGMgMS4xLDAgMi4yLC0wLjMgMy4yLC0wLjggMC4zLC0wLjEgMC41LC0wLjMgMC44LC0wLjUgbCA5LC01LjUgMCwtMC4yIGMgMCwtMS4xIDAuMiwtMi4yIDAuNywtMy4zIGwgLTYuOCw0LjEgMCwtMC45IGMgMCwtMy42IC0yLjcsLTYuNiAtNi4yLC03IGwgMCwwLjYgYyAwLDAuNyAwLDEuNCAwLjIsMi4xIDIsMC40IDMuNSwyLjMgMy41LDQuMyAwLDEuNCAtMC43LDIuOCAtMS44LDMuNiBMIDguOSwzMCBDIDguMywzMC4zIDcuNywzMC41IDcsMzAuNSA0LjYsMzAuNSAyLjYsMjguNSAyLjYsMjYuMSAyLjYsMjUuNSAyLjcsMjQuOSAyLjksMjQuNCAyLjYsMjMuMiAyLjQsMjIgMi4zLDIwLjggWiBtIDksLTIuMyBjIDEsMC42IDEuOSwxLjQgMi42LDIuNCBsIDAsLTguMyAwLjEsMC4xIGMgMS4yLDEgMi43LDEuNSA0LjIsMS41IGwgMC4xLDAgYyAyLjEsMCA0LjEsLTEgNS41LC0yLjcgLTAuNywtMC41IC0xLjUsLTEgLTIuMywtMS4zIC0wLjgsMC45IC0xLjksMS4zIC0zLjEsMS4zIGwgLTAuMSwwIEMgMTUuOSwxMS41IDE0LDkuNiAxNCw3LjIgbCAwLC0wLjMgYyAwLjEsLTIuNCAyLC00LjMgNC40LC00LjMgbCAwLjEsMCBjIDEuNCwwIDIuNywwLjcgMy41LDEuOSAxLjEsMC4zIDIuMiwwLjcgMy4zLDEuMyBDIDI0LjcsMi41IDIxLjksMCAxOC41LDAgbCAtMC4xLDAgYyAtMy43LDAgLTYuNywyLjkgLTcsNi42IGwgMCwwLjUgeiBtIC00LjUsMTAuMiAwLjEsMCBjIDAuOSwwIDEuOCwtMC41IDIuMywtMS4yIC0xLjksLTIuMiAtMi45LC01IC0yLjksLTcuOSAwLjEsLTMuMSAxLjMsLTUuOSAzLjQsLTguMSBsIDAsLTMuNCBDIDkuMSw4LjUgOC41LDkgNy45LDkuNSBjIC0yLjcsMi42IC00LjIsNi4yIC00LjIsMTAgMCwzLjQgMSw2LjUgMy4xLDkuMiB6IE0gMjksMTYuNCAzMiwxOC4xIEMgMzEuNiwxNSAzMC4zLDEyLjEgMjguMSw5LjggMjUuNSw3LjEgMjEuOSw1LjUgMTguMiw1LjQgYyAtMC42LDAgLTEuMywwIC0xLjksMC4xIC0wLjMsMC40IC0wLjUsMSAtMC41LDEuNSAwLDAuNCAwLjEsMC44IDAuMiwxLjIgMC42LC0wLjEgMS4zLC0wLjIgMiwtMC4yIDMuMSwwIDYsMS4zIDguMSwzLjYgMS40LDEuNCAyLjMsMyAyLjksNC44IHogTSAxMi40LDMyLjkgYyAxLjYsMC43IDMuNCwxLjEgNS4yLDEuMSBsIDAuMiwwIGMgMy43LDAgNy4zLC0xLjUgOS45LC00LjEgMS40LC0xLjQgMi41LC0zLjEgMy4zLC00LjkgLTAuNCwtMC44IC0xLjMsLTEuNCAtMi4yLC0xLjQgLTAuNiwxLjcgLTEuNiwzLjMgLTIuOCw0LjUgLTIuMiwyLjIgLTUuMSwzLjQgLTguMSwzLjQgbCAtMC4yLDAgYyAtMC45LDAgLTEuNiwtMC4xIC0yLjMsLTAuMyB6IG0gMTQuMSwwIGMgMC43LDAuMiAxLjUsMC40IDIuMiwwLjQgbCAwLDAuMSAwLC0wLjEgYyAzLjksMCA3LC0zLjIgNywtNy4xIDAsLTIuNyAtMS41LC01LjEgLTMuOSwtNi4zIGwgLTAuMSwwIC05LjIsLTUuMSBjIC0xLjEsMC42IC0yLjIsMSAtMy40LDEuMSBsIDYuOSwzLjkgLTAuMSwwIGMgLTIuNiwxLjEgLTQuMiwzLjcgLTQuMiw2LjUgMCwwLjkgMC4yLDEuOSAwLjYsMi44IDAuOCwtMC40IDEuNiwtMC45IDIuMiwtMS41IC0wLjEsLTAuNCAtMC4yLC0wLjggLTAuMiwtMS4zIDAsLTEuMiAwLjUsLTIuMyAxLjMsLTMuMSAwLjgsLTAuOCAxLjksLTEuMyAzLjEsLTEuMyAyLjQsMCA0LjQsMiA0LjQsNC40IDAsMi4zIC0xLjcsNC4yIC0zLjksNC40IC0wLjksMC44IC0xLjgsMS41IC0yLjcsMi4yIHogTSAyLjMsMjAuOCBDIDAuOCwyMi4xIDAsMjQgMCwyNiBjIDAsMy45IDMuMSw3LjEgNyw3LjEgbCAwLDAuMSAwLC0wLjEgYyAxLjEsMCAyLjIsLTAuMyAzLjIsLTAuOCAwLjMsLTAuMSAwLjUsLTAuMyAwLjgsLTAuNSBsIDksLTUuNSAwLC0wLjIgYyAwLC0xLjEgMC4yLC0yLjIgMC43LC0zLjMgbCAtNi44LDQuMSAwLC0wLjkgYyAwLC0zLjYgLTIuNywtNi42IC02LjIsLTcgbCAwLDAuNiBjIDAsMC43IDAsMS40IDAuMiwyLjEgMiwwLjQgMy41LDIuMyAzLjUsNC4zIDAsMS40IC0wLjcsMi44IC0xLjgsMy42IEwgOC45LDMwIEMgOC4zLDMwLjMgNy43LDMwLjUgNywzMC41IDQuNiwzMC41IDIuNiwyOC41IDIuNiwyNi4xIDIuNiwyNS41IDIuNywyNC45IDIuOSwyNC40IDIuNiwyMy4yIDIuNCwyMiAyLjMsMjAuOCBaIG0gOSwtMi4zIGMgMSwwLjYgMS45LDEuNCAyLjYsMi40IGwgMCwtOC4zIDAuMSwwLjEgYyAxLjIsMSAyLjcsMS41IDQuMiwxLjUgbCAwLjEsMCBjIDIuMSwwIDQuMSwtMSA1LjUsLTIuNyAtMC43LC0wLjUgLTEuNSwtMSAtMi4zLC0xLjMgLTAuOCwwLjkgLTEuOSwxLjMgLTMuMSwxLjMgbCAtMC4xLDAgQyAxNS45LDExLjUgMTQsOS42IDE0LDcuMiBsIDAsLTAuMyBjIDAuMSwtMi40IDIsLTQuMyA0LjQsLTQuMyBsIDAuMSwwIGMgMS40LDAgMi43LDAuNyAzLjUsMS45IDEuMSwwLjMgMi4yLDAuNyAzLjMsMS4zIEMgMjQuNywyLjUgMjEuOSwwIDE4LjUsMCBsIC0wLjEsMCBjIC0zLjcsMCAtNi43LDIuOSAtNyw2LjYgbCAwLDAuNSB6IG0gLTQuNSwxMC4yIDAuMSwwIGMgMC45LDAgMS44LC0wLjUgMi4zLC0xLjIgLTEuOSwtMi4yIC0yLjksLTUgLTIuOSwtNy45IDAuMSwtMy4xIDEuMywtNS45IDMuNCwtOC4xIGwgMCwtMy40IEMgOS4xLDguNSA4LjUsOSA3LjksOS41IGMgLTIuNywyLjYgLTQuMiw2LjIgLTQuMiwxMCAwLDMuNCAxLDYuNSAzLjEsOS4yIHogTSAyOSwxNi40IDMyLDE4LjEgQyAzMS42LDE1IDMwLjMsMTIuMSAyOC4xLDkuOCAyNS41LDcuMSAyMS45LDUuNSAxOC4yLDUuNCBjIC0wLjYsMCAtMS4zLDAgLTEuOSwwLjEgLTAuMywwLjQgLTAuNSwxIC0wLjUsMS41IDAsMC40IDAuMSwwLjggMC4yLDEuMiAwLjYsLTAuMSAxLjMsLTAuMiAyLC0wLjIgMy4xLDAgNiwxLjMgOC4xLDMuNiAxLjQsMS40IDIuMywzIDIuOSw0LjggeiBNIDEyLjQsMzIuOSBjIDEuNiwwLjcgMy40LDEuMSA1LjIsMS4xIGwgMC4yLDAgYyAzLjcsMCA3LjMsLTEuNSA5LjksLTQuMSAxLjQsLTEuNCAyLjUsLTMuMSAzLjMsLTQuOSAtMC40LC0wLjggLTEuMywtMS40IC0yLjIsLTEuNCAtMC42LDEuNyAtMS42LDMuMyAtMi44LDQuNSAtMi4yLDIuMiAtNS4xLDMuNCAtOC4xLDMuNCBsIC0wLjIsMCBjIC0wLjksMCAtMS42LC0wLjEgLTIuMywtMC4zIHoiCiAgICAgICBpZD0icGF0aDMzNDQiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjY2Njc2NjY2NjY3NjY3Nzc3NjY2NzY2NjY2Njc2Njc2NzY3NjY3NzY2NjY2Njc3NjY3Nzc2Nzc2Njc3NjY2Njc2NjY2Njc2NjY2NjY3Njc2NjY3Nzc2Njc3NzY2NjY2Njc2NjY2NjY3NjY3Nzc3NjY2NzY2NjY2Njc2Njc2NzY3NjY3NzY2NjY2Njc3NjY3Nzc2Nzc2Njc3NjY2Njc2NjY2Njc2NjY2NjY3Njc2NjY3Nzc2Njc3NzY2MiIC8+CiAgPC9nPgo8L3N2Zz4=');
  background-size: cover;      
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.