body {
    padding: 0;
    margin:0;
    text-align: center;
    font-family: Impact, Haettenschweiler, sans-serif;
  color: cad;
  font-size: 45px;
 background-image: url(bak.jpg);
background-position-x: center;
background-attachment: fixed;
  background-size: cover;
    
    display: grid;
    grid-template-areas:  
        "nav"
        "header"
        "main"
        "footer";
}
body:before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3); /* dark transparent layer */
  z-index: -1; /* keeps it behind everything */
}

header {
    grid-area: header;
padding: 1px;
  text-align-last: left;  }

.header-logo {
  height: 300px;  /* adjust size of my name */
  width: 1500px;}

nav {
    grid-area: nav;
    color:darkmagenta;

font-size: 35px;
padding: 2px;
    width: 100%;
    border-radius: 15px 55px;
    height: 150px; 
    align-content: center;
    font-family: Impact;
    
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
   
}

nav section {background-color: white;
    height:45px;
    padding: 10px;
    align-content: center;
    margin: 10px;
    border-radius: 15px 55px
}



a {
text-decoration-line: none; 

}
a:hover {
    color: red;
    text-shadow: 2px 2px 5px #6d2626 ;
}



nav p {
    font-family: Impact;
    text-align: center;}



main {grid-area: main;}
footer {grid-area: footer;}

/*my "main" */
 .art-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "art1 writing"
    "art2 video";
  gap: 40px;
  margin: 65px;
   
}

/* Shared box style, */
.art-layout > div {
  background-color: white;
  color: black;
  font-family: Impact, sans-serif;
  font-size: 55px;
  display: flex;
  align-items: center;
  
  border-radius: 25px;
  text-transform: uppercase;
  
}




/* Positioning each block */
.art1 img,
.art2 img {
  width: 100%;
  height: 100%;
  object-fit:scale-down;
}




.video video {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  border-radius: 25px;
}


/* Positioning each block */
.art1 {
  grid-area: art1;
  height: 800px;
}

.art2 {
  grid-area: art2;
  height: 800px;
}

.video 
{grid-area: video;
 height: 800px}



footer {grid-area: footer;
    color:darkmagenta;
background-color: white;
font-size: 35px;
 font-family: Franklin Gothic Medium;
padding: 4px;
display:grid;
grid-template-columns: 1fr 1fr;
  }
footer:hover {color: red;
text-shadow: 2px 2px 5px red}

.about-page {
  text-align: center;
  padding: 20px;
  color: black;
  
}

.profile-pic {
  width: 250px;
  height: 250px;
  border-radius: 50%; /* circular */
  margin-bottom: 20px; /* space between the image and text */
  border: 4px solid black; 
object-fit: scale-down;
  background-color: white;
}




.tier-list {
  max-width: 600px;
  margin: auto;
  text-align: left;
}

.tier-list h2 {
  margin-top: 30px;
  color: darkmagenta;
  font-family: Impact;
}

.tier-list ul {
  list-style: none;
  padding: 0;
}

.tier-list li {
  background-color: lightgray;
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif;
}