body { font-family: "Rubik", serif; animation: Animation 400s ease infinite; }
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
body.bg1 { background: linear-gradient(to right, #feac5ecc, #c779d0ee, #4bc0c8), url(pixelraster.png); }
body.bg2 { background: linear-gradient(to right, #43c6accc, #191654), url(pixelraster.png);}
body.bg3 { background: linear-gradient(to right, #ff4e50cc, #f9d423), url(pixelraster.png);}
body.bg4 { background: linear-gradient(to right, #fc354ccc, #0abfbc), url(pixelraster.png);}
body.bg5 { background: linear-gradient(to right, #1a2980cc, #26d0ce), url(pixelraster.png);}
body.bg6 { background: linear-gradient(to right, #5433ffcc, #20bdffee, #a5fecb), url(pixelraster.png);}


* {font-familiy: "Rubik";}
h1 { font-size: 5em; font-weight:900; margin:30px 0 20px; color: #fff; text-shadow: 0 0 6px #db000033;}
@media (max-width: 1200px) {
  .fix-indicator { right: 45px !important;}
}
@media (max-width: 992px) {
  h1 { font-size: 4em; }
  .fix-indicator { right: 25px !important;}
}
@media (max-width: 768px) {
  h1 { font-size: 3em; }
  .fix-indicator { right: 25px !important;}
}
.sub-header { display: inline-block; font-size:1em; font-weight: 700; margin: 0px auto 30px; padding: 2px 10px; background: #ffffffee; color: #000; box-shadow: 1px 2px 6px #00000033 inset}
h3 { color: #456; font-size: 12px; letter-spacing: 0.6px; margin: 36px 0 18px; font-weight: 400; text-transform: uppercase; }

.group-margin-top {margin-top:40px;}

.disabled { opacity:0.6; filter:grayscale(1) !important;}
.disabled .fix-indicator { opacity:0.3;} 
.element-to-disable {filter:grayscale(0); position: relative; }
.disabled input {pointer-events:none;}
.input-group-addon { background: #ffffff75;}
.form-control, .input-group-addon { box-shadow: 0 0 transparent; border-color: #fff; border-radius: 0 !important; }

.boxy {
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  background: #fff;
  background: linear-gradient(170deg, #ffffff, #ffffff77);
  backdrop-filter: blur(0.5px);
  border-radius: 40px;
}
.boxy2 {background:#ffffff99; color:#000000cc; font-weight: 400; padding: 12px 0; border-radius:10px; margin-top:20px;}
.boxy2 a { color:#000000cc; font-weight: 600; text-decoration: underline;}
.boxy2 a span { color:#000; }

.px  * {color:#8e3535; font-weight:500;}
.cm  * {color:#255a25; font-weight:500;}
.dpi * {color:#7f7615; font-weight:500;}

.control-label {text-transform: uppercase; }

input[type="number"] { text-align: right;}
.input-group .form-control {padding-right: 3px; }


.fix-indicator { font-size: 18px; z-index:1; cursor:pointer; position: absolute; right: 65px;}
.disabled .fix-indicator { cursor: default; }
.px  .fix-indicator { top: 27px; }
.cm  .fix-indicator { top: 29px;}
.dpi .fix-indicator { top: 5px;}

.tooltip-inner {color: #fff; }

.debug {display:none; margin-top:30px; background:#eeeeee; padding: 20px; border-radius:10px;}

.footer {margin: 5px auto 20px; color:#fff; }
.footer a {color:#fff; font-size: 10px; text-transform: uppercase; font-weight:400;}

.rubik-900 {
  font-family: "Rubik", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}