/*#F0F1F2
#232625
#4F4948
#FF5629
#FC643E*/



* {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 300;
}

@supports (font-variation-settings: "wght" 300) {
  * {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 300;
  }
}

body {
  overflow-x: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Comfortaa', sans-serif;
  ;
  width: 100%;
  height: 100%;
  color: #F0F1F2;
  background-color: #232625;
  margin: 0;
  font-size: clamp(16px, calc(20px + (36 - 20) * (100vw - 768px)/(1920 - 768)), 48px);
}

.onepixeloff {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onepixeloff a {
  text-decoration: none;
  color: inherit;
}

.onepixeloff a:hover {
  color: #FF5629;
}

.onepixeloff-header {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 2%;
}

.onepixeloff-header h1 {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(42px, calc(20px + (36 - 20) * (100vw - 768px)/(1920 - 768)), 48px);
}

.onepixeloff-header-link:hover {
  color: #F0F1F2 !important;
}



.onepixeloff-soundcloud {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 86vw;
  justify-content: center;
  padding: 2%;
}

.onepixeloff-soundcloud-link {
  font-family: "Comfortaa", sans-serif;
  font-size: clamp(9px, calc(20px + (36 - 20) * (100vw - 768px)/(1920 - 768)), 12px);
}

.onepixeloff-link {
  font-family: "Comfortaa", sans-serif;
  font-size: clamp(12px, calc(20px + (36 - 20) * (100vw - 768px)/(1920 - 768)), 18px);
}

.h1style {
    text-shadow: 1px 1px 1px #232625,
        1px 2px 1px #232625,
        1px 3px 1px #232625,
        1px 4px 1px #232625,
        1px 5px 1px #232625,
        1px 6px 1px #232625,
        1px 7px 1px #232625,
        1px 1px 1px #000,
        1px 2px 1px #000,
            1px 18px 6px rgba(16,16,16,0.8),
    1px 22px 10px rgba(16,16,16,0.4),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.8);
}

.owText{
  text-align:center;
    -webkit-text-stroke:1px white;
    position:relative;
    color: @accent;
    letter-spacing: .24vw;
    font-weight: 700;
    text-shadow:
        
        /*text stroke around letters*/
        0 1px 0 lighten(@base,15%),
        -1px -1px 0 lighten(@base,15%), 
        
        /*main 3d shadow*/
        -1px 0px 0 lighten(@base,6%), 
        -2px 1px 0 lighten(@base,6%), 
        -3px 2px 0 lighten(@base,5%), 
        -4px 3px 0 lighten(@base,4%), 
        -5px 4px 0 lighten(@base,3%), 
        -6px 5px 0 lighten(@base,2%), 
        -7px 6px 0 lighten(@base,1%), 
        -8px 7px 0 @base, 
        -9px 8px 0 darken(@base,1%), 
        -10px 9px 0 darken(@base,2%), 
        -11px 10px 0 darken(@base,3%), 
        -12px 11px 0 darken(@base,4%), 
        -13px 12px 0 darken(@base,5%), 
        -14px 13px 0 darken(@base,6%), 
        -15px 14px 0 darken(@base,7%), 
        -16px 15px 0 darken(@base,8%),
        
        /*top right*/
        0 -1px 1px @scale,
        0 -2px 0px @scale,        
        
        /*bottom left corner*/
        -15px 14px 0px @scale,
        -16px 15px 0px @scale,
        -17px 16px 0px @scale,
        -18px 17px 0px @scale,
        
        
        -2px -1px 0 @scale,
        -3px -0px 0 @scale,
        
        /*top left corner*/
        -19px 15px 0 @scale,
        -18px 14px 0 @scale,
        -17px 13px 0 @scale,
        -16px 12px 0 @scale,
        -15px 11px 0 @scale,
        -14px 10px 0 @scale,
        -13px 9px 0 @scale,
        -12px 8px 0 @scale,
        -11px 7px 0 @scale,
        -10px 6px 0 @scale,
        -9px 5px 0 @scale,
        -8px 4px 0 @scale,
        -7px 3px 0 @scale,
        -6px 2px 0 @scale,
        -5px 1px 0 @scale,
        -4px 0px 0 @scale,
        
        /*lower right / (upper right side for capital T like H etc letters. */ 
        0px 2px 0px @scale,
        -1px 3px 0px @scale,
        -2px 4px 0px @scale,
        -3px 5px 0px @scale,
        -4px 6px 0px @scale,
        -5px 7px 0px @scale, 
        -6px 8px 0px @scale, 
        -7px 9px 0px @scale, 
        -8px 10px 0px @scale, 
        -9px 11px 0px @scale, 
        -10px 12px 0px @scale, 
        -11px 13px 0px @scale, 
        -12px 14px 0px @scale, 
        -13px 15px 0px @scale,
        -14px 16px 0px @scale,
        -15px 17px 0px @scale;
  
  
  
  
}


