* {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: uc;
  src: url("../font/BebasNeue-Regular.ttf");
}

@keyframes vinil {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(36deg);
  }

  20% {
    transform: rotate(72deg);
  }

  30% {
    transform: rotate(108deg);
  }

  40% {
    transform: rotate(144deg);
  }

  50% {
    transform: rotate(180deg);
  }

  60% {
    transform: rotate(216deg);
  }

  70% {
    transform: rotate(252deg);
  }

  80% {
    transform: rotate(288deg);
  }

  90% {
    transform: rotate(324deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

@keyframes info {

  0% {
    left: 0px;
  }

  100% {
    left: 70%;
  }
}


body {
  background-color: black;
  font-size: 20px;

}

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

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

#master {
  height: 90vh;
  margin-top: 0;

}

#deepmain {
  padding: 2%;
  position: fixed;
  top: 0;
  z-index: 1;
  /* background-image: linear-gradient(gray, white, gray); */
  background-image: url("../img/aço3.jpg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  left: 0%;
  height: auto;
  width: 96%;
}

#main {
  /* background-color: gray; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80%;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: fit-content;
}

#title {
  width: 50%;
  height: 50%;
}

.imghd {
  width: 15%;
  height: 100%;
  animation-name: vinil;
  animation: vinil 20s linear 0s infinite none;
}

.fastpanel {
  display: none;
}

#info {
  border: outset 3px white;
  background-color: black;
  color: greenyellow;
  width: 99%;
  margin-top: 3%;
  height: auto;
}

marquee {
  padding-top: 2%;
  width: 100%;
  font-size: auto;
  text-transform: uppercase;
  font-family: uc, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


#cs {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 95%;
  padding: 2%;
}

#ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 87%;
  width: 100%;
}

.ctrl {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
  padding: 2%;
}

#ctrl img {
  width: 10%;
  height: auto;
}


#ctrl img:active,
#search:active {
  transform: scale(1.3, 1.3);

}

#player {
  display: none
}


#pesq {
  height: 12%;
  border-top: outset red 3px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 2%;
  box-sizing: border-box;
  align-items: center;
}

#termo {
  height: auto;
  width: 60%;
  outline: 1px solid blue;
  font-size: auto;
}

#termo:focus {
  outline-color: green;
}

#search {
  height: auto;
  width: fit-content;
  cursor: pointer;
  margin-left: 2%;
  line-height: 100%;
  background-color: blue;
  border: 1px red solid;
  font-size: auto;
  padding: 0.5%;
  color: aliceblue;
}


#res {
  z-index: 0;
  width: 70%;
  margin-left: 2%;
  height: auto;
}

li {
  width: fit-content;
  color: aliceblue;
  list-style-type: none;
  padding: 1% 0 1% 0;
  text-wrap: nowrap;
  height: fit-content;
  margin-bottom: 1%;
}

li:hover {
  color: burlywood;
  cursor: pointer;
}

li:active {
  color: red;
}

#ctrl img:hover {
  cursor: pointer;
}

/* dialog{
  color: rgb(5, 43, 5);
	position:fixed;
  height: fit-content;
	top:20px;
	right:5px;
  padding: 5px;
  border: none;
  background-image: linear-gradient(gray,white,gray);

} */

#ghost {
  width: 100%;
  background-color: brown;
  position: relative;
  bottom: 0vh;
  left: 0;
  display: none;
}

#footer {
  width: 100%;
  position: fixed;
  background-color: lightgray;
  z-index: 2;
  left: 0%;
  bottom: 0%;
  height: 10vh
}


@media screen and (min-width:380px) {
  #ctrl img {}

  #search {
    font-size: 0.8em;
  }
}

@media screen and (min-width:600px) {
  #ctrl img {}

  #termo{
    font-size: 1em;
  }

   li{
    font-size: 1.3em;
  }


}

@media screen and (orientation:landscape) {
  #master {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 80%;
  }

  #deepmain {
    width: 40%;
    left: 0%;
    height: 80%;
  }

  #ctrl img {
    /*
    width: 15%; */
  }

  #res {
    width: 30%;
    margin-top: 1%;
    margin-left: 56%;
  }
}

@media screen and (orientation:landscape) and (max-width:320px) {
  #ctrl img {
    /* width: 14%; */
  }
}

@media screen and (orientation:landscape) and (min-width:321px) {
  #ctrl img {
    /* 
    width: 10%; */
  }
}

@media screen and (orientation:landscape) and (min-width:741px) {
  #ctrl img {
    /* 
    width: 10%; */
  }
}

@media screen and (orientation:landscape) and (min-width:890px) {
  #ctrl img {
    /*
    width: 10%; */
  }
}

@media screen and (orientation:landscape) and (min-width:891px) {
  #ctrl img {
    width: 13%;
  }
}

@media screen and (orientation:landscape) and (min-width:1080px) {
  #ctrl img {}
}

@media screen and (orientation:landscape) and (min-width:1136px) and (max-width:1263px) {
  #ctrl img {
  }
}

/* 
@media screen and (orientation:landscape) and (min-width:1366px){
   #ctrl img{
    height: 50%;
    width: 20%;
  }
} */

#author {
  width: fit-content;
  height: fit-content;
  position: fixed;
  bottom: 2vh;
  right: 5vw;
  color: darkgreen;
  text-decoration: none;
  z-index: 3;
}

#author:hover {
  color: yellow;
}

#author:visited {
  color: darkgreen;
}