*{
    margin: 0;
    padding: 0;
}

body{
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: rgb(100, 100, 100);
}

.box{
    margin: 0 auto;
    display: grid;
    grid-gap: 10px;
}

nav>ul{
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    position: sticky;
}

nav>ul li{
    float: left;
    
}

header, nav, main, footer, .portfolio{
    background-color: rgb(29, 29, 29);
    border-radius: 10px;
    margin-left: 5px; margin-right: 5px;
}

header{
    display: grid;
    grid-row: 1/2;
    grid-column: 1/3;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1);
}

nav{
    grid-row: 2/3;
    grid-column: 1/3; 
    height: max-content;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1);
    display: grid;
    gap: 12px;
}

nav a{
    margin: 5px 5px;
    padding: 10px 20px 10px 20px;
    align-content: center;
    display: block;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    background-color: rgb(100, 100, 100);
}


nav a:hover{
    background-color: white;
    color: rgb(2, 2, 2);
}

nav a:visited{
    color: rgb(200, 200, 200);
}

main{
    grid-row: 3/4;
    grid-column: 1/3; 
    padding: 30px 30px 40px 30px;
    text-align: center;
    color: #dcdcdc;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1);
}

main h1{
    font-size: 50px;
}

main p{
    max-width: 70ch;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.main_photo{
    margin: 20px 20px;
    height: 200px;
    width: 200px;
    border-radius: 500px;
}

.portfolio-image{
    margin: 20px 20px;
    width: 500px;
}

.portfolio{
    grid-row: 4/5;
    grid-column: 1/3; 
    padding: 30px 0px 30px 0px;
    text-align: center;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1);
    color: #dcdcdc;
}

.portfolio h2{
    font-size: 50px;
    text-align: center;
    margin: auto;
}

.portfolio > li{
    display: inline-block;
}

.portfolio > ul{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:center;
    margin:1rem 0 0;
    list-style:none;
}

.portfolio .item{
    display: inline-block;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    padding: 0.3rem;
    border-radius: 8px;
    background: #cbcbcb; 
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    font-weight: 600;
    box-sizing: border-box;
    margin: 15px 15px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: filter .18s ease, opacity .18s ease;
}


.item_img{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 100%;
    height: 80%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.item_body{
    font-size: 10px;
    margin-top: 10px;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    justify-content: center;
    gap: 0.25rem;
    position:relative; 
    z-index:2;
    color: rgb(40, 40, 40);
    max-width: 50ch;

}

.item_body a:hover, a:visited, a:link, a:active{
    text-decoration: none;
    color: black;
}

.item_body > h2{
    font-size: 16px;
    text-align: center;
}

.item::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(128,128,128,0);
  transition: background .18s ease, opacity .18s ease;
  z-index:1; 
  pointer-events:none;
}


.item > * { position: relative; z-index: 3; }


.item:hover::before,
.item:focus-within::before {
  background: rgba(128,128,128,0.55);
}

.item:hover,
.item:focus-within{
  filter: grayscale(.1) brightness(.6);
}


footer{
    grid-row: 5/6;
    grid-column: 1/3; 
    height: max-content;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.1);
    display: grid;
    gap: 12px;
    margin-bottom: 5px;
}

footer a{
    margin: 6px 6px;
    align-content: center;
    display: block;
    border-radius: 20px;
    text-decoration: none;
    color: black;
    text-align: center;
    font-size: 20px;
}

footer>ul{
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    position: sticky;
}

footer>ul li{
    float: left;
}

.portfolio-image{
    margin: auto;
}

.contact-image{
    width: 250px;
    border-radius: 200px;
}


@media screen and (max-width: 600px){
    /* nav ul {margin: 0 0;} */
    main p{font-size: 15px;max-width: 120ch;}
    main h1{font-size: 30px;}
    .portfolio h2{font-size: 30px;}
    .item_body > h2{font-size: 15px}
    .portfolio-image{    width: 100%    }
}