@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

*{
	font-family: "Arimo", sans-serif;
}
@media (orientation: portrait) {
  body::before {
    content: "Deixe seu Dispositivo Deitado!";
    position: fixed;
    inset: 0;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 999;
  }
}
#mensagem > #opcoes{
	display: inline-flex;
	transition: 1s;
	position: relative;
	left: 50%;
	transform: translate(-50%, -10%);
}
#mensagem > #opcoes > a > p{
	font-size: 1vw;
	margin: 0;
}
#mensagem > #opcoes > a{
	transition: 1s;
	padding: 1vw;
	margin-right: 2vw;
	text-decoration: none;
	color: white;
	border-radius: 1vw;
	margin: 0.5vw;
	margin-top: 0;
	font-weight: bold;
}
#mensagem > #opcoes > a:hover{
	transition: 1s;
	box-shadow: 5vw 5vw 5vw 5vw;
	border-radius: 5vw;

}
#mensagem > p{
	margin: 1vw;
}
#mensagem {
	transition: 1s;
	position: absolute;
	z-index: 500;
	background-color: white;
	padding: 0vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 75%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
	width: 25vw;
}

#tela {
	transition: 1s;
	position: absolute;
	z-index: 15;
	background-color: gray;
	padding: 1.4vw;
	padding-right: 3.5vw;
	bottom: 30.8vw;
	right: 47.6vw;
	border-style: none;
	border-radius: 0.2vw;
	opacity: 0;
}
#tela:hover {
	transition: 1s;
	background-color: white;
	box-shadow: 0vw 0vw 1vw 0.5vw white;
	cursor: pointer;
	opacity: 100;
}
#resposta{
	margin: 0;
	top: 0vw;
	left: 50%;
	transform: translate(-50%, 25%);
	position: absolute;
	border-style: none;
	width: 35vw;
	height: 25.5vw;
	align-items: center;
	justify-content: center;
	background: none;
	box-shadow: 0vw 0vw 50vw 10vw black;
	padding: 0;
	
}
#resposta > img{
	border-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 25vw;
	box-shadow: 0vw 0vw 50vw 10vw black;
}
#pergunta {
	transition: 1s;
	position: absolute;
	z-index: 20;
	background-color: gray;
	padding: 6vw;
	padding-right: 10vw;
	bottom: 34.15vw;
	right: 25.85vw;
	border-style: none;
	border-radius: 0.2vw;
	opacity: 0;
}
#pergunta:hover {
	transition: 1s;
	background-color: white;
	box-shadow: 0vw 0vw 1vw 0.5vw white;
	cursor: pointer;
	opacity: 100;
}
#overlay{
	pointer-events: none;
	position: fixed;
	width: 100%;
	z-index: 10;
	mix-blend-mode: multiply;
	bottom: 0;
}
#overlay > img{
	width: 100%;
	height: 100%;
}
*{
	margin: 0;
	font-family: "BBH Bartle", sans-serif;
	font-style: normal;
}
#rotate-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 999;
}
.rotate-content {
  font-size: 20px;
  padding: 20px;
}
.quarto{
	width: 100%;
}
.viewer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.viewer img {
  max-width: 90%;
  max-height: 90%;
}

