/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #990000;
    border-radius: 7px;
    border: solid 1px #1a0000;
}
@font-face {
    font-family: "VCR OSD Mono"; src: url("https://static.tumblr.com/nlxfn1e/7Pwqv8mt8/vcr_osd_mono_1.001.ttf") format("truetype");
}
@font-face {
    font-family: "Mali"; src: url("fonts/Mali-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "04B_30"; src: url("fonts/04B_30__.TTF") format("truetype");
}
@font-face {
    font-family: "PorkyS"; src: url("fonts/PORKYS_.TTF") format("truetype");
}
@font-face {
    font-family: "Alagard"; src: url("fonts/alagard.ttf") format("truetype");
}

* {
    cursor: url(tumblr_inline_n7ciqpAD001r4ugnn.png), default;
}

body {
    position:relative;
    background-image: url('https://64.media.tumblr.com/7be326b1c5fb34d0239c87226dbb99d6/cfce284f9f549d99-46/s100x200/1ee0dfd4f42464bd6943d8b5ff885a1ff6f31428.jpg');
    background-repeat: repeat;
    background-blend-mode: multiply;
    color: white;
}
#header {
    position: relative;
    width: 500px;
}
h1 {
    font-size: 32px;
    position: absolute;
    top: -60px;
    font-family: "VCR OSD MONO";
    text-shadow: 6px -2px black;
    animation: texto 1.8s linear infinite;
}
h1 > span {
    text-shadow: 6px -2px black;
}
h1:hover {
    color: red;
}
a {
    color: darkred;
    transition: letter-spacing 0.3s;
    text-decoration: none;
}
a:hover {
    color: #b30000;
    letter-spacing: 6px;
}
@keyframes texto {
    50% {transform: scale(0.99);}
    100% {transform: scale(1);}
}
#spin {
    position: absolute;
    left: 422px;
    top: -20px;
    filter: drop-shadow(7px 0px black);
}
#centopeia {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -40px;
    left: -45px;
    animation: spin 8s linear infinite;
    filter: drop-shadow(7px 0px black);
}
@keyframes spin {
    0% {transform: rotate(-15deg);}
    50% {transform: rotate(15deg);}
    100% {transform: rotate(-15deg);}
}

.container {
  display: grid;
  width: 900px;
  height: 600px;
  margin: 7% auto;
  justify-content: center;
  grid-gap: 5px;
  grid-template:
    "esq main dir"
    "esq main update"
    "ideia footer webring"
    / 200px 500px 200px

}

barraesq { grid-area: esq; }
main { grid-area: main; }
barradir { grid-area: dir; }
update { grid-area: update; }
footer { grid-area: footer; }
ideia { grid-area: ideia; }
webring { grid-area: webring; }

.container > barraesq, main, barradir, update, footer, ideia, webring {
    border: 20px solid transparent;
    border-image: url(border/opensesame.png) 70 round;
    background-clip: padding-box;
}
main {
    height: 382px;
background-image: url('tumblr_69e1076437a2d70fb42fd9d4c24369e4_0e034fca_250.gif');
background-attachment: fixed;
background-position: center top;
    padding: 5px;
    font-family: "Mali";
    font-size: 12px;
}
.main_cima {
    display: flex;
    height: 200px;
    gap: 10px;
    margin-bottom: 5px;
}
.main_img img {
    height: 200px;
    width: 200px;
    filter: saturate(150%) drop-shadow(3px 3px 5px black);
    transition: transform 1s;
}
.main_img img:hover {
    transform:rotate(-5deg)
}
.main_corpo {
    overflow-y: auto;
    border: 4px solid transparent;
    line-height: 15px;
    border-image: url(border/tumblr_caf0df77cf3a65215704674a2b780426_6a3400b8_1280.png) 230 round;
background-image: url('http://dl8.glitter-graphics.net/pub/461/461898tg93ryqz0h.gif');
background-attachment: fixed;
background-position: center bottom;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: color;
    background-clip: padding-box;
    padding-left: 3px;
}
.main_corpo img {
    vertical-align: text-bottom;
}
.main_corpo marquee {
    font-size: 20px;
    width: 125px;
    display: inline-block;
}
.main_meio {
    border: 5px black solid;
    border-image: url(border/tumblr_caf0df77cf3a65215704674a2b780426_6a3400b8_1280.png) 230 round;
background-image: url('http://dl8.glitter-graphics.net/pub/461/461898tg93ryqz0h.gif');
background-attachment: fixed;
background-position: top;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: color;
    text-align: center;
    background-clip: padding-box;
    margin: 3% 2%;
    padding: 2px;
}
/*.baixo_titulo {
    font-size: 12px;
    border: 5px black solid;
    border-image: url(border/ermm.png) 60 round;
    background-color: black;
    background-clip: padding-box;
    margin-top: 1%;
    text-align: center;
    height: auto;
    width: 200px;
    margin: 1% auto;
    vertical-align: text-bottom;
} */
.baixo_img > marquee {
    border: 5px black solid;
    border-image: url(border/tumblr_caf0df77cf3a65215704674a2b780426_6a3400b8_1280.png) 230 round;
background-image: url('http://dl8.glitter-graphics.net/pub/461/461898tg93ryqz0h.gif');
background-attachment: fixed;
background-position: top;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: color;
    background-clip: padding-box;
    margin: 1% 2%;
    padding: 10px 0px;
}
.baixo_img > marquee > img{
    height: 40px;
    width: 71px;
    filter: sepia(1) hue-rotate(-56deg) saturate(140%);
    transition: transform 1s
}
.baixo_img > marquee > img:hover {
    z-index: 4;
    transform: scale(1.3);
    filter: none;
}
::-moz-selection { /* Code for Firefox */
  color: #FF86BC;
  background: transparent;
}

