LinkStack/themes/stargazer/skeleton-auto.css

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––

- Grid
- Base Styles
- Typography
- Links
- Code
- Spacing
- Utilities
- Misc
- Credit footer

*/

@import url(https://fonts.bunny.net/css?family=roboto:400,500,700,900);

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    position: relative;
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box; }
  .column {
    position: center;
    width: 100%;
    float: center;
    box-sizing: border-box; }
  
  /* For devices larger than 400px */
  @media (min-width: 400px) {
    .container {
      width: 85%;
      padding: 0; }
  }
  
  /* For devices larger than 550px */
  @media (min-width: 550px) {
    .container {
      width: 80%; }
    .column,
    .columns {
      margin-left: 0; }
    .column:first-child,
    .columns:first-child {
      margin-left: 0; }
  
  }
  
  
  /* Base Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* NOTE
  html is set to 62.5% so that all the REM measurements throughout Skeleton
  are based on 10px sizing. So basically 1.5rem = 15px :) */
  
  html {
    font-size: 100%;
    overflow-x: hidden; }

  /* Dark/light mode detection (comment this section out and use the one below for a fixed background color) */

      body {
        font-size: 18px;
        line-height: 24px;
        font-weight: 400;
        background-color: #000;
        font-family: "Roboto";
        color: #FFFFFF;
       }


       ::-webkit-scrollbar {
        display: none;
      }

/* Use this for a fixed background color instead of dark and light mode
    body {
      font-size: 18px;
      line-height: 24px;
      font-weight: 400;
      font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    }
*/
  
  /* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  h1 {
    margin-top: 0;
    margin-bottom: 16px;
    font-weight: 900; }
  h1 { font-size:26px; line-height: 64px; letter-spacing: 0;}
  
  
  /* Larger than phablet */
  @media (min-width: 550px) {
    h1 { font-size: 56px; line-height: 96px;}
  }
  
  p {
    margin-top: 0;
    width: 70% !important; }
  
  
  /* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  a {
    color: #0085FF; 
    text-decoration: none;
  }
  a:hover {
    color: #0085FF; }
  
  .spacing {
    padding: 0 10px;
  }
  
  /* Code
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px; }
  pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre; }
  
  /* Spacing
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  button,
  .button {
    margin-bottom: 1rem; }
  input,
  textarea,
  select,
  fieldset {
    margin-bottom: 1.5rem; }
  pre,
  blockquote,
  dl,
  figure,
  p,
  ol {
    margin-bottom: 2.5rem; }
  
  
  /* Utilities
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .u-full-width {
    width: 100%;
    box-sizing: border-box; }
  .u-max-full-width {
    max-width: 100%;
    box-sizing: border-box; }
  .u-pull-right {
    float: right; }
  .u-pull-left {
    float: left; }
  
  
  /* Misc
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1; }
  
  /* ===== Scrollbar CSS ===== */
    /* Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: #171a1d #31363b;
    }
  
    /* Chrome, Edge, and Safari */
    /* *::-webkit-scrollbar {
      width: 8px;
    }
  
    *::-webkit-scrollbar-track {
      background: #31363b;
    }
  
    *::-webkit-scrollbar-thumb {
      background-color: #171a1d;
      border-radius: 30px;
      border: 3px none #ffffff;
    }
    */

  
/* Credit footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Styling for credit footer text */
.credit-txt {
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}


.credit-icon {
  transform: translateX(15px); }

/* Switches text color for credit footer for dark/light mode */
  .credit-txt-clr{
      color: #FFF !important;
  }


