
html {
           filter: sepia(100%) saturate(190%) hue-rotate(190deg)
    }

body {
    

    background-image: url("https://files.catbox.moe/p1fmbu.PNG"); /* Replace with your image path */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: cover; /* Scales the image to cover the entire background */
    background-attachment: fixed; /* Keeps the background image fixed while scrolling */
    
    color:black;
    font-family: Arial, sans-serif;
    
    
    
}

    a:link {
      color: blue;
      background-color: transparent;
      text-decoration: underline;
    }

    a:visited {
     color: purple;
      background-color: transparent;
     text-decoration: underline;
    }

    a:hover {
     color: blue;
     background-color: transparent;
      text-decoration: underline;
    }
  
  
.overlay-container {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 150px;
  height: 180px;
  background-color:#8a8a8a;
  color: black;
  z-index: 10; /*Ensures the overlay stays on top */
  padding:10px;
}
  
  
  
  
  

.container {
        margin:auto;
        margin-top: 35px;
        margin-bottom: 50px;
        width: 970px;
        display: grid;
       
        
        
        background-color:grey;
        padding:20px 20px 20px;

        
      
        grid-gap: 15px 25px;
        grid-template-columns: 250px;
        
}


name, intro, about-me, likes, dislikes, buttons, footer {
    padding: 10px;
    word-wrap: break-word;
    background-color:white;
 
}


name {
  margin-left: auto;
  margin-right: auto;  
  grid-row: 1 / 2;
  grid-column: 2 / 7;
    word-wrap: break-word;
    line-height: 5px; 
  margin-top: auto;
  margin-bottom: auto;
  padding-left:40px;
  padding-right:40px;
}

intro {
  grid-row: 2 / 3 ;
  grid-column: 2 / 5 ;
  margin-left: auto;
  margin-right: auto; 
  padding-left:40px;
  padding-right:40px;
  margin-top: auto;
  margin-bottom: auto;
  word-spacing: 20px;
}
  
about-me {
  
  grid-row: 5 / 6 ;
  grid-column: 2 / 7 ;
  word-wrap: break-word;
  height:200px;
  margin-top:-10px;
}

newbox {
  grid-row: 3 / 5 ;
  grid-column: 3 / 7 ; 
  margin-left:-80px;
  word-wrap: break-word;
  color:white;

  
}
  
likes {
  grid-row: 5 / 6 ;
  grid-column: 1 / 2 ;
  text-align: center;
}
  
dislikes {
  grid-row: 6 / 7 ;
  grid-column: 1 / 2 ;
  text-align: center;

}

buttons {
  grid-row: 7 / 8 ;
  grid-column: 1 / 7 ;
}

footer {
  grid-row: 8 / 9 ;
  grid-column: 1 / 7 ;
  margin-left: auto;
  margin-right: auto; 
  padding-left: 100px;
  padding-right: 100px;
}

pic1{
  grid-row: 1 / 5 ;
  grid-column: 1 / 2 ;
  margin-left:-170px;
  margin-top:-30px;
}


poster1{
  grid-row: 6 / 7 ;
  grid-column: 2 / 3 ;
  margin-top:-25px;
}

poster2{
  grid-row: 6 / 7 ;
  grid-column: 3 / 4 ;
  margin-left:-15px;
  margin-top:-25px;
}

poster3{
  grid-row: 6 / 7 ;
  grid-column: 4 / 5 ;
  margin-left:-15px;
  margin-top:-25px;
}

poster4{
  grid-row: 6 / 7 ;
  grid-column: 5 / 7 ;
  margin-left:-15px;
  margin-top:-25px;
}
  grid-row:  / ;
  grid-column:  / ;
  
}
