body {
background-color: black;
margin: 0;
overflow-x: hidden;
place-items: center;
min-height: 100vh;
user-select: none;
display: flex;
flex-direction: column;
}
header {
width: 100vw;
height: 80px;
align-content: center;
align-items: center;
display: flex;
justify-content: flex-start;
background-color: rgb(22, 22, 22);
}

#lunatic-header-logo {
font-family: Galaksinos;
color: white;
font-weight: 100;
letter-spacing: -1px;
font-size: 50px;
display: block;
margin-left: 20px;
margin-right: auto;
margin-bottom: 25px;
}
#header-buttons {
    display: flex;
    gap: 20px;
    margin-right: 20px;
}
#lunatic-header-button {
transition: 0.5s;
font-family: Montserrat;
width: 120px;
height: 40px;
background-color: transparent;
border: 0px;
color: white;
}
#lunatic-header-button:hover {
cursor: pointer;
scale: 1.15;
font-weight: 700;
color: rgb(124, 154, 255);
}
#lunatic-main-menu {
width: 900px;
height: 275px;
background-color: rgb(22, 22, 22);
border-radius: 15px;
align-items: center;
align-self: center;
justify-content: center;
justify-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#lunatic-socials-menu {
width: 300px;
height: 400px;
background-color: rgb(22, 22, 22);
border-radius: 15px;
align-content: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-100%, -50%);
margin-right: 10px;
}
#lunatic-discord-menu {
width: 300px;
height: 400px;
background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #2d0a0a 100%);
border-radius: 15px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
margin-left: 10px;
}

#lunatic-main-menu-text {
margin-left: 20px;
margin-right: 20px;
color: white;
font-family: Montserrat;
font-size: 25px;
text-align: center;
font-weight: 400;
}
#lunatic-footer-text {
color: white;
font-family: Montserrat;
font-size: 15px;
}
#lunatic-footer {
min-height: 100%;
height: 50px;
width: 100%;
clear: both;
text-align: center;
align-items: center;
align-content: center;
justify-content: center;
background-color: rgb(22, 22, 22);
position:sticky;
}
main { flex: 1; }

#lunatic-text {
color: white;
text-align: center;
font-family: Montserrat;
margin-top: 100px;
}

#lunatic-text2 {
color: white;
text-align: center;
font-family: Montserrat;
font-size: 20px;
}

#videos-wrapper {
        width: 100%;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 30px 20px;
        box-sizing: border-box;
      }

#videos-wrapper::-webkit-scrollbar {
        width: 8px;
      }

#videos-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
      }

#videos-wrapper::-webkit-scrollbar-thumb {
        background: rgba(124, 154, 255, 0.5);
        border-radius: 4px;
      }

#videos-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(124, 154, 255, 0.8);
      }

#videos-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }

.video-card {
        display: block;
        background: rgb(22, 22, 22);
        border-radius: 12px;
        overflow: hidden;
        text-decoration: none;
        transition: 0.2s;
        cursor: pointer;
      }

.video-card:hover {
        transform: scale(1.05);
      }

.video-card img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
      }

.video-info {
        padding: 12px;
      }

.video-title {
        color: white;
        font-family: Montserrat;
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 8px;
      }

 .video-time {
        color: rgb(180, 180, 180);
        font-family: Montserrat;
        font-size: 13px;
      }

 .video-views {
        color: rgb(124, 154, 255);
        font-family: Montserrat;
        font-weight: 600;
      }

 .video-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
      }
#lunatic-social-button {
transition: 0.5s;
background-color: rgb(30, 30, 30);
border: 0;
width: 200px;
height: 30px;
display: inlines;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 20px;
color: white;
font-family: Montserrat;
scale: 1.2;
}
#lunatic-social-button:hover {
cursor: pointer;
scale: 1.3;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgba(124, 154, 255, 0.8);
font-weight: 700;
}

#discord-pfp {
width: 75px;
margin-left: 20px;
margin-top: 50px;
border-radius: 100%;
}

#lunatic-discord-banner {
height: 100px;
border-radius: 15px 15px 0 0;
border: 10px;
background-color: rgba(0, 0, 0, 0.394);
}

#discord-name {
font-size: 18px;
margin-top: 30px;
margin-left: 20px;
font-family: Montserrat;
color: rgb(200, 200, 200);
}

#discord-nickname {
font-size: 12px;
margin-left: 20px;
font-family: Montserrat;
color: rgb(200, 200, 200);
font-weight: 500;
margin-top: -10px;
}

#lunatic-discord-badges {
margin-left: 20px;
width: 50px;
height: 25px;
background-color: rgba(0, 0, 0, 0.39);
border-radius: 5px;
}

#discord-badge {
align-items: center;
scale: 3;
width: 15px;
margin-top: 10px;
margin-left: 18px;
}

#discord-button {
transition: 0.3s;
width: 150px;
height: 30px;
border: 0;
border-radius: 10px;
background-color: #4c1d1d;
color: white;
font-family: Montserrat;
}

#discord-button:hover {
background-color: white;
color: black;
align-items: center;
align-content: center;
text-align: center;
justify-items: center;
justify-content: centers;
}

#discord-desc {
margin-top: 20px;
margin-bottom: 20px;
width: 90%;
height: 110px;
background-color: rgba(0, 0, 0, 0.3);
text-align: left;
border-radius: 10px;
}