@font-face { 
  font-family: "gothic"; 
src: url('refales.ttf');
}
.container { 
  max-width:1000px;
  margin: 50px auto;
  display: grid;
  grid-gap: 0;
  grid-template-columns: 400px minmax(0, 1fr);
  border-radius: 10%;

}

  
body { background-image: url("bg.jpg");
background-repeat: repeat;
background-size: 200px;
background-attachment: fixed;
cursor: url('forc.png'), auto;
}

header { 
  text-align: center;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  margin-top: 0
}


.paper-nav {
  width: 400px;
  height: 400px;

  background-image: url("navpic.png");
  background-size: cover;           
  background-repeat: no-repeat;
  background-position: center;

  position: relative;               
  font-family: "gothic", sans-serif; 
}


.paper-nav h2 {
  position: absolute;              
  top: 40px;                        
  left: 52%;                        
  transform: translateX(-50%);
  color: rgb(242 228 239);                     
  text-shadow: 3px 3px 6px rgb(63 74 85);  
  margin: 0;
  font-size: 26px;
}


.paper-nav ul {
  list-style: none;                
  padding: 0;
  margin: 0;

  position: absolute;               
  top: 50%;                         
  left: 50%;                        
  transform: translate(-50%, -50%); 
  
  display: flex;
  flex-direction: column;           
  gap: 15px;                        
  text-align: center;
}


.paper-nav a {
  display: block;                  
  text-decoration: none;          
  color: rgb(81, 0, 15);                    
  font-family: "gothic", sans-serif;
  font-size: 20px;
  text-shadow: 1px 1px 2px rgb(80, 87, 136);  
}


.paper-nav a:hover {
  color: #5093ff;                  
  text-shadow: 1px 1px 4px rgb(222, 84, 109);
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;

  width: 600px;   
  height: 1000px;  

  background-image: url("mainfirst.png");
  background-size: 100% 100%;   
  background-repeat: no-repeat;
  background-position: center;

  text-align: center;
  display: flex;                
  flex-direction: column;
  justify-content:center;
  align-items: center;
  margin: 0px ;
  margin-top: -150px;
  padding: 10px;
}

.pet {
  margin-top: -300px;
  
}
footer {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  justify-self: center;
  width: 800px;
  height: 150px;

  background-image: url("futer.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 20px;
 


}