body {
    background-color: black;
    margin: 0;
    }
  img {
  max-width: 100%;
  height: auto;
    }
    
  a:link {color: lightblue}
  a:visited {color: lightblue}
  a:hover {color: red}
    
 
  .container {
        display: grid;
        grid-template-columns: repeat(12, [col-start] 1fr);
        grid-auto-rows: auto;
        padding: 10px;
        gap: 10px;
        box-sizing: border-box;
        min-height: 100vh;
        font-family: impact, arial black, arial;
        grid-template-areas: 
          'header'
          'content'
          'sidebar'
          'footer'
        
      }
      
  
  .header {
    grid-area: header;
    font-size: 10vw;
    color: yellow;
    align-content: center;
    text-shadow: 0.5vw 0.5vw blue;
    background-color: black;
    font-style: italic;
    padding-left: 1vw;
    }        
  .sidebar { 
    grid-area: sidebar;
    background-color: black;
    color: lightblue;
    }
    
  .projectimg {
   display: grid;
   grid-area: 2 / 1 / auto / span 6;
   grid-template-rows: repeat(3, 35vh);
   justify-content: flex-end;
   margin-top: 30vh;
   row-gap: 30vh;
  }
  .projectimg img {
  height: 100%;
  object-fit: contain;
  
  
  }
    .projectimg1 {grid-row: 1}
    .projectimg2 {grid-row: 2}
    .projectimg3 {grid-row: 3}
    
  .projecttxt {
   display: grid;
   grid-area: 2 / 7 / auto / span 6;
   color: yellow;
   grid-template-rows: repeat(3, 35vh);
   align-items: center;
   padding-left: 12px;
   margin-top: 30vh;
   row-gap: 30vh;
  }
    .projecttxt1 {grid-row: 1}
    .projecttxt2 {grid-row: 2}
    .projecttxt3 {grid-row: 3}
    
    
    
    
  
  
 

    
    
    
  .content {
    display: grid;
    grid-area: content;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: black;
    align-self: end;
    
  }        
    .imgsmall {
    grid-column: 3;
    max-height: 50vh;
    width: auto;
    }
    .text2 {
    display: grid;
    grid-column: 1;
    font-size: 1rem;
    color: lightblue;
    text-shadow: 0.5rem 0.2rem yellow;
    place-items: center;
    padding: 15%;
    text-align: left;
    }
    
  
  /* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .header {grid-area: 1 / 1 / span 1 / span 10; font-size: 20pt;}
    .sidebar {grid-area: 1 / 11 / span 6 / span 2; display: grid; place-items: center;}
    .content {grid-area: 2 / 1 / span 5 / span 10;}
    .footer {grid-area: auto/auto}

  }

/* Smaller devices (phones/tablets, 992px and down) */
@media only screen and (max-width: 992px) {
    .header {grid-area: 1 / 1 / span 1 / span 12; font-size: 20pt;}
    .sidebar {grid-area: 2 / 1 / span 1 / span 12; text-align: center; align-content: center; line-height: 200%}
    .content {grid-area: 3 / 1 / span 1 / span 12;}
    .footer {grid-area: auto/auto}
    
}