/* =====================================
   RESET
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#000;
    color:#e8e8e8;

    font-family:Verdana, Geneva, sans-serif;

    line-height:1.8;

}

/* =====================================
   NAVIGATION
===================================== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #3d3d3d;
    border-bottom: 1px solid #5a5a5a;
    padding: 2px 8px;
}

.left-nav,
.right-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.center-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.center-nav a {
    color: #d8d8d8;           /* Light gray */
    text-decoration: none;
    font-family: "Press Start 2P", monospace; /* Or your pixel font */
    font-size: 18px;
    padding: 4px 8px;
}

.center-nav a:hover {
    color: #ffffff;
    background: #555;
}

.left-nav img,
.right-nav img {
    display: block;   /* Removes the small gap under images */
    width: 32px;
    height: auto;
}


/* =====================================
   CONTENT
===================================== */

.container{

    width:760px;

    max-width:92%;

    margin:80px auto;

}

/* Every text section */

.section{

    margin-bottom:90px;

    text-align:center;

}

.section h1{

    font-size:42px;

    font-weight:normal;

    margin-bottom:25px;

}

.section h2{

    font-size:30px;

    font-weight:normal;

    margin-bottom:25px;

}

.section p{

    color:#d6d6d6;

}

/* =====================================
   IMAGE CLASSES
===================================== */

/* Center */

.center-image{

    display:block;

    margin:50px auto;

}

/* Left */

.left-image{

    display:block;

    margin:50px 0 50px 80px;

}

/* Right */

.right-image{

    display:block;

    margin:50px 80px 50px auto;

}

/* Sizes */

.small-image{

    width:180px;

}

.medium-image{

    width:350px;

}

.large-image{

    width:650px;

    max-width:95%;

}

/* =====================================
   FLOATING IMAGES
===================================== */

/*

Move anywhere by editing:

top:
left:
right:

Example:

<img
src="images/star.png"
class="floating"
style="top:500px; left:120px;">

*/

.floating{

    position:absolute;

    z-index:20;

}

/* =====================================
   OPTIONAL EFFECTS
===================================== */

.rotate-left{

    transform:rotate(-6deg);

}

.rotate-right{

    transform:rotate(6deg);

}

.flip{

    transform:scaleX(-1);

}

.shadow{

    filter:drop-shadow(0 0 10px rgba(255,255,255,.25));

}

/* =====================================
   TEXT HELPERS
===================================== */

.center{

    text-align:center;

}

.left{

    text-align:left;

}

.right{

    text-align:right;

}

/* =====================================
   SPACING HELPERS
===================================== */

.space-top{

    margin-top:80px;

}

.space-bottom{

    margin-bottom:80px;

}

.space-large{

    margin:120px 0;

}

/* =====================================
   LINKS
===================================== */

a{

    color:#9ecbff;

}

a:hover{

    color:white;

}

/* =====================================
   FOOTER
===================================== */

footer{

    margin-top:140px;

    background:#3b3b3b;

    border-top:1px solid #565656;

    text-align:center;

    padding:0 30px 50px;

}

/* Mascot now sits INSIDE the footer */

.footer-character{

    display:block;

    width:170px;

    margin:0 auto -15px;

    position:relative;

    top:-35px;

}

/* Footer text */

.footer-inner{

    max-width:760px;

    margin:auto;

    font-size:15px;

    line-height:1.8;

}

.footer-inner p{

    margin:14px 0;

    color:#d0d0d0;

}

.footer-inner a{

    color:#9ecbff;

    text-decoration:none;

}

.footer-inner a:hover{

    color:white;

}
/* ===========================
   NEWS CARDS
=========================== */

.news-section{

    width:760px;

    max-width:92%;

    margin:120px auto;

}

.news-section h2{

    text-align:center;

    font-size:32px;

    margin-bottom:40px;

    font-weight:normal;

}

.news-card{

    display:flex;

    align-items:center;

    gap:25px;

    background:#1f1f1f;

    border:3px solid #d8d8d8;

    border-radius:16px;

    padding:20px;

    margin-bottom:25px;

    text-decoration:none;

    transition:.2s;

}

.news-card:hover{

    background:#2c2c2c;

    transform:scale(1.02);

}

.news-card img{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:6px;

}

.news-info{

    flex:1;

}

.news-category{

    color:#fff200;

    font-size:24px;

    font-weight:bold;

    margin-bottom:8px;

}

.news-title{

    color:white;

    font-size:34px;

    margin-bottom:12px;

}

.news-date{

    color:#9a9a9a;

    font-size:22px;

}

/* =====================================
   MOBILE
===================================== */
/* ===========================
   NEWS CARDS (MOBILE)
=========================== */

@media (max-width: 850px){

    .news-section{

        width:95%;

        margin:60px auto;

    }

    .news-section h2{

        font-size:24px;

        margin-bottom:25px;

    }

    .news-card{

        flex-direction:column;

        text-align:center;

        gap:15px;

        padding:15px;

        border-radius:10px;

    }

    .news-card img{

        width:110px;

        height:110px;

    }

    .news-category{

        font-size:16px;

    }

    .news-title{

        font-size:20px;

        line-height:1.4;

    }

    .news-date{

        font-size:14px;

    }

}

@media (max-width: 850px) {

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden; /* Keeps everything inside */
    padding: 4px 8px;
}

.left-nav img,
.right-nav img {
    width: 20px; /* Smaller flag/logo icons */
    height: auto;
}

.center-nav {
    display: flex;
    justify-content: center;
    flex: 1; /* Takes the space between left and right */
}

.center-nav a {
    font-size: 10px; /* Smaller text */
    padding: 2px 4px;
    white-space: nowrap; /* Prevents text from breaking */
}

}

.container {
  width: 100%;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}


.left-image,
.right-image{

    margin:50px auto;

}

.large-image{

    width:100%;

}
  

.footer-character{

    width:140px;

    top:-25px;

}

}