.parallax-background {
  position: absolute;
  margin:0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  perspective: 340px;
  z-index: 0;
}
.object1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  animation: fly 3s linear infinite;
  transform-style: preserve-3d;
  border-radius: 30px;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 545px 307px 0 0 #e8e8e8, 755px 53px 0 0 #f2f2f2, -257px 413px 0 0 #fff, -769px -290px 0 0 #d1d1d1, 600px -415px 0 0 #ededed, 140px -10px 0 0 #f7f7f7, 1299px 205px 0 0 #e6e6e6, 905px 289px 0 0 #ccc, -1321px 147px 0 0 #bfbfbf, -1260px 115px 0 0 #e3e3e3, 239px 391px 0 0 #ededed, -512px 214px 0 0 #dedede, -621px -270px 0 0 #c9c9c9, -697px 321px 0 0 #ccc, -1397px 383px 0 0 #d4d4d4, 1291px -256px 0 0 #e3e3e3, 1027px 456px 0 0 #d9d9d9, -1276px 350px 0 0 #fcfcfc, 794px -398px 0 0 #ccc, -446px 21px 0 0 #c7c7c7, -851px -413px 0 0 #f0f0f0, 777px 455px 0 0 #f0f0f0, -1438px 322px 0 0 #e3e3e3, -1300px -21px 0 0 #fff, -771px 14px 0 0 #e6e6e6, 616px -206px 0 0 #cfcfcf, 357px -169px 0 0 #ededed, 1400px 247px 0 0 #d4d4d4, -546px 215px 0 0 #d6d6d6, 1054px -25px 0 0 #fff, -1488px 130px 0 0 #d4d4d4, -1306px 81px 0 0 #d4d4d4, 431px -146px 0 0 #dedede, 222px -385px 0 0 #f2f2f2, -1199px -272px 0 0 #fcfcfc, 1141px 36px 0 0 #f0f0f0, 1312px 314px 0 0 #f0f0f0, -655px -167px 0 0 #d9d9d9, -1250px 370px 0 0 #e8e8e8, 144px 144px 0 0 #d4d4d4, 404px 307px 0 0 #ededed, -207px 369px 0 0 #d9d9d9, -1179px -404px 0 0 #ededed, -1144px -301px 0 0 #fafafa, -1396px 129px 0 0 #e3e3e3, -394px 315px 0 0 #c7c7c7, -1387px -310px 0 0 #dedede, 1268px 212px 0 0 #e8e8e8, 611px -350px 0 0 #f5f5f5, -1026px 48px 0 0 #d4d4d4, -1420px 46px 0 0 #e0e0e0, -978px -102px 0 0 #ccc, -1250px 389px 0 0 #fcfcfc, 49px 381px 0 0 #dedede, 96px -440px 0 0 #ededed, 596px -338px 0 0 #f0f0f0, -761px 292px 0 0 #f7f7f7, 593px -139px 0 0 #c2c2c2, -430px 296px 0 0 #c2c2c2, -1172px 144px 0 0 #fff, 1488px 34px 0 0 #e3e3e3, 86px 46px 0 0 #d9d9d9, -1053px -354px 0 0 #ebebeb, -731px 359px 0 0 #f2f2f2, -892px -452px 0 0 #fcfcfc, 183px -84px 0 0 #dedede, -637px -106px 0 0 #e0e0e0, -643px 273px 0 0 #d9d9d9, 427px 370px 0 0 #ededed, 383px -407px 0 0 #cfcfcf, -242px 281px 0 0 #dedede, 1336px -141px 0 0 #fff, -1279px 63px 0 0 #ebebeb, 1478px 429px 0 0 #e8e8e8, -900px -180px 0 0 #ebebeb, -1106px -406px 0 0 #cfcfcf, 541px 212px 0 0 #f0f0f0, 325px 120px 0 0 #f0f0f0, -461px -98px 0 0 #fff, -643px -286px 0 0 #fafafa, -1220px 208px 0 0 #c2c2c2, 1353px 469px 0 0 #e8e8e8, -993px 429px 0 0 #fff, -224px 19px 0 0 #ebebeb, 414px 123px 0 0 #e8e8e8, 129px 68px 0 0 #d9d9d9, -643px -346px 0 0 #c2c2c2, 1168px 312px 0 0 #c7c7c7, 323px -205px 0 0 #f5f5f5, 144px -449px 0 0 #ebebeb, 426px -109px 0 0 #bfbfbf, -1473px -246px 0 0 #ebebeb, 769px 388px 0 0 #ebebeb, -396px -126px 0 0 #d9d9d9, -1461px 385px 0 0 #d9d9d9, -744px 418px 0 0 #f5f5f5, 1327px -342px 0 0 #f7f7f7, 839px 177px 0 0 #f7f7f7, 268px 175px 0 0 #f7f7f7, 107px -442px 0 0 #e8e8e8, -638px 44px 0 0 #d4d4d4, 139px -412px 0 0 #c7c7c7, 549px 411px 0 0 #e8e8e8, -1339px -268px 0 0 #f2f2f2, 1116px -197px 0 0 #c7c7c7, 1175px -123px 0 0 #e6e6e6, -162px 110px 0 0 #dedede, 54px -444px 0 0 #fcfcfc, 364px 453px 0 0 #f5f5f5, 1172px 299px 0 0 #c9c9c9, 1231px 244px 0 0 #fff, -617px 193px 0 0 #d9d9d9, -1464px -141px 0 0 #d9d9d9, 1076px -248px 0 0 #fff, 104px 330px 0 0 #c2c2c2, -1201px 275px 0 0 #d4d4d4, 1225px -253px 0 0 #e0e0e0, -1215px -321px 0 0 #f7f7f7, 1415px 383px 0 0 #f0f0f0, -1124px 26px 0 0 #e8e8e8, 934px 446px 0 0 #fff, 1123px -231px 0 0 #f0f0f0, -56px -17px 0 0 #e6e6e6, -260px 209px 0 0 #f0f0f0, 541px -10px 0 0 #d1d1d1, -948px -78px 0 0 #f7f7f7, -294px -432px 0 0 #d9d9d9, -105px 33px 0 0 #c4c4c4, 552px -147px 0 0 #d9d9d9, -1205px -418px 0 0 #e8e8e8, -1211px -465px 0 0 #d6d6d6, -557px 305px 0 0 #c4c4c4, -123px 475px 0 0 #f7f7f7, 635px 178px 0 0 #e0e0e0, 1275px -128px 0 0 #ccc, -690px -334px 0 0 #dbdbdb, -178px -399px 0 0 #f2f2f2, 1312px -245px 0 0 #f5f5f5, -192px -275px 0 0 #d9d9d9, 266px -256px 0 0 #d4d4d4, 1391px -390px 0 0 #d9d9d9, -643px -284px 0 0 #d9d9d9, -1116px 430px 0 0 #f7f7f7, -761px -262px 0 0 #c9c9c9, -1391px -404px 0 0 #d4d4d4, -1288px 405px 0 0 #fafafa, -1266px -200px 0 0 #fafafa, -418px 84px 0 0 #f7f7f7, 950px 93px 0 0 #e3e3e3, -680px 84px 0 0 #e8e8e8, 1404px 43px 0 0 #e8e8e8, 418px -291px 0 0 #fff, -1491px -384px 0 0 #d9d9d9, -865px -126px 0 0 #c7c7c7, 537px -149px 0 0 #fafafa, -1036px 342px 0 0 #cfcfcf, -228px -301px 0 0 #f
}
.object1:after,
.object1:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
}
.object1:before {
  transform: translateZ(-320px);
  animation: fade1 3s linear infinite;
}
.object1:after {
  transform: translateZ(-640px);
  animation: fade2 3s linear infinite;
}
@-moz-keyframes fly {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translateZ(320px);
  }
}
@-webkit-keyframes fly {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translateZ(320px);
  }
}
@-o-keyframes fly {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translateZ(320px);
  }
}
@keyframes fly {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translateZ(320px);
  }
}
@-moz-keyframes fade1 {
  0% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade1 {
  0% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fade1 {
  0% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade1 {
  0% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fade2 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@-webkit-keyframes fade2 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@-o-keyframes fade2 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes fade2 {
  0% {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}