body {
    margin: 0;
    font-family: Verdana, sans-serif;
    background: #2e3f5f;
}

.container {
    width: 1000px;
    margin: auto;
    background: linear-gradient(#181d23, #6da6e2);
    border: 3px solid #1c2b45;
}

.containerNews {
    width: 1000px;
    margin: auto;
    background: rgb(16, 40, 58);
    border: 3px solid #1c2b45;
}

.WIPcontainer {
    width: 800px;
    margin: auto;
    background: linear-gradient(#232318, #7a760e);
    border: 3px solid #1c2b45;
    color: white;
}

.subcontainerNews {
    width: 800px;
    margin: auto;
    background: linear-gradient(#181d23, #143f6d);
    border: 3px solid #1c2b45;
}

.container2 {
    width: 500px;
    margin: auto;
    background: rgb(33, 67, 116);
    border: 3px solid #1c2b45;
}

.DoomworldButton {
    width: 45%;
    float: left;
    background: linear-gradient(#2c4153, #4e7c9b);
    border: 3px solid #1c2b45;
    color: white;
    padding: 5px;
    box-sizing: border-box;
}

.DoomworldButton a{
    text-decoration: none;
    color: white;
}

.ZandronumCont {
    width: 45%;
    float: right;
    background: linear-gradient(#055a04, #129e19);
    border: 3px solid #1c2b45;
    padding: 5px;
    box-sizing: border-box;
}

.ZandronumCont a{
    text-decoration: none;
    color: white;
}

.DownloadButton {
    width: 45%;
    margin-left: 125px;
    background: linear-gradient(#0d045a, #2500e0);
    border: 3px solid #1c2b45;
    padding: 5px;
    box-sizing: border-box;
}

.DownloadButton a{
    text-decoration: none;
    color: white;
}

.ZandronumOnly {
    width: 45%;
    float: center;
    background: linear-gradient(#055a04, #129e19);
    border: 3px solid #1c2b45;
    padding: 5px;
}


header img {
    width: 100%;
}

nav {
    background: #4f79a7;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav li {
    border-right: 1px solid #2e3f5f;
}

nav a {
    display: block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    background: linear-gradient(#1d2834, #437cbd);
    border-radius: 4px;
}

nav a:hover {
    background: #2e3f5f;
}

main {
    display: flex;
    padding: 20px;
}

.content {
    width: 65%;
    color: white;
}

.sidebar {
    width: 35%;
    background: linear-gradient(#7db7ff, #2783e6);
    padding: 15px;
    margin-left: 20px;
}

.beta {
    color: orange;
    font-size: 28px;
}

footer {
    text-align: right;
    padding: 10px;
    color: white;
}

/*====News====*/

.news-post {
    border-bottom: 3px solid #1c2b45;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.news-post h2 {
    margin: 0;
    color: white;
}

.date {
    font-size: 12px;
    color: #cccccc;
    font-family: Comic Sans MS;
}

.news-post a {
    color: #6da6e2;
    text-decoration: none;
}

.news-post a:hover {
    text-decoration: underline;
}

/*====Header y Logo====*/


.header {
    position: relative;   /* MUY IMPORTANTE */
}

.banner {
    width: 100%;
    display: block;
}

.logo {
    position: absolute;
    top: 20px;      /* mueve hacia abajo */
    left: -10px;     /* mueve hacia la derecha */
    width: 600px;   /* tamaño del logo */
    filter: drop-shadow(0 0 10px #000000);


}

.WIPimg {
    width: 450px;
    height: 300px;
    position: relative;
    display: block;

}

/*GALLERY*/

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery-item {
    width: 30%;
    height: 200px;       /* tamaño fijo */
    overflow: hidden;
    border: 3px solid #1c2b45;
    background: #000;
    box-sizing: border-box;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* recorta sin deformar */
    display: block;
}