* {

box-sizing:border-box;

}


body {

margin:0;

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

background:#101820;

color:#eeeeee;

}



/* SIDEBAR */


.sidebar {

position:fixed;

width:280px;

height:100vh;

background:#0b1f2a;

padding:35px;

}



.profile {

width:150px;

height:150px;

border-radius:50%;

object-fit:cover;

}



.sidebar h1 {

color:#7cc576;

}



.sidebar a {

display:block;

padding:15px 0;

color:white;

text-decoration:none;

}



.sidebar a:hover {

color:#7cc576;

}



/* MAIN AREA */


main {

margin-left:280px;

padding:50px;

}




.hero {

max-width:900px;

padding:80px 0;

}



.hero h2 {

font-size:48px;

}



/* GALLERY */


.gallery {

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.card {

background:#182b36;

border-radius:10px;

overflow:hidden;

transition:.3s;

}



.card:hover {

transform:translateY(-5px);

}



.card img {

width:100%;

height:250px;

object-fit:cover;

}



.card-content {

padding:20px;

}




/* BUTTON */


.button {

display:inline-block;

background:#2e7d32;

padding:15px 25px;

color:white;

text-decoration:none;

border-radius:5px;

}



/* MOBILE */


@media(max-width:900px){


.sidebar {

position:relative;

width:100%;

height:auto;

}


main {

margin-left:0;

}


.gallery {

grid-template-columns:1fr;

}


.hero h2 {

font-size:32px;

}

.footer{

    margin-top:80px;

    padding:30px 0;

    border-top:1px solid #2c3d48;

    text-align:center;

    color:#a8b3ba;

    font-size:14px;

}

.footer p{

    margin:8px 0;

}


}