@font-face {
  font-family: "title"; font-weight: 200 700;
  src: url("/static/other/team/fonts/oswald.ttf") format("truetype");
}
@font-face {
  font-family: "default"; font-weight: 400;
  src: url("/static/other/team/fonts/chirp.woff") format("woff");
}
@font-face {
  font-family: "fancy"; font-weight: 400;
  src: url("/static/other/team/fonts/nosynote.woff") format("woff");
}
@font-face {
  font-family: "discord"; font-weight: 400;
  src: url("/static/other/team/fonts/tiny/ggsans.woff") format("woff");
}
@font-face {
  font-family: "google"; font-weight: 400;
  src: url("/static/other/team/fonts/tiny/googlesanstextm.woff") format("woff");
}

body {
  background-color: black;
  background-image: url("/static/ssoggycat/team/images/stars.webp");
  background-repeat: no-repeat; background-size: cover; background-attachment: fixed;
  padding: 0; margin: 0;
  overflow: hidden;
  height: auto;
}
.site {
  position: relative; overflow-y: auto;
  height: 100vh;
  display: flex;  flex-direction: column;
  -ms-overflow-style: none; scrollbar-width: none;
}
.site::-webkit-scrollbar {display: none}

.intro {
  z-index: 999;
}
.overlay {
  background-color: black;
  width: 100%; height: 100vh;
  display: flex;
  justify-content: center; align-items: center;
  z-index: 5000;
}
.flash {
  opacity: 0; position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: lightgray;
  pointer-events: none; z-index: 2000;
}
.smallsog {
  margin: auto; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 150px;
  animation: shake 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
  z-index: 1900; user-select: none;
}
.smallsogt {
  position: absolute;
  top: 60%; left: 0; right: 0;
  text-align: center; font-family: "fancy";
  font-size: 25px; color: grey;
  opacity: 0; transition: opacity 0.5s ease-in-out;
  z-index: 900; user-select: none;
}
.skipintro {
  position: absolute;
  top: 10px; right: 10px;
  opacity: 0.5;
}

.pet {
  position: fixed;
  background-image: url("/static/ssoggycat/team/images/pet.gif");
  background-repeat: repeat-x;
  width: 100%; height: 100px;
  opacity: 0.1; z-index: -1;
  animation: scroll 10s linear infinite;
}

.sogs {
  position: fixed; display: flex;
  height: 100%; width: 100%;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: -1; user-select: none; opacity: 0.25;
}

.title {
  font-family: "title", sans-serif;
  position: fixed; top: 20px;
  left: 50%; transform: translateX(-50%);
  font-size: 80px;
  color: white;
  z-index: -1; animation: flip 3s linear infinite; transition: opacity 0.5s ease;
  user-select: none;
}
.ghost {
  position: fixed;
  font-size: 80px;
  font-family: "title", sans-serif;
  color: rgba(255, 255, 255, 0.692);
  pointer-events: none;
  animation: fadeout 0.5s linear forwards;
  z-index: -1; user-select: none; transition: opacity 0.5s ease;
}

@keyframes fadeout {
  from { opacity: 0.1; }
  to { opacity: 0; }
}

a {
  font-family: "default", sans-serif;
  color: white;
}

.buddypals {
  position: relative; top: 120px;
  width: 80%; max-width: 700px; height: fit-content;
  left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  animation: levitate 3s ease-in-out infinite; pointer-events: all;
}

.buddy {
  outline: solid rgba(255, 255, 255, 0.144) 1px;
  text-decoration: none !important;
  height: fit-content; margin: 20px; padding: 10px;
  display: flex; overflow: hidden; border-radius: 20px;
  flex-direction: column; justify-content: center; align-items: center; text-align: center;
  backdrop-filter: blur(9px) saturate(0.5);
  user-select: none; pointer-events: all;
}
.buddy img {
  width: 100%; height: auto; border-radius: 10px;
}

.small {margin: 5px}
.big {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px; margin-bottom: 0;
  width: 80%; height: fit-content;
}

.plus {
  text-decoration: none !important;
  height: auto; justify-content: center; align-items: center;
  display: flex; overflow: hidden; font-size: 50px;
  flex-direction: column; transform: rotate(-10deg);
}

.right {transform: skew(-5deg, -5deg)}
.left {transform: skew(5deg, 5deg)}
.padtop {padding-top: 5px}

.bigtext {font-size: 20px}
.smalltext {font-size: 15px; color: #71767b}

.buttons {
  position: fixed; display: flex;  flex-wrap: wrap;
  width: 80%; height: fit-content; top: 105%;
  left: 50%; transform: translateX(-50%);
  padding-bottom: 200px; z-index: 10;
}

.button {
  display: flex; flex-direction: row;
  align-items: center; padding-left: 10px; padding-right: 10px;
  width: 250px; height: 75px; text-decoration: none;
  border-radius: 20px; margin: 10px; gap: 5px;
  flex: 1 1 calc(50% - 20px); box-sizing: border-box;
  user-select: none; cursor: pointer;
}
.icon {
  width: 50px; height: 50px;
  margin-right: 5px;
}

.b1 {
  background-color: #14171A;
  font-size: 30px;
}
.b2 {
  background-color: #282b30;
  background-image: url("/static/ssoggycat/team/images/discordbg.webp");
  background-position: center; background-repeat: no-repeat;
  background-size: cover;
  font-family: "discord", sans-serif;
  font-size: 30px;
}
/* .discord {
  position: fixed; display: flex;
  width: 100vw; height: 100vh;
  justify-content: center; align-items: center;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px);
  color: #fff;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.widgetbot {width: 80%; height: 80%}
.dbutton {
  position: fixed;
  width: 30px; height: 30px;
  font-size: 16px; text-decoration: none; line-height: 0;
  border-radius: 30px; margin: 10px; padding: 0;
  background-color: #282b30; color: white;
  user-select: none;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; cursor: pointer;
}
.close {top: 0; left: 0}
.join {top: 0; right: 0} */
.b3 {
  background-color: #DFE3E8;
  background-image: url("/static/ssoggycat/team/images/drivebg.webp");
  background-position: center; background-repeat: no-repeat;
  background-size: cover;
  color: black;
  font-family: "google", sans-serif;
  font-size: 25px;
}
.b4 {
  font-family: 'Brush Script MT', cursive;
  font-size: 22px;
}

#cocaine {
  outline: solid 1px red;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999;
  object-fit: fill;
  display: none;
}