::selection {
  color: #FF86BC;
  background: transparent;
}

@font-face {
font-family: space ranger;
src:url(https://dl.dropbox.com/s/eis23duz97yq7e1/spacerangerlaserital.ttf);
}

@font-face {
font-family:sweetheart;
src:url(https://dl.dropbox.com/s/qsbxaucivq93z8r/sweet_heart.ttf);
}

#cont {
display:block;
width: 160px;
height: 156.141px;
}
  
/* Using flex with the column direction to
   align items in a vertical direction */
.player {
    position: absolute;
    width: 160px;
    height: 160px;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
  

  
.track-art {
    left: -18px;
    top: -20px;
    position: absolute;
    width: 123%;
    height:123%;
    transition: 1s;
    z-index: 3;
      background-image: URL(
     "thinkge.png");
  background-size: cover;
  background-position: center;
  border-radius: 4%;
  border:1px solid black;
}
  
.buttons {
transition:all .5s ease;
}
  
/* Changing the font sizes to suitable ones */
.now-playing {
   position: absolute;
    z-index: 4;
    color: red;
    font-family: "04B_30";
    font-size: 10px;
    top: 2px;
    left: 3%;
letter-spacing: 2px;
    text-shadow: 2px 2px rgb(0,0,0);
}

.track-name {
   position: absolute;
    z-index: 4;
    color: red;
    font-family: "04B_30";
    font-size: 12px;
    bottom: 16%;
    left: 23%;
    letter-spacing: 2px;
    text-shadow: 2px 2px rgb(0,0,0);
}
  
.track-artist {
    position: absolute;
    z-index: 4;
    color: white;
    font-family: "04B_30";
    font-weight: bold;
    font-size: 20px;
    bottom: 21%;
    left: 24%;
    text-shadow: 0px 0px 7px rgba(195, 196, 214, 0.5);
}
  

.playpause-track{
    position: absolute;
    height: auto;
    width: 30px;
    cursor: pointer;
    z-index: 4;
    left: 10px;
}
/* style for next and previous song images */
.prev-track,
.next-track {
    position: absolute;
    height: auto;
    width: auto;
    cursor: pointer;
    bottom: 3%;
    font-size: 40px;
    z-index: 5;
}
.next-track {
    left: 100px;
}
.prev-track {
    left: 50px;
}

/* Define the slider width so that it scales properly */
.slider_container {
    position: absolute;
    height: 33%;
    width: 103%;
    background: black;
    z-index: 4;
    bottom: -17%;
}
  
/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 4;
    height: 5px;
    background: #c3c4d6;
    width: 65%;
    border-radius: 30px;
    left: 17%;
}
  
/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -3px;
    margin-left: 0px;
    height: 10px;
    width: 7px;
    border: 0;
    background: darkred;
    border-radius: 30px;
    cursor: pointer;
}
.seek-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    max-height: 5px;
    border-radius: 30px;
}

.volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -3px;
    margin-left: 0px;
    height: 10px;
    width: 7px;
    border: 0;
    background: darkred;
    border-radius: 30px;
    cursor: pointer;
}
 
  
.volume_slider {
  width: 30%;
}
  
.current-time {
        position: absolute;
    height: 50px;
    width: 50px;
    cursor: pointer;
    bottom: -20%;
    left: 3%;
    z-index: 4;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #c3c4d6;
    align-items: center;
}

.total-duration {
    position: absolute;
    height: 50px;
    width: 50px;
    cursor: pointer;
    bottom: -20%;
    left: 80%;
    z-index: 4;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    align-items: center;
    color: #c3c4d6;
}
  
i.fa-volume-down,
i.fa-volume-up {
  padding: 10px;
  color:white;
  text-shadow:1px 0px #FF5AA4, -1px 0px #FF5AA4, 0px -1px #FF5AA4, 0px 1px #FF5AA4;
  transition:all .4s ease;
}

i.fa-volume-down:hover,
i.fa-volume-up:hover {
  padding: 10px;
  color:#FF5AA4;
  text-shadow:none;
  transition:all .4s ease;
}
  
/* Change the mouse cursor to a pointer
   when hovered over */
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
  cursor: pointer;
}
footer {
    height: 150px;
    background-color: transparent;
    font-family: "PorkyS";
    text-align: center;
    vertical-align: text-bottom;
    margin: 10px;
    letter-spacing: 2px;
}
barradir {
    height: 156.156px;
    background-color: rgba(255, 0, 0, 0.9);
    background-blend-mode: darken;
    background-image: url('/tumblr_2bcf5e5d5b208b623cd4f20ca8554de4_30f59791_75.jpg');
    background-clip: padding-box;
}
barraesq {
    height: 392px;
    background-color: rgba(255, 0, 0, 0.9);
    background-blend-mode: darken;
    background-image: url('/tumblr_2bcf5e5d5b208b623cd4f20ca8554de4_30f59791_75.jpg');
    background-clip: padding-box;
}
h2 {
    position: absolute;
    margin-top: 0;
    font-family: "VCR OSD MONO";
    top: -10px;
    text-shadow: 2px 2px black;
    transition: transform 1s;
}
h2:hover {
    transform: scale(1.05);
}
.teste {
  text-align: center;
}
ul {
  list-style-image: url('pixel/blue9.gif');
  list-style-position: inside;
  padding:  0;
  overflow-y: auto;
}
ul li {
    position: relative;
    height: 12px;
    width: 130px;
    margin: 2% 0;
    border: 5px solid transparent;
  border-image: url(border/d-1-1-3.png) 8 fill round;
  text-align: center;
  display: inline-block;
  padding: 5px 0 5px 10px;
  background-color: white;
  background-clip: padding-box;
font-family: "Alagard";
color: darkred;
letter-spacing: 3px;
transition: background-color 0.3s;

}
ul li:hover {
    background-color: #f2f2f2;
}

#divider {
    position: absolute;
    left: 42.6%;
    bottom: 29.5%;
}
#titulo_up {
    position: relative;
    width: 1000px;
}
#update {
    position: absolute;
    left: 760px;
    color: white;
    top: -250px;
}

update {
height: 156.156px;
    background-color: rgba(255, 0, 0, 0.9);
    background-blend-mode: darken;
    background-image: url('/tumblr_2bcf5e5d5b208b623cd4f20ca8554de4_30f59791_75.jpg');
    color: black;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    font-size: 13px;
    padding-left: 3px;
    font-family: "Mali";
}

mark {
    background-color: rgb(179, 0, 0);
    color: white;
}
.update > p {
    border: 5px solid transparent;
  border-image: url(border/d-1-1-3.png) 8 fill round;
    background-color: white;
    background-clip: padding-box;
    padding: 5px;
    transition: transform 1s transform 1s;
    
    
}
.update > p:hover {
    transform: rotate(1deg);

}
ideia, webring {
    height: 150px;
    margin: 10px 0;
    background-color: rgba(255, 0, 0, 0.9);
    background-blend-mode: darken;
    background-image: url('/tumblr_2bcf5e5d5b208b623cd4f20ca8554de4_30f59791_75.jpg');
}
#chat {
    position: absolute;
    top: 4px;
    left: 200px;
}
#texto {
    position: absolute;
    top: 160px;
}
#titulo_web {
    top: 92px;
    left: 50px;
}