@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;800&display=swap');


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


body{

font-family:Inter,sans-serif;
background:#050505;
color:white;
overflow:hidden;

}


.desktop{

height:100vh;

background:
linear-gradient(
rgba(0,0,0,.5),
rgba(0,0,0,.8)
),
url("images/background.png");

}


header{

display:flex;
justify-content:space-between;
padding:25px 40px;

}


.logo{

font-weight:800;
letter-spacing:3px;

}


.status{

color:#777;

}



.icons{

display:flex;
gap:40px;
padding:50px;

}


.icons button{

background:none;
border:none;
color:white;
font-size:35px;
cursor:pointer;

display:flex;
flex-direction:column;
align-items:center;

}


.icons span{

font-size:14px;
margin-top:10px;

}



.window{

display:none;

position:absolute;

top:120px;
left:50%;
transform:translateX(-50%);

width:70%;
max-width:900px;

background:

rgba(20,20,20,.85);

backdrop-filter:blur(20px);

border-radius:20px;

overflow:hidden;

box-shadow:

0 30px 80px black;

}



.bar{

padding:15px 20px;

background:#111;

display:flex;

justify-content:space-between;

}


.bar button{

background:none;
border:0;
color:white;
font-size:20px;
cursor:pointer;

}



.content{

padding:40px;

}



.gallery{

display:grid;

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

gap:15px;

margin-top:30px;

}


.gallery img{

width:100%;
height:200px;
object-fit:cover;
border-radius:12px;

}



.link{

color:white;

border:1px solid white;

padding:12px 25px;

border-radius:30px;

text-decoration:none;

}



@media(max-width:700px){

.icons{

padding:30px;
gap:20px;

}

.window{

width:90%;

}

.gallery{

grid-template-columns:1fr;

}

}