body {
    background-color:#131515;
    font-family: Arial, Helvetica, sans-serif;
    
}

.sitedes {
    color:black;
    font-family: "Prompt";
    border-style: dotted;
    padding:5px;
    width:90%;
    margin:auto;
}

p {
   font-family: "Ubuntu";
}

h1 {
    font-family: "consolas";
}

.header {
    background-color:#2B2C28;
    border: 2px solid black;
    padding: 20px;
    text-align: center;
    color:white;
}

.mejs__container {
    margin: 20px auto; /* Auto margin centers block elements */
    display: block;
    max-width: 600px;   /* Optional: limit width */
  }
  

.nav {
    margin-top: 20px;
    background-color: #339989;
    border:2px solid black;
    padding: 10px;
}

.container{
    width: 95%;
    margin:auto;
}

.content-wrapper {
    margin-top: 20px;
    background-color: #7DE2D1;
    border: 2px solid black;
    padding-bottom: 200px;
    color: #2B2C28;
    text-align: center;
}

.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.videoshead {
    text-align: left;
    margin-left:10px;

}

.image{
    opacity: 0.6;
    width:50%;
    height:50%;
    border:2px solid black;
}

@media (min-width: 768px) {
    .image {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .image {
        width: 25%;
    }
}

.image:hover{
    opacity:1;
    transition-duration: 0.4s;
}

#devpage {
    background: linear-gradient(to top, aqua, #2B2C28);
    background-attachment:fixed;
    background-repeat:no-repeat;

}

.dialogbox {
    border-style:dotted;
    color:aliceblue;
    text-align: center;
    font-family: "Press Start 2P";
    width: 50%;
    
}

#container {
    display:flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    flex-direction: column;
    gap:20px;
}

#videosection {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
    height:auto;
}

#avideo {
    display:flex;
    flex-direction: column;
}