#video-background {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -999;
  object-fit: cover;
}

.song {
  position: fixed;
  bottom: 30px; left: -300px;
  color: white; font-family: "fancy", sans-serif;
  text-decoration: none;
  z-index: 975; display: none;
  animation: slideoff 7.5s ease-in-out forwards;
}

.footer {
  position: fixed; display: flex;
  color: white; font-size: 10px;
  opacity: 0.5; gap: 5px; z-index: 900;
  width: 100%; bottom: 15px;
  justify-content: center;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 2px;
}
.footer a {text-decoration: inherit; color: inherit}

.volumeslider {
  bottom: 5px; left: 0;
  width: 100px; height: 30px;
  color: white; position: fixed; display: flex;
  align-items: center; justify-content: center;
  gap: 3px; z-index: 950; opacity: 0.5;
}
/* slider body */
.slider[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 55px; height: 10px; border: none;
  background: none;
  background-image: url("/static/ssoggycat/team/images/sliderbg.png");
  background-size: cover; background-position: center; background-blend-mode: multiply;
}
/* slider */
.slider[type="range"]:focus {outline: none} .slider[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  width: 22px; height: 22px;
  background-image: url("/static/ssoggycat/team/images/paw.png");
  background-size: cover;
}

.footerb {
  bottom: 35px; width: 100%;
  display: flex; justify-content: center; align-items: bottom;
  left: 50%; transform: translateX(-50%);
  position: fixed; z-index: 100;
  image-rendering: pixelated; image-rendering: optimize-contrast;
  image-rendering: optimizeSpeed; -ms-interpolation-mode: nearest-neighbor;
}
.footerb a {position: relative; display: inline-block; margin-left: 2px; margin-right: 2px}
.footerb a::after, .footerb div[popup]::after {
  content: attr(popup); position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5); color: #fff;
  padding: 2px 6px; font-size: 11px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 4px; margin-bottom: 4px; z-index: 10;
}
.footerb a:hover::after, .footerb div[popup]:hover::after {opacity: 1}
.footerbcopied {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5); color: #fff;
  padding: 2px 6px; font-size: 20px; white-space: nowrap;
  pointer-events: none; transition: opacity 0.2s ease; opacity: 0;
  border-radius: 4px; margin-bottom: 4px; z-index: 1200000;
}

.increment {background-image: url("/static/other/team/images/88x31/easrng-increment.gif")}

.lol {
  position: fixed; background-color: rgba(0, 0, 0, 0.5);
  width: 100%; height: 100vh;
  display: flex; justify-content: center; align-items: center;
  z-index: 10000;  display: none; user-select: none;
}
.lolimg {position: fixed; height: 50%; width: auto; z-index: 1000; user-select: none}

@keyframes flip {0% {transform: translateX(-50%) rotateY(0deg)} 50% {transform: translateX(-50%) rotateY(180deg)} 100% {transform: translateX(-50%) rotateY(360deg)}}
@keyframes levitate {0%, 100% {transform: translateX(-50%) translateY(0)} 50% {transform: translateX(-50%) translateY(-10px)}}
@keyframes scroll {0% {background-position: 0 0} 100% {background-position: -100% 0}}
@keyframes slideoff {10% {left: -300px} 30% {left: 10px} 60% {left: 10px} 90% {left: -300px}}

/* http://animista.net/license */
@keyframes shake{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}20%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}30%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}50%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}70%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}80%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}90%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}
@keyframes slide{0%{transform:translateY(0) rotateX(0) scale(1);transform-origin:50% -500px;opacity:1}100%{transform:translateY(-600px) rotateX(20deg) scale(6);transform-origin:50% 200%;opacity:0}}

/* https://pajasevi.github.io/CSSnowflakes */
.snowflake,.snowflake .inner{opacity: 0.5;animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:600;-webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:-1s}.snowflake:nth-of-type(0) .inner{animation-delay:-1s}.snowflake:first-of-type{left:10%;animation-delay:0s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:0s}.snowflake:nth-of-type(2){left:20%;animation-delay:-0.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:5s}.snowflake:nth-of-type(3){left:30%;animation-delay:1s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:3s}.snowflake:nth-of-type(4){left:40%;animation-delay:1s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:1s}.snowflake:nth-of-type(5){left:50%;animation-delay:2s}.snowflake:nth-of-type(5) .inner{animation-delay:7s}.snowflake:nth-of-type(6){left:60%;animation-delay:1s}.snowflake:nth-of-type(7){left:70%;animation-delay:0s}.snowflake:nth-of-type(7) .inner{animation-delay:1.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:-1s}.snowflake:nth-of-type(9){left:90%;animation-delay:0.5s}.snowflake:nth-of-type(9) .inner{animation-delay:2s}.snowflake:nth-of-type(10){left:25%;animation-delay:-1s}.snowflake:nth-of-type(11){left:65%;animation-delay:1.5s}