@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {

margin:0;
padding:0;
box-sizing:border-box;

}



body {

font-family:"Bebas Neue", sans-serif;

color:white;

text-align:center;

background:

linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.9)
),

url("images/background.png");


background-size:cover;

background-position:center;

background-attachment:fixed;

}



/* HEADER */

header {

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:40px;

}



.logo {

width:220px;

margin-bottom:40px;

}



h1 {

font-size:100px;

letter-spacing:10px;

}



header p {

font-size:25px;

margin:20px;

}



/* BUTTON */


.button {

display:inline-block;

margin-top:30px;

padding:15px 40px;

border:2px solid white;

color:white;

text-decoration:none;

transition:.3s;

}



.button:hover {

background:white;

color:black;

}



/* BOX */


main {

max-width:1000px;

margin:auto;

padding:40px 20px;

}



.box {


background:rgba(10,10,10,.85);

border:1px solid rgba(255,255,255,.15);

border-radius:20px;

padding:60px 40px;

margin-bottom:50px;

backdrop-filter:blur(10px);


}



h2 {

font-size:55px;

margin-bottom:40px;

}



.box p {

font-size:22px;

line-height:1.7;

}



.card {


background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.1);

padding:30px;

border-radius:15px;

margin:20px 0;


}



.card h3 {

font-size:30px;

margin-bottom:15px;

}



.meme {

max-width:500px;

width:100%;

margin-top:40px;

border-radius:15px;

}



footer {

padding:50px;

font-size:30px;

}

.gallery {

display:grid;

grid-template-columns:repeat(3, 1fr);

gap:20px;

margin-top:50px;

}



.gallery img {

width:100%;

aspect-ratio:1/1;

object-fit:cover;

border-radius:15px;

border:1px solid rgba(255,255,255,.15);

transition:.3s;

}



.gallery img:hover {

transform:scale(1.05);

}



@media(max-width:700px){


.gallery {

grid-template-columns:repeat(2, 1fr);

}


}

footer {

    text-align:center;

    padding:60px 20px;

    border-top:1px solid rgba(255,255,255,.1);

}


.footer-logo {

    width:100px;

    height:auto;

    margin-bottom:20px;

}


footer p {

    font-size:14px;

    opacity:.6;

}

html{
    scroll-behavior:smooth;
}

/* NAVBAR */


.navbar {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:80px;

    padding:15px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(12px);

    z-index:999;

}



/* LOGO */

.nav-logo img {

    width:55px;

    height:auto;

}



/* DESKTOP MENU */

.desktop-menu {

    display:flex;

    gap:40px;

    align-items:center;

}


.desktop-menu a {

    color:white;

    text-decoration:none;

    font-size:18px;

    transition:.3s;

}


.desktop-menu a:hover {

    opacity:.6;

}



/* MOBILE BUTTON */

.menu-btn {

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:32px;

    cursor:pointer;

}



/* DROPDOWN MOBILE */

.dropdown {

    display:none;

    position:absolute;

    top:75px;

    right:25px;

    background:#111;

    border:1px solid rgba(255,255,255,.15);

    border-radius:15px;

    overflow:hidden;

}


.dropdown a {

    display:block;

    color:white;

    text-decoration:none;

    padding:18px 35px;

}


.dropdown.show {

    display:block;

}



/* MOBILE */

@media(max-width:700px){


.desktop-menu {

    display:none;

}


.menu-btn {

    display:block;

}


.navbar {

    padding:15px 20px;

}


}