.viewer .close {
  position: absolute;
  top: 1vw;
  right: 2vw;
  color: #fff;
  font-size: 5vw;
  cursor: pointer;
}
.q3{
	transition: 1s;
	position: fixed;
	z-index: 3;
	left: 13vw;
	bottom: 20vw;
	width: 6vw;
	height: 20vw;
	-webkit-filter: drop-shadow(-2px -2px 2px #222);
}
.q3:hover{
	transition: 1s;
	-webkit-filter: drop-shadow(-5px -5px 5px #222);
	cursor: pointer;
}
.q3 > img{
	width: 100%;
	height: 100%;
}
.q2{
	transition: 1s;
	position: fixed;
	z-index: 4;
	left: 7vw;
	bottom: 20vw;
	width: 6vw;
	height: 20vw;
	-webkit-filter: drop-shadow(-2px -2px 2px #222);
}
.q2:hover{
	transition: 1s;
	-webkit-filter: drop-shadow(-5px -5px 5px #222);
	cursor: pointer;
}
.q2 > img{
	width: 100%;
	height: 100%;
}
.q1{
	transition: 1s;
	position: fixed;
	z-index: 5;
	left: 1vw;
	bottom: 13vw;
	width: 6vw;
	height: 20vw;
	-webkit-filter: drop-shadow(-2px -2px 2px #222);
}
.q1:hover{
	transition: 1s;
	-webkit-filter: drop-shadow(-5px -5px 5px #222);
	cursor: pointer;
}
.q1 > img{
	width: 100%;
	height: 100%;
}
#cama{
	position: fixed;
	z-index: 3;
	right: 0vw;
	bottom: 0vw;
	width: 22vw;
}
#cama > img{
	width: 100%;
}
body > .quarto > a > #aberta{
	transition: 1s;
	position: fixed;
	z-index: 2;
	right: 0vw;
	left: 75.5vw;
	bottom: 11.5vw;
	width: 12.5vw;
	opacity: 0;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	outline: none;
	cursor: pointer;
}
body > .quarto > a > #aberta:hover{
	transition: 1s;
	opacity: 100;
	cursor: pointer;
}
body >.quarto > a > #aberta > img{
	width: 100%;
}
body > .quarto > #fechada{
	transition: 1s;
	position: fixed;
	z-index: 1;
	right: 0vw;
	left: 80vw;
	bottom: 12vw;
	width: 8vw;
}
body > .quarto > #fechada:hover{
	transition: 1s;
	opacity: 0;
}
body > .quarto > #fechada > img{
	width: 100%;
}
body > .quarto > #chao{
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 0;
}
body > .quarto > #chao > img{
	width: 100%;
}
.quarto > #taskbar{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 4vw;
	text-align: center;
	margin: none;
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
	backdrop-filter: blur(10px);
}
.quarto > #taskbar > button{
	background: none;
	border-style: none;
	cursor: pointer;
	width: 4.2vw;
	transition: 1s;
}
.quarto > #taskbar > button > img{
	width: 100%;
	height: 100%;
}
.quarto > #taskbar > button:hover{
	transition: 1s;
	margin-left: 0.2vw;
	margin-right: 0.2vw;
	border-radius: 0.5vw;
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
	backdrop-filter: blur(10px);
}
.clock{
      width: min(80vw, 92vw);
      padding: 2vw 2vw;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border: 1px solid var(--border);
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      text-align: center;
      position: fixed;
      z-index: 17;
      bottom: 20vw;
			left: 50%;
			transform: translate(-50%, -5vw);
			color: white;
    }

    .label{
      font-size: 1vw;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }

    #time{
      font-variant-numeric: tabular-nums;
      font-weight: 1000;
      letter-spacing: .06em;
      line-height: 1;
      font-size: clamp(8vw, 8vw, 5vw);
      text-shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    #date{
      margin-top: 12px;
      color: var(--muted);
      font-size: 1vw;
    }
