body::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: none;
}

body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: silver;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  border: 1px solid;
  border-color: silver #000 #000 silver;
}

body::-webkit-scrollbar-track {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
}

body::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

body::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

body::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

body::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

body::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

body::-webkit-scrollbar-corner {
  background: silver;
}

@font-face {
  font-family: "MCFont";
  src: url("../fonts/MSW98UI-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MCFont";
  src: url("../fonts/MSW98UI-Bold.otf");
  font-weight: bold;
  font-style: normal;
}

/* @font-face {
  font-family: "MCFont";
  src: url("../fonts/Typecast-Italic.ttf");
  font-weight: normal;
  font-style: italic;
} */

@font-face {
  font-family: "enterfont";
  src: url(../fonts/counter.ttf);
}

@font-face {
  font-family: "3dfont";
  src: url("../fonts/3D-Thirteen-Pixel-Fonts.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "MCFont", sans-serif;
  font-smooth: never;
  -webkit-font-smoothing: none;

  font-size: 18px;
}

body {
  background-color: #c1c1c1;

  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  image-rendering: pixelated; /* jeśli czcionka jest w SVG lub bitmapowa */
}

.main-container {
  background-color: #c1c1c1;
  padding: 20px;

  border: 2px solid;
  border-top-color: #f9f9f9;
  border-left-color: #f9f9f9;
  border-right-color: #333;
  border-bottom-color: #333;
}

a {
  text-decoration: none;
  color: #000;
}

header {
  background-color: #c1c1c1;
  color: white;

  border: 2px solid;
  border-top-color: #c1c1c1;
  border-left-color: #c1c1c1;
  border-right-color: #c1c1c1;
  border-bottom-color: #333;

  text-align: center;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;

  padding: 3px 3px 3px 8px;
  background-color: #01027a;
}

.windows-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;

  font-size: 14px;
}

.windows-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;

  background-color: #c1c1c1;
  border: 2px solid;
  border-top-color: #f9f9f9;
  border-left-color: #f9f9f9;
  border-right-color: #444;
  border-bottom-color: #444;

  color: black;
}

.windows-buttons button:active {
  background-color: #f9f9f9;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #c1c1c1;
  border-bottom-color: #c1c1c1;

  color: black;
}

.button-close,
.button-minimize,
.button-maximize {
  text-align: center;
}

.header-bottom {
  height: 50px;

  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
}

.logo-wrzutnia {
  height: 100%;

  overflow: hidden;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 5px 25px;

  font-family: "crang", sans-serif;

  line-height: 1;
  background-image: url("../images/wrzutnia-logo-bg.jpg");
  background-size: cover;
  color: #a3e8ff;
}

.logo-wrzutnia .logo-title {
  overflow: hidden;
  height: 21px;
  font-family: "3dfont", sans-serif;
  font-size: 36px;

  line-height: 24px;
  padding: 0;
  margin: 0;
}

.logo-wrzutnia .logo-version {
  font-family: "MCFont", sans-serif !important;
  font-size: 10px !important;
}

.logo-wrzutnia div {
  filter: drop-shadow(0 0 2px #1a163a) drop-shadow(0 0 2px #1a163a)
    drop-shadow(0 0 6px #1a163a);
}

#searchbar_container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.marquee-container {
  color: #fff;
  font-weight: bold;
  background-image: url("../images/nyan-cat-bg.jpg");
  background-position: center;
  background-size: 40%;
}

.enter-count {
  width: fit-content;
  margin: auto;

  padding: 0px 5px 1px 5px;
  font-size: 28px;
  font-weight: bold;
  color: #f9f9f9;
  /* background: linear-gradient(to bottom, #2689e5, #000); */
  background-color: black;

  transform: scaleX(1.25);
}

.enter-digit {
  margin: 0 4px;

  font-size: 35px;

  font-weight: normal;
  font-family: "enterfont", sans-serif;

  filter: drop-shadow(0 0 5px #fff);
}

.button-style-normal,
.button-style-neutral {
  background-color: #c1c1c1;
  border: 2px solid;
  border-top-color: #f9f9f9;
  border-left-color: #f9f9f9;
  border-right-color: #444;
  border-bottom-color: #444;
}

.button-style-normal:active {
  background-color: #f9f9f9;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #f9f9f9;
  border-bottom-color: #f9f9f9;
}

.button-style-inverted {
  /* background-color: #c1c1c1; */
  border: 2px solid;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #f9f9f9;
  border-bottom-color: #f9f9f9;
}

/* .button-style-inverted:active {
  background-color: #f9f9f9;
  border-top-color: #f9f9f9;
  border-left-color: #f9f9f9;
  border-right-color: #444;
  border-bottom-color: #444;
} */

.button-search,
.button-upload,
.pagination button {
  font-size: 16px;
  padding: 5px 20px;
  cursor: pointer;
}

.button-search,
.button-upload {
  height: 100%;
}

.button-upload {
  display: flex;
  align-items: center;
}

.search-input {
  padding: 5px;
  width: 400px;
  height: 100%;

  font-size: 16px;

  background-color: white;
  border: 2px solid;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #f9f9f9;
  border-bottom-color: #f9f9f9;
}

.search-input:focus {
  outline: none;
  border-color: none;
}

.videos-grid {
  margin: 0 auto;

  /* display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-image: url("../images/dots-bg.svg");
  background-size: 100px;

  gap: 15px;
  padding: 20px;
}

.video-item {
  width: 309px;
  padding: 10px;
}

.video-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.page-button {
  padding: 5px;
  cursor: pointer;
}

footer {
  height: 100px;
  width: 100%;
}

.footer-top {
  display: flex;
  align-items: center;
  padding: 20px 20%;
  background-color: #008080;
}

.footer-icon-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;

  font-size: 16px;
  color: #fff;

  padding: 5px;
  cursor: pointer;

  transition: 0.3s cubic-bezier(1, -0.01, 0.12, 1.48);
}

.footer-icon-mark:hover {
  transform: rotateY(360deg);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  padding: 2px;
  background-color: #c1c1c1;

  outline: 2px solid;
  outline-color: #f9f9f9;
}

.windows-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 1px 3px;

  width: fit-content;
  height: 100%;

  border: none;
  cursor: pointer;

  font-size: 16px;
}

.windows-button img {
  width: 24px;
}

.footer-bottom .button-style-normal:active {
  background-color: #f9f9f9;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #c1c1c1;
  border-bottom-color: #c1c1c1;
}

.opened-app {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: bold;
  padding: 3px 3px;

  background-color: #c1c1c1;
  border: 2px solid;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #f9f9f9;
  border-bottom-color: #f9f9f9;
}

.opened-app img {
  width: 18px;
  height: 18px;
}

.speaker-and-time {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 10px 3px 3px;

  background-color: #c1c1c1;
  border: 2px solid;
  border-top-color: #777;
  border-left-color: #777;
  border-right-color: #eee;
  border-bottom-color: #eee;
}

.speaker-and-time img {
  width: 18px;
  height: 18px;
}