@font-face {
    font-family: 'FixederSys';
    src:  url('../fonts/FixederSys2x.ttf') format('truetype');
}

@keyframes converge {
 0% {text-shadow: rgba(0, 0, 0, 0.8361107273433098) 6.0px 0 0, rgba(255, 255, 255, 0.9569224401158167) -5.0px 0 0;}
 1% {text-shadow: rgba(0, 0, 0, 0.8619150110069808) 5.95px 0 0, rgba(255, 255, 255, 0.9579050158210693) -4.95px 0 0;}
 2% {text-shadow: rgba(0, 0, 0, 0.854336177145079) 5.9px 0 0, rgba(255, 255, 255, 0.8426867483104116) -4.9px 0 0;}
 3% {text-shadow: rgba(0, 0, 0, 0.9236866898385188) 5.85px 0 0, rgba(255, 255, 255, 0.821628447103927) -4.85px 0 0;}
 4% {text-shadow: rgba(0, 0, 0, 0.8585164669305969) 5.8px 0 0, rgba(255, 255, 255, 0.9886992839559834) -4.8px 0 0;}
 5% {text-shadow: rgba(0, 0, 0, 0.8219830480816586) 5.75px 0 0, rgba(255, 255, 255, 0.9484480449115142) -4.75px 0 0;}
 6% {text-shadow: rgba(0, 0, 0, 0.8003809923844546) 5.7px 0 0, rgba(255, 255, 255, 0.8487031108723073) -4.7px 0 0;}
 7% {text-shadow: rgba(0, 0, 0, 0.8219776552014745) 5.65px 0 0, rgba(255, 255, 255, 0.9113050127726174) -4.65px 0 0;}
 8% {text-shadow: rgba(0, 0, 0, 0.9183556894624699) 5.6px 0 0, rgba(255, 255, 255, 0.8550701555053435) -4.6px 0 0;}
 9% {text-shadow: rgba(0, 0, 0, 0.805410457966203) 5.55px 0 0, rgba(255, 255, 255, 0.8329987799719435) -4.55px 0 0;}
 10% {text-shadow: rgba(0, 0, 0, 0.8398715925070842) 5.5px 0 0, rgba(255, 255, 255, 0.9482139656058877) -4.5px 0 0;}
 11% {text-shadow: rgba(0, 0, 0, 0.967386840612134) 5.45px 0 0, rgba(255, 255, 255, 0.8766333722942649) -4.45px 0 0;}
 12% {text-shadow: rgba(0, 0, 0, 0.897129710183972) 5.4px 0 0, rgba(255, 255, 255, 0.8057922325743391) -4.4px 0 0;}
 13% {text-shadow: rgba(0, 0, 0, 0.9053727693999201) 5.35px 0 0, rgba(255, 255, 255, 0.9054686470293101) -4.35px 0 0;}
 14% {text-shadow: rgba(0, 0, 0, 0.82040606118395) 5.3px 0 0, rgba(255, 255, 255, 0.8027565893856392) -4.3px 0 0;}
 15% {text-shadow: rgba(0, 0, 0, 0.9088155190766086) 5.25px 0 0, rgba(255, 255, 255, 0.8311901733209509) -4.25px 0 0;}
 16% {text-shadow: rgba(0, 0, 0, 0.830204171315196) 5.2px 0 0, rgba(255, 255, 255, 0.8610423937277876) -4.2px 0 0;}
 17% {text-shadow: rgba(0, 0, 0, 0.9993440956157889) 5.15px 0 0, rgba(255, 255, 255, 0.8785756628537958) -4.15px 0 0;}
 18% {text-shadow: rgba(0, 0, 0, 0.8440951076104983) 5.1px 0 0, rgba(255, 255, 255, 0.8367897342791965) -4.1px 0 0;}
 19% {text-shadow: rgba(0, 0, 0, 0.8794669548632236) 5.05px 0 0, rgba(255, 255, 255, 0.8658150502454226) -4.05px 0 0;}
 20% {text-shadow: rgba(0, 0, 0, 0.8296208755041845) 5.0px 0 0, rgba(255, 255, 255, 0.8508951332041956) -4.0px 0 0;}
 21% {text-shadow: rgba(0, 0, 0, 0.9374895228216961) 4.95px 0 0, rgba(255, 255, 255, 0.9407681729537316) -3.95px 0 0;}
 22% {text-shadow: rgba(0, 0, 0, 0.9472441467097896) 4.9px 0 0, rgba(255, 255, 255, 0.8108230906405419) -3.9px 0 0;}
 23% {text-shadow: rgba(0, 0, 0, 0.8841608212385841) 4.85px 0 0, rgba(255, 255, 255, 0.9467742323921511) -3.8499999999999996px 0 0;}
 24% {text-shadow: rgba(0, 0, 0, 0.9857281595178842) 4.8px 0 0, rgba(255, 255, 255, 0.983746771430065) -3.8px 0 0;}
 25% {text-shadow: rgba(0, 0, 0, 0.8901276017385813) 4.75px 0 0, rgba(255, 255, 255, 0.9006720333978879) -3.75px 0 0;}
 26% {text-shadow: rgba(0, 0, 0, 0.8420623794073254) 4.7px 0 0, rgba(255, 255, 255, 0.841030258954916) -3.7px 0 0;}
 27% {text-shadow: rgba(0, 0, 0, 0.80500475794336) 4.65px 0 0, rgba(255, 255, 255, 0.8719997374695452) -3.65px 0 0;}
 28% {text-shadow: rgba(0, 0, 0, 0.8263800795911168) 4.6px 0 0, rgba(255, 255, 255, 0.9560571433379201) -3.5999999999999996px 0 0;}
 29% {text-shadow: rgba(0, 0, 0, 0.9522238613350336) 4.55px 0 0, rgba(255, 255, 255, 0.8677264298768816) -3.55px 0 0;}
 30% {text-shadow: rgba(0, 0, 0, 0.8633010908515628) 4.5px 0 0, rgba(255, 255, 255, 0.8370655185763168) -3.5px 0 0;}
 31% {text-shadow: rgba(0, 0, 0, 0.833147207138388) 4.45px 0 0, rgba(255, 255, 255, 0.9032649254449511) -3.45px 0 0;}
 32% {text-shadow: rgba(0, 0, 0, 0.911593155082442) 4.4px 0 0, rgba(255, 255, 255, 0.9704127292549265) -3.4px 0 0;}
 33% {text-shadow: rgba(0, 0, 0, 0.8730770169688556) 4.35px 0 0, rgba(255, 255, 255, 0.8418315619280776) -3.3499999999999996px 0 0;}
 34% {text-shadow: rgba(0, 0, 0, 0.8254344860492141) 4.3px 0 0, rgba(255, 255, 255, 0.945122258350945) -3.3px 0 0;}
 35% {text-shadow: rgba(0, 0, 0, 0.8994536950486153) 4.25px 0 0, rgba(255, 255, 255, 0.9635174671899864) -3.25px 0 0;}
 36% {text-shadow: rgba(0, 0, 0, 0.8059786830820536) 4.2px 0 0, rgba(255, 255, 255, 0.8107823840459341) -3.2px 0 0;}
 37% {text-shadow: rgba(0, 0, 0, 0.8356685072101536) 4.15px 0 0, rgba(255, 255, 255, 0.8490396342365222) -3.15px 0 0;}
 38% {text-shadow: rgba(0, 0, 0, 0.870306753026597) 4.1px 0 0, rgba(255, 255, 255, 0.8684046884770916) -3.0999999999999996px 0 0;}
 39% {text-shadow: rgba(0, 0, 0, 0.829512957206739) 4.05px 0 0, rgba(255, 255, 255, 0.920924832912171) -3.05px 0 0;}
 40% {text-shadow: rgba(0, 0, 0, 0.981042227568678) 4.0px 0 0, rgba(255, 255, 255, 0.8478604614587707) -3.0px 0 0;}
 41% {text-shadow: rgba(0, 0, 0, 0.9028953642095886) 3.9499999999999997px 0 0, rgba(255, 255, 255, 0.9836375058993726) -2.9499999999999997px 0 0;}
 42% {text-shadow: rgba(0, 0, 0, 0.8298506090024876) 3.9px 0 0, rgba(255, 255, 255, 0.8122960604729693) -2.9px 0 0;}
 43% {text-shadow: rgba(0, 0, 0, 0.9574737190797513) 3.85px 0 0, rgba(255, 255, 255, 0.8207214451650879) -2.85px 0 0;}
 44% {text-shadow: rgba(0, 0, 0, 0.9912354008852822) 3.8px 0 0, rgba(255, 255, 255, 0.9258944470696935) -2.8px 0 0;}
 45% {text-shadow: rgba(0, 0, 0, 0.964617559155446) 3.75px 0 0, rgba(255, 255, 255, 0.8413653094926936) -2.75px 0 0;}
 46% {text-shadow: rgba(0, 0, 0, 0.8556860472070148) 3.6999999999999997px 0 0, rgba(255, 255, 255, 0.8039703790715326) -2.6999999999999997px 0 0;}
 47% {text-shadow: rgba(0, 0, 0, 0.9786225078037258) 3.65px 0 0, rgba(255, 255, 255, 0.8532601491001363) -2.65px 0 0;}
 48% {text-shadow: rgba(0, 0, 0, 0.8136939294439446) 3.5999999999999996px 0 0, rgba(255, 255, 255, 0.9066287030351223) -2.5999999999999996px 0 0;}
 49% {text-shadow: rgba(0, 0, 0, 0.9115638029179485) 3.55px 0 0, rgba(255, 255, 255, 0.8155810075227841) -2.55px 0 0;}
 50% {text-shadow: rgba(0, 0, 0, 0.8486201913333553) 3.5px 0 0, rgba(255, 255, 255, 0.8457649243118975) -2.5px 0 0;}
 51% {text-shadow: rgba(0, 0, 0, 0.8414566201644388) 3.4499999999999997px 0 0, rgba(255, 255, 255, 0.9361224309069724) -2.4499999999999997px 0 0;}
 52% {text-shadow: rgba(0, 0, 0, 0.8359647720401094) 3.4px 0 0, rgba(255, 255, 255, 0.8149059343179613) -2.4px 0 0;}
 53% {text-shadow: rgba(0, 0, 0, 0.9116885963738237) 3.3499999999999996px 0 0, rgba(255, 255, 255, 0.8478810737968121) -2.3499999999999996px 0 0;}
 54% {text-shadow: rgba(0, 0, 0, 0.9156512221006986) 3.3px 0 0, rgba(255, 255, 255, 0.8255903859323139) -2.3px 0 0;}
 55% {text-shadow: rgba(0, 0, 0, 0.8153528842487034) 3.25px 0 0, rgba(255, 255, 255, 0.8994146728664133) -2.25px 0 0;}
 56% {text-shadow: rgba(0, 0, 0, 0.8635217426110132) 3.1999999999999997px 0 0, rgba(255, 255, 255, 0.8100068480800539) -2.1999999999999997px 0 0;}
 57% {text-shadow: rgba(0, 0, 0, 0.8694106443899178) 3.15px 0 0, rgba(255, 255, 255, 0.8650065669920302) -2.15px 0 0;}
 58% {text-shadow: rgba(0, 0, 0, 0.9205282486640333) 3.0999999999999996px 0 0, rgba(255, 255, 255, 0.9146371017699718) -2.0999999999999996px 0 0;}
 59% {text-shadow: rgba(0, 0, 0, 0.9216335826736727) 3.05px 0 0, rgba(255, 255, 255, 0.9535489883131107) -2.05px 0 0;}
 60% {text-shadow: rgba(0, 0, 0, 0.8678550560876669) 3.0px 0 0, rgba(255, 255, 255, 0.9922895844184012) -2.0px 0 0;}
 61% {text-shadow: rgba(0, 0, 0, 0.8047208304855602) 2.9499999999999997px 0 0, rgba(255, 255, 255, 0.8072053478662209) -1.9499999999999997px 0 0;}
 62% {text-shadow: rgba(0, 0, 0, 0.8742226362552165) 2.9px 0 0, rgba(255, 255, 255, 0.9882488598219596) -1.9px 0 0;}
 63% {text-shadow: rgba(0, 0, 0, 0.8187279699943009) 2.8499999999999996px 0 0, rgba(255, 255, 255, 0.847193828631679) -1.8499999999999996px 0 0;}
 64% {text-shadow: rgba(0, 0, 0, 0.915873594484333) 2.8px 0 0, rgba(255, 255, 255, 0.9951780311982585) -1.7999999999999998px 0 0;}
 65% {text-shadow: rgba(0, 0, 0, 0.9091957667405316) 2.75px 0 0, rgba(255, 255, 255, 0.9785125139107118) -1.75px 0 0;}
 66% {text-shadow: rgba(0, 0, 0, 0.9732074805184896) 2.6999999999999997px 0 0, rgba(255, 255, 255, 0.8549161753597928) -1.6999999999999997px 0 0;}
 67% {text-shadow: rgba(0, 0, 0, 0.9942565533650556) 2.65px 0 0, rgba(255, 255, 255, 0.8763648231855105) -1.65px 0 0;}
 68% {text-shadow: rgba(0, 0, 0, 0.9965568662919517) 2.5999999999999996px 0 0, rgba(255, 255, 255, 0.9761753235501034) -1.5999999999999996px 0 0;}
 69% {text-shadow: rgba(0, 0, 0, 0.955938836304943) 2.55px 0 0, rgba(255, 255, 255, 0.9003910147622634) -1.5499999999999998px 0 0;}
 70% {text-shadow: rgba(0, 0, 0, 0.9485273044201737) 2.5px 0 0, rgba(255, 255, 255, 0.9807777183990174) -1.5px 0 0;}
 71% {text-shadow: rgba(0, 0, 0, 0.9674912652650286) 2.4499999999999997px 0 0, rgba(255, 255, 255, 0.9022210932456923) -1.4499999999999997px 0 0;}
 72% {text-shadow: rgba(0, 0, 0, 0.9717372249876183) 2.4px 0 0, rgba(255, 255, 255, 0.8765635698101958) -1.4px 0 0;}
 73% {text-shadow: rgba(0, 0, 0, 0.9645985514947042) 2.3499999999999996px 0 0, rgba(255, 255, 255, 0.8633552189493626) -1.3499999999999996px 0 0;}
 74% {text-shadow: rgba(0, 0, 0, 0.9930937453603206) 2.3px 0 0, rgba(255, 255, 255, 0.8051761331103191) -1.2999999999999998px 0 0;}
 75% {text-shadow: rgba(0, 0, 0, 0.9967694300664716) 2.25px 0 0, rgba(255, 255, 255, 0.8850713876932538) -1.25px 0 0;}
 76% {text-shadow: rgba(0, 0, 0, 0.857931878599814) 2.1999999999999997px 0 0, rgba(255, 255, 255, 0.9484567518701348) -1.1999999999999997px 0 0;}
 77% {text-shadow: rgba(0, 0, 0, 0.8065303268761479) 2.15px 0 0, rgba(255, 255, 255, 0.9861716026231071) -1.15px 0 0;}
 78% {text-shadow: rgba(0, 0, 0, 0.8797138323979175) 2.0999999999999996px 0 0, rgba(255, 255, 255, 0.9327605217362944) -1.0999999999999996px 0 0;}
 79% {text-shadow: rgba(0, 0, 0, 0.8064192594575359) 2.05px 0 0, rgba(255, 255, 255, 0.9752686628797701) -1.0499999999999998px 0 0;}
 80% {text-shadow: rgba(0, 0, 0, 0.8578695134814783) 2.0px 0 0, rgba(255, 255, 255, 0.9597123400872934) -1.0px 0 0;}
 81% {text-shadow: rgba(0, 0, 0, 0.8465689527222937) 1.9500000000000002px 0 0, rgba(255, 255, 255, 0.9362544272288554) -0.9500000000000002px 0 0;}
 82% {text-shadow: rgba(0, 0, 0, 0.9600859379791397) 1.8999999999999995px 0 0, rgba(255, 255, 255, 0.9445462866232998) -0.8999999999999995px 0 0;}
 83% {text-shadow: rgba(0, 0, 0, 0.9741472675714937) 1.8499999999999996px 0 0, rgba(255, 255, 255, 0.9979583491429695) -0.8499999999999996px 0 0;}
 84% {text-shadow: rgba(0, 0, 0, 0.8522887397519873) 1.7999999999999998px 0 0, rgba(255, 255, 255, 0.8642087114124946) -0.7999999999999998px 0 0;}
 85% {text-shadow: rgba(0, 0, 0, 0.8935576284804552) 1.75px 0 0, rgba(255, 255, 255, 0.9995037786832606) -0.75px 0 0;}
 86% {text-shadow: rgba(0, 0, 0, 0.9591551924825271) 1.7000000000000002px 0 0, rgba(255, 255, 255, 0.8895031911672213) -0.7000000000000002px 0 0;}
 87% {text-shadow: rgba(0, 0, 0, 0.847221976351772) 1.6499999999999995px 0 0, rgba(255, 255, 255, 0.8897083979984515) -0.6499999999999995px 0 0;}
 88% {text-shadow: rgba(0, 0, 0, 0.982831513382503) 1.5999999999999996px 0 0, rgba(255, 255, 255, 0.8938824711432813) -0.5999999999999996px 0 0;}
 89% {text-shadow: rgba(0, 0, 0, 0.8543613277389507) 1.5499999999999998px 0 0, rgba(255, 255, 255, 0.9537350423795994) -0.5499999999999998px 0 0;}
 90% {text-shadow: rgba(0, 0, 0, 0.893017776047433) 1.5px 0 0, rgba(255, 255, 255, 0.9956040213561244) -0.5px 0 0;}
 91% {text-shadow: rgba(0, 0, 0, 0.9679434395903915) 1.4500000000000002px 0 0, rgba(255, 255, 255, 0.8782724557074016) -0.4500000000000002px 0 0;}
 92% {text-shadow: rgba(0, 0, 0, 0.8726705168167862) 1.3999999999999995px 0 0, rgba(255, 255, 255, 0.8826217500327997) -0.39999999999999947px 0 0;}
 93% {text-shadow: rgba(0, 0, 0, 0.9966087235235863) 1.3499999999999996px 0 0, rgba(255, 255, 255, 0.8018138119722085) -0.34999999999999964px 0 0;}
 94% {text-shadow: rgba(0, 0, 0, 0.9491747745601509) 1.2999999999999998px 0 0, rgba(255, 255, 255, 0.829179137123354) -0.2999999999999998px 0 0;}
 95% {text-shadow: rgba(0, 0, 0, 0.9127441956297994) 1.25px 0 0, rgba(255, 255, 255, 0.8577438912497287) -0.25px 0 0;}
 96% {text-shadow: rgba(0, 0, 0, 0.9301915605785521) 1.1999999999999993px 0 0, rgba(255, 255, 255, 0.8271745353254621) -0.1999999999999993px 0 0;}
 97% {text-shadow: rgba(0, 0, 0, 0.8860706345525079) 1.1499999999999995px 0 0, rgba(255, 255, 255, 0.9882951178389682) -0.14999999999999947px 0 0;}
 98% {text-shadow: rgba(0, 0, 0, 0.8376062092672816) 1.0999999999999996px 0 0, rgba(255, 255, 255, 0.9615234693412842) -0.09999999999999964px 0 0;}
 99% {text-shadow: rgba(0, 0, 0, 0.8046174532158784) 1.0499999999999998px 0 0, rgba(255, 255, 255, 0.8547331608286676) -0.04999999999999982px 0 0;}
 100% {
     text-shadow: rgba(0, 0, 0, 0.8492590734360018) 1.0px 0 0, rgba(255, 255, 255, 0.8562549485674519) -0.0px 0 0;
     color: rgba(255, 255, 255);
 }
}

