/* ============================================================= */
/* Basic */
/* ============================================================= */
html,body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  /* background: lemonchiffon; */
  /* background: #fff7b2; */
  background: #fff388;
}

::-webkit-scrollbar { 
  width: 0;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* ============================================================= */
/* Main Layout */
/* ============================================================= */
.body_container {  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "."
    "."
    ".";
  /* background: lemonchiffon; */
  /* background: #fff7b2; */
  /* background: #fff6a5; */
  background: #fff388;
}


/* ============================================================= */
/* TV: Are.na Block */
/* ============================================================= */
.Block {
  width: 100%;
  mix-blend-mode: multiply;
}


/* ============================================================= */
/* TV: Img Container */
/* ============================================================= */
.img_screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: none;
}

.img_print {
  /* max-height: 700px; */
  max-height: 580px;
}

.img_print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);

  position: absolute;
  top: 0;
  left: 0;
}


/* ============================================================= */
/* TV: Textarea */
/* ============================================================= */
#note, textarea {
  display: block;
  /* width: 90%; */
  width: 228px;
  margin: 0 auto 20px auto;
  padding: 19px 0 0 0;
  border: 0;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  resize: none;
  overflow: hidden;
}

#note, textarea:focus {
  outline: none;
  box-shadow: none;
}

/* #ascii {
  display: none;
  width: 100%;
  height: 10000px;
  margin: 0 auto 0 auto;
  padding: 0;
  border: 0;
  font-size: 29px;
  line-height: 32px; 
  text-align: center;
  resize: none;
} */


/* ============================================================= */
/* TV: btns */
/* ============================================================= */
.TV-btns { 
  text-align: center;
}

.btn-pages {
  display: flex;
  justify-content: space-between;
  height: 30px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  mix-blend-mode: multiply;
  z-index: 3;
}

.btn-pages button {
  width: 100%;
}

#btn-P {
  z-index: 3;
}

#btn-N {
  z-index: 3;
}



/* ============================================================= */
/* Playlist: Login */
/* ============================================================= */
#loginBtn {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: none;
  z-index: 2;
}


/* ============================================================= */
/* Playlist: Btns */
/* ============================================================= */
.Play-btns {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: 1fr; 
  gap: 0px 10px; 
  grid-template-areas: 
    ". . . ."; 
  padding: 16px 12px;
  mix-blend-mode: multiply;
}

#searchInput, textarea {
  width: 92%;
  margin: auto;
  padding: 4px;
  resize: none;
  background: none;
  border: 3px double gray;
  /* border: 2px double gray; */
  font-size: 12px;
  text-align: left;
}

#searchInput, textarea:focus {
  outline: none;
  box-shadow: none;
}


/* ============================================================= */
/* Playlist: List */
/* ============================================================= */
.deleteBtn {
  /* display: none; */
}


/* ============================================================= */
/* Search: Modal
/* ============================================================= */
#close {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 3px;
  opacity: 0.8;
  font-size: 10px;
}