@font-face {

    font-family: "TF2Font";

    src: url("fonts/yourfont.ttf");

}
body {

    background:#1b1b1b;

    color:white;

    font-family:"TF2Font", Arial, Helvetica, sans-serif;

    margin:0;

}



header {

    background:#111;

    padding:30px 40px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:2px solid #333;

}





.logo-area {

    display:flex;

    align-items:center;

    gap:15px;

}



.logo {

    width:200px;

    height:200px;

    object-fit:contain;

}



.logo-area h1 {

    margin:0;

    color:#ffcc33;

    font-size:35px;

}





button {

    background:#ff9900;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:6px;

    cursor:pointer;

    font-size:16px;

}



button:hover {

    background:#ffb733;

}





input {

    padding:12px;

    width:250px;

    border-radius:6px;

    border:none;

    margin:5px;

}





h2 {

    text-align:center;

    color:#ffcc33;

}





#giveaways {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

    padding:30px;

}





.giveaway {


    background:#252525;

    width:300px;

    padding:20px;

    border-radius:12px;

    text-align:center;

    box-shadow:0 0 15px #000;

}





.giveaway img {

    max-width:200px;

    max-height:200px;

    border-radius:8px;

}





.giveaway h2 {

    color:#ffcc33;

    font-size:22px;

}





.giveaway p {

    color:#ddd;

    font-size:16px;

}





.winner {

    color:#55ff55 !important;

}





form {

    margin-top:15px;

}#notification {

    position:fixed;

    bottom:30px;

    right:30px;

    background:#222;

    color:white;

    padding:15px 25px;

    border-radius:10px;

    display:none;

    box-shadow:0 0 15px black;

    font-size:18px;

    z-index:999;

}



.notification-success {

    border-left:5px solid #55ff55;

}



.notification-error {

    border-left:5px solid #ff4444;

}.donate-button {

    position:fixed;

    bottom:20px;

    left:20px;

    background:#ff9900;

    color:white;

    padding:15px 25px;

    border-radius:10px;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    box-shadow:0 0 15px black;

    z-index:999;

}


.donate-button:hover {

    background:#ffb733;

}/* GIVEAWAY PAGE */

.giveaway-page {

    max-width:900px;
    margin:40px auto;
    background:#222;
    color:white;
    padding:30px;
    border-radius:15px;
    text-align:center;

}


.giveaway-page img {

    max-width:400px;
    border-radius:15px;

}


.giveaway-title {

    font-size:40px;
    margin-bottom:20px;

}


.giveaway-info {

    background:#333;
    padding:20px;
    border-radius:10px;
    margin:20px 0;

}


.join-button {

    background:#4CAF50;
    color:white;
    border:none;
    padding:15px 30px;
    font-size:20px;
    border-radius:10px;
    cursor:pointer;

}


.join-button:hover {

    opacity:.8;

}


.comments-box {

    margin-top:40px;
    background:#333;
    padding:20px;
    border-radius:10px;

}#timer {

font-size:22px;
font-weight:bold;
margin:20px;

}.comment-box {

background:#333;
padding:15px;
margin:10px;
border-radius:10px;
text-align:left;

}.comment-box {

display:flex;
align-items:center;
gap:15px;

background:#333;
padding:15px;
margin:10px;
border-radius:10px;

}


.comment-avatar {

width:50px;
height:50px;
border-radius:50%;

}.back-button {

display:inline-block;
background:#444;
color:white;
padding:10px 20px;
border-radius:8px;
text-decoration:none;
margin:20px;

}


.back-button:hover {

opacity:.8;

}.nav-menu {

    display:flex;
    gap:35px;
    align-items:center;

}


.nav-menu a {

    color:white;
    text-decoration:none;
    font-size:28px;
    font-weight:bold;
    padding:10px 15px;
    border-radius:8px;

}


.nav-menu a:hover {

    color:#ffcc33;
    background:#222;

}.nav-menu {

    display: flex;
    align-items: center;
    gap: 40px;

}

.nav-menu a {

    font-family: "TF2Font", Arial, Helvetica, sans-serif;
    color: white;
    text-decoration: none;
    font-size: 30px;
    padding: 12px 18px;
    border-radius: 10px;
    transition: 0.2s;

}

.nav-menu a:hover {

    color: #ffcc33;
    background: #222;
    transform: scale(1.08);

}/* TF2 Background Character */

body::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url("images/spy.png") no-repeat right bottom;

    background-size: 350px;

    opacity: 0.08;

    pointer-events: none;

    z-index: -1;

}/* Left TF2 Background Character */

body::after {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url("images/heavy.png") no-repeat left bottom;

    background-size: 315px;

    opacity: 0.08;

    pointer-events: none;

    z-index: -1;

}