:root {
  --font-colour: white;
}

html {
  margin: 0;
  padding: 0px;
  /* Created with https://www.css-gradient.com */
  /*background: rgb(0,0,0);
  background: linear-gradient(57deg, rgba(0,0,0,1) 0%, rgba(83,83,83,1) 13%, rgba(26,26,26,1) 25%, rgba(130,130,130,1) 35%, rgba(30,30,30,1) 45%, rgba(64,64,64,1) 54%, rgba(0,0,0,1) 61%, rgba(119,119,119,1) 68%, rgba(85,85,85,1) 73%, rgba(106,106,106,1) 75%, rgba(131,131,131,1) 85%, rgba(212,212,212,1) 92%, rgba(0,0,0,1) 100%);
  */
  letter-spacing: 0.2px;

  min-height: calc(100% - 40px);
}


html {
  /*background: linear-gradient(239deg, #000000, #4d4c4c, #494949, #3f3f3f, #000000, #3e3e3e, #545353, #474747, #4e4d4d, #343333, #0d0d0d, #4e4e4e, #343434);
  */
  /*background: linear-gradient(57deg, rgba(0, 0, 0, 1) 0%, rgba(83, 83, 83, 1) 13%, rgba(26, 26, 26, 1) 25%, rgba(130, 130, 130, 1) 35%, rgba(30, 30, 30, 1) 45%, rgba(64, 64, 64, 1) 54%, rgba(0, 0, 0, 1) 61%, rgba(119, 119, 119, 1) 68%, rgba(85, 85, 85, 1) 73%, rgba(106, 106, 106, 1) 75%, rgba(131, 131, 131, 1) 85%, rgba(212, 212, 212, 1) 92%, rgba(0, 0, 0, 1) 100%);
  background-size: 2600% 2600%;
  */
  -webkit-animation: AnimationName 150s ease infinite;
  -moz-animation: AnimationName 150s ease infinite;
  -o-animation: AnimationName 150s ease infinite;
  animation: AnimationName 150s ease infinite;

  background-image: url(/assets/images/tiled_bg.webp);
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 51%
  }

  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 51%
  }

  100% {
    background-position: 0% 50%
  }
}

@-o-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 51%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 51%
  }

  100% {
    background-position: 0% 50%
  }
}

@font-face {
  font-family: 'montserrat';
  src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ibmplex-mono';
  src: url('/assets/fonts/IBMPlexMono-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open-sans';
  src: url('/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

body {
  font-family: 'montserrat';
  color: var(--font-colour);
  margin: 0 auto;
  height: 100%;
  
  padding: 20px;
}

button {
  cursor: pointer;
}

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  max-width: 100vw
}

a {
  text-decoration: underline;
  color: aqua;
  user-select: none;
  word-break: break-all;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 5px auto;
}

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

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

::-webkit-scrollbar-thumb {
  background-color: #676767;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #353036;
}

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

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

::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}


/*TABLE OF CONTENTS*/
list1>* {
  color: var(--font-colour);
  display: block;
  width: fit-content;
  font-size: 16px;
  margin-top: 3px;
}

list2>* {
  margin-top: 3px;
  color: var(--font-colour);
  display: block;
  width: fit-content;
  margin-left: 20px;
  font-size: 16px;
}

/*SPECIFIC STYLING*/
.wrapper {
  max-width: 1200px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}

p {
  line-height: 22px;
}

#twewy_logo {
  height: 150px; margin-left: auto;
}


#credits {
  width: fit-content;
  font-size: 11px;
  margin-left: auto;
  color: rgba(255,255,255,0.8);
}

#main_section {
  display: flex;
  width: 100%;
  height: 100%;
}


#pins_list {
  background-color: rgba(0, 0, 0, 0.562);
  width: 100%;
  display: flex;
  height: 800px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5px;
  overflow: auto;
}

#pins_info {
  background-color: none;
  width: 100%;
  min-width: 200px;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

con {
  display: block;
  position: relative;
  max-width: 150px;
  max-height: 150px;
  width: 100%;
  cursor: pointer;
  background-color: rgba(65, 65, 65, 0.445);
  border: 2px solid rgba(0, 0, 0, 0.562);
  user-select: none;
}

.pin_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 150px;
  max-height: 150px;
}

.pin_icon {
  mask-image: url(/assets/images/pin_mask.webp);
  mask-size: 95%, 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  display: block;
  max-width: 150px;
  height: 150px;
  width: 100%;
}

con:hover {
  border: 2px solid rgb(0, 217, 255);
  background-color: rgba(0, 217, 255, 0.301);
}



#pin_screen {
  border: 3px solid rgb(35, 172, 190);
  width: 100%;
  margin: 10px;
  background-color: rgba(0, 0, 0, 1.0);
  padding: 0px;
  height: 100%;
  max-height: 600px;
  overflow: auto;
}

#pin_screen_title {
  display: flex;
  padding-inline: 20px;
  white-space: pre-wrap;
}

#pin_image {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(82, 82, 82);
  max-height: 175px;
  border: none;
  object-fit: cover;
}

#pin_data {
  padding: 10px;
}

.selected {
  background-color: rgba(0, 217, 255, 0.301);
}

#floating_info {
  display: none;
}


/*Mobile Devices*/
@media only screen and (max-width: 799px) {

  #pins_list {
    height: calc(100vh - 243px);
  }

#twewy_logo {
  height: 70px;
  margin-left: auto;
  margin: auto;
}

#credits {
  margin: auto;
}

#pins_info {
  display: none;
}

#floating_info {
  display: block;
  position: fixed;
  bottom: 10px;
  left: 0px;
  width: 100vw;
}

#pin_modal {
  display: flex;
  width: calc(100% - 60px);
  margin-inline: auto;
  padding: 10px;
  background-color: black;
  border: 3px solid rgb(35, 172, 190);
}

}


progress.power_bar {
  width: 200px;
  height: 20px;
  appearance: none;
  background: #333;
  border: 3px solid #111;
  border-radius: 6px;
  overflow: hidden;
}

progress.power_bar::-webkit-progress-bar {
  background: #333;
}

progress.power_bar::-webkit-progress-value {
  background: linear-gradient(to right, #ff8800, #cc0000);
}