@keyframes papersPlease {
    45% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(10px);
    }
    95% {
        transform: translateY(10px);
    }
}
* {
    box-sizing: border-box;
}

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


.italic {
    font-style: italic;
}

.container {
    background: none;
}

.title {
    height: 120px;
    width: 800px;
    max-width: 70vw;
    
}

.topnav {
  background-color: black;
  opacity: 75%;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1px 90px;
  text-decoration: none;
  font-size: 24px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}


.depth {
      text-shadow:
              0 1px 0 #000000, 0 2px 0 #000000,
              0 3px 0 #000000, 0 4px 0 #000000,
              0 5px 0 #000000, 0 6px 0 #000000,
              0 7px 0 #000000, 0 8px 0 #000000,
              0 9px 0 #000000, 0 10px 0 #000000,
              0 11px 0 #000000, 0 12px 0 #000000,
              0 20px 30px
              rgba(0, 0, 0, 0);
    font-size: 80px;
    text-align: center;
    animation: 3s papersPlease infinite ease-in-out;
  }

body, html {
    color: white;
    font-family: 'FixederSys', monospace;
    text-shadow: black 2px 0 0;
    padding: 0;
    margin: 0;
}

@keyframes driveby {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 768px;
    }
}

html::before {
  content: "";
  background:transparent;
  position: fixed;
  inset: 0;                         
  z-index: -9999;                   
  background-image: url("");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto;
  will-change: background-position;
  animation: driveby 30s linear infinite;
}

