@charset "utf-8";
/* CSS Document */

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

.fjalla-one-regular {
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.source-code-pro-<uniquifier> {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


body{

font-family: "Source Code Pro", monospace;
background-image: url(images/AdobeStock_264352027.jpeg);

background-size:400% 400%;

display: flex;
justify-content: center;
padding: 40px;

color:white;

}


.page{
width: 1100px;
}


header{

display: flex;
align-items: center;
margin-bottom: 20px;

}


.logo{

padding: 10px;

display: flex;
align-items: center;
justify-content: center;

margin-right: 30px;

}

.logo img{

display: block;
width: 150px;
height: auto;

}

nav{

flex: 1;
background: black;
padding: 15px;

display: flex;
justify-content: space-around;

}

nav a{

font-family: "Fjalla One", sans-serif;
color: white;
text-decoration: none;
font-size: 20px;
letter-spacing: 2px;

}

nav a:hover{
opacity: .7;
}



.layout{

display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;

}



.sidebar{

display:flex;
flex-direction:column;
gap:20px;

}



.avatar{

border:8px solid black;

}

.avatar img{
width: 100%;
display: block;
}



.panel{

background: black;
padding: 20px;

border: 6px solid black;

}

.panel h3{

font-family: "Fjalla One", sans-serif;
margin-bottom: 15px;
font-size: 20px;

}

.panel p{

font-size: 14px;
margin-bottom: 15px;

line-height: 1.4;

}


main{

display: flex;
flex-direction: column;
gap: 20px;

}



.hero{

border: 8px solid black;

}

.hero img{

width: 100%;
display: block;
filter: grayscale(100%);

}



h1{

font-family: "Fjalla One", sans-serif;
font-size: 40px;
color: black;

}



.about{

background: black;
padding: 30px;
border: 6px solid black;

}

.about h2{

font-family: "Fjalla One", sans-serif;
margin-bottom: 15px;
font-size: 24px;

}

.about p{

margin-bottom: 15px;
line-height: 1.6;

}

footer{

width: 100%;

background: black;
color: white;

text-align: center;

padding: 15px 0;

margin-top: 40px;

}

footer p{

font-family: "Source Code Pro", monospace;
font-size: 14px;
letter-spacing: 1px;
}