#items-line1{
	position: relative;
}
#items-line1 > #item1 > img{
	width: 100%;
	height: 100%;
}
#items-line1 > #item1 {
	cursor: pointer;
	transition: 1s;
	color: white;
	width: 5vw;
	height: 5vw;
	background: none;
	border-style: none;
	cursor: pointer;
}
#items-line1 > #item2 {
	cursor: pointer;
	transition: 1s;
	color: white;
	width: 5vw;
	height: 5vw;
	background: none;
	border-style: none;
	cursor: pointer;
}
#items-line1 > #item2:hover {
	background-color: gray;
	transition: 1s;
	color: white;
}
#items-line1 > #item2 > img{
	width: 100%;
	height: 100%;
}
#items-line1 > #item1:hover {
	background-color: gray;
	transition: 1s;
	color: white;
}
#items-line1 > #item3 {
	cursor: pointer;
	transition: 1s;
	color: white;
	width: 5vw;
	height: 5vw;
	background: none;
	border-style: none;
	cursor: pointer;
}
#items-line1 > #item3:hover {
	background-color: gray;
	transition: 1s;
	color: white;
}
#items-line1 > #item3 > img{
	width: 100%;
	height: 100%;
}
#items-line1 > #item4 {
	cursor: pointer;
	transition: 1s;
	color: white;
	width: 5vw;
	height: 5vw;
	background: none;
	border-style: none;
	cursor: pointer;
}
#items-line1 > #item4 > img{
	width: 100%;
	height: 100%;
}
#items-line1 > #item4:hover {
	background-color: gray;
	transition: 1s;
	color: white;
}
#items-line1 > #item5 {
	cursor: pointer;
	transition: 1s;
	color: white;
	width: 5vw;
	height: 5vw;
	background: none;
	border-style: none;
	cursor: pointer;
}
#items-line1 > #item5 > img{
	width: 100%;
	height: 100%;
}
#items-line1 > #item5:hover {
	background-color: gray;
	transition: 1s;
	color: white;
}
#mensagem2 > #opcoes{
	display: inline-flex;
	transition: 1s;
}
#mensagem2 > #opcoes > a > p{
	font-size: 1vw;
	margin: 0;
}
#mensagem2 > #opcoes > a{
	transition: 1s;
	padding: 1vw;
	margin-right: 2vw;
	text-decoration: none;
	color: white;
	border-radius: 1vw;
	margin: 0.5vw;
	margin-top: 0;
}
#mensagem2 > #opcoes > a:hover{
	transition: 1s;
	box-shadow: 1 0 1vw 1vw;
	border-radius: 5vw;
}
#mensagem2 > p{
	margin: 1vw;
}
#mensagem2 {
	position: absolute;
	z-index: 500;
	background-color: white;
	padding: 0vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
}
#browser {
	position: absolute;
	z-index: 500;
	background-color: white;
	padding: 0vw;
	color: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
}
#browser > p{
	padding: 2vw;
	font-weight: bold;
	text-align: center;
}
#music-player {
	position: absolute;
	z-index: 50;
	background-color: white;
	padding: 0vw;
	color: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
}
#music-player > p{
	padding: 2vw;
	font-weight: bold;
	text-align: center;
}
#lixeira {
	position: absolute;
	z-index: 500;
	background-color: white;
	padding: 0vw;
	color: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
}
#lixeira > p{
	padding: 2vw;
	font-weight: bold;
	text-align: center;
}
#notas {
	position: absolute;
	z-index: 500;
	background-color: white;
	padding: 0vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
}
#msgporta {
	transition: 1s;
	position: absolute;
	z-index: 500;
	background-color: white;
	padding: 2vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 100%);
	border-style: none;
	opacity: 50%;
	border-radius: 0.5vw;
	align-items: center;
	justify-content: center;
}
#lateral {
	background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
	backdrop-filter: blur(10px);
	color: white;
}
#lateral > ul {
	left: 0;
	list-style: none;
	width: 15vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
}
#lateral > ul > li{
	margin: none;
	margin-right: 2vw;
	border-radius: 0.2vw;
	margin-bottom: 0.2vw;
	height: 0.5vw;
	cursor: pointer;
	padding: 0.5vw;
}
#lateral > ul > li > p{
	text-align: center;
	color: gray;
	font-weight: bold;
	font-size: 1vw;
}
#div{
	margin-right: 1vw;
	margin-left: 0vw;
	width: 0.2vw;
	background-color: white;
}
.editor {
  width: 100%;
  height: 100%;
  padding: 8px;

  resize: none;          /* opcional: remove resize */
  outline: none;
  border: none;

  text-align: left;      /* horizontal */
  vertical-align: top;   /* não é obrigatório, mas ok */

  box-sizing: border-box;
}
#albumlink{
	transition: 1s;
	width: 15vw;
	margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#albumlink > a:hover{
	transition: 1s;
	cursor: pointer;
	-webkit-filter: drop-shadow(0vw 0vw 8vw yellow);
}
#albumlink > a{
	width: 100%;
	height: 100%;
}
#albumlink > a >img {
	width: 100%;
	height: 100%;
}