body {
  background-image: url("https://seclusive.neocities.org/img's/IMG_9221.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

    animation: none;
    display: flex;
    min-height: calc(100vh + 255px);
}

.content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1em;
    gap: 0.5em;
    text-shadow: none;
}

.entry {
    max-width: 80%;
    padding: 1em;
}

.spacer {
    width: 430px;
    flex-shrink: 0;
}

.music {
    padding: 0.5em;
    font-size: x-large;
    width: 400px;
    height: 98vh;
    position: fixed;
    right: 1vh;
    top: 1vh
}

.nowPlaying {
    backdrop-filter: blur(5px);
    width: 100%;
    height: 90vh;
    border: 0;
}

.song {
    color: white;
    display: flex;
    flex-direction: row;
    gap: 2px
}

.songPreview {
    display: none;
}

.songs {
    gap: 2px;
    display: flex;
    flex-direction: column;
}

.songInfo {
    flex-grow: 1;
}

.albumCover {
 filter: contrast(100%) brightness(100%);
}

.songTitle, .converge {
    animation: converge 1.4s linear forwards;
}

.songArtists {
    text-shadow: black;
}

.musicHeader {
    font-size: xx-large;
    text-align: center;
}

.playContainer {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.play {
    border: none;
    height: 32px;
    width: 32px;
    color: white;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg%20stroke%3D%22%230FF%22%20fill%3D%22%230FF%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%20512%20512%22%20height%3D%2232px%22%20width%3D%2232px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M256%2032C114.52%2032%200%20146.496%200%20288v48a32%2032%200%200%200%2017.689%2028.622l14.383%207.191C34.083%20431.903%2083.421%20480%20144%20480h24c13.255%200%2024-10.745%2024-24V280c0-13.255-10.745-24-24-24h-24c-31.342%200-59.671%2012.879-80%2033.627V288c0-105.869%2086.131-192%20192-192s192%2086.131%20192%20192v1.627C427.671%20268.879%20399.342%20256%20368%20256h-24c-13.255%200-24%2010.745-24%2024v176c0%2013.255%2010.745%2024%2024%2024h24c60.579%200%20109.917-48.098%20111.928-108.187l14.382-7.191A32%2032%200%200%200%20512%20336v-48c0-141.479-114.496-256-256-256z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.playing {
    animation: 5s linear infinite spin;
}

.totalPlays {
    text-align: center;
    width: 32px;
}