body {
  background-image:url('/fundo.png') ;
  background-size:cover ;
  background-attachment: fixed;
  margin:auto;
  
}

.main{
max-width: 950px;
margin: 0 auto;
height: 1400px;

}

.header{
  background-image:url('/banner.png');
  background-repeat:no-repeat;
  background-size:900px;
  background-position: center;
  height:155px;
  width:auto ;
}

.navlinks{
  height:50px;
  background: #592828;
  background: linear-gradient(-180deg, rgba(89, 40, 40, 1) 0%, rgba(237, 83, 83, 1) 100%);
  border: solid #592828;
  color: white;
  
}

nav {
  padding-top:10px;
  
}

.navlinks ul{
  display:flex;
  align-content:center ;
  justify-content: space-around;
  margin-top:0px ;
  list-style-type:none;
  padding-left: 0px;

}

li a{
  color:white;
  font-family: "Shadows Into Light Two", cursive;
  text-decoration:none;
  font-size:20px;
  transition: font-size 0.5s;
}

li a:hover{
  font-size:25px;
}

.content{
  display:flex;
  flex-direction:row;
  margin-top:15PX;
  gap:15px;
  
}

.left{
  width: 200px;
  height: 446px;
}
.middle{
  background: #525252;
  background: linear-gradient(0deg, rgba(82, 82, 82, 1) 0%, rgba(23, 23, 23, 1) 100%);
  width:570px;
  height:440px;
  border: solid #171717;
}
.right{
  background:blue;
  width:200px;
  height:440px;
  
}
.changelog{
  transform: rotate(6deg);
  transition: rotate 1s;
}
.changelog:hover{
  transform: rotate(0deg);
}
.change{
  margin: 3px;
  overflow-x: auto;
  border: dashed #a35112 5px;
  background:#eb9b34 ;
  height: 180px;
  width:auto;
  filter: drop-shadow(2px 4px 6px black);
}

.change p{
  margin:5px;
}
.changelog-img {
  background-image: url(/changelog.png);
  width: auto;
  height: 30px;
  background-size: 190px;
  background-repeat: no-repeat;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
}

.todo-img{
  background-image: url(/to_do.png);
  width: auto;
  height: 30px;
  background-size: 199px;
  background-repeat: no-repeat;
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
}


.to-do{
  transform: rotate(-6deg);
}
.to-do:hover{
  transform: rotate(0deg);
}
.todo{
  margin: 3px;
  overflow-x: auto;
  border: dashed #2c4e9e 5px;
  background:#519acf ;
  height: 180px;
  width:auto;
  filter: drop-shadow(2px 4px 6px black);
}

p {
  font-family: "Noto Sans Mono", monospace;
}

.change p {
  color:white;
}

.todo li {
  color:white;
  font-family: "Noto Sans Mono", monospace;
}

.welcome{
  background-image:url("/welcome.png");
  height:70px;
  width:auto;
  background-repeat: no-repeat;
  margin:10px;
  background-position: center;
  background-size:370px;
  filter: drop-shadow(0px 0px 6px #E6BF55);
}

.mid-content{
  width:auto;
  margin:10px;
}

.mid-p-one{
  width:250px;
  
}
.mid-content p{
  color:white;
  
}
.mid-content a{
  color: #ed5353;
  text-decoration: none;
  
}
.mid-content a:hover{
  color: gold;
}
.flex{
  display: flex;
  flex-direction: row;
}

audio::-webkit-media-controls-panel{
  background: red;
  
}