:root {
  --border-double:6px double #460707;
  --padding-main: 3%;
}
@font-face {
  font-family: 'fontsncss';
  src: url(/fontsncss/poti.ttf);
}
@font-face {
  font-family: 'fontsncss2';
  src: url(/fontsncss/cute_notes-webfont.woff);
}
@font-face {
  font-family: 'fontsncss3';
  src: url(fontsncss/lacythethree.ttf);
}

body {
  background: url(images/massimo-verona-on-the-walk-021.jpg) no-repeat center center fixed;
  background-size: cover;
  background-color: rgb(79, 66, 52);
  color: #201f1fe1;
  font-family: fontsncss3;
  font-size: 1.2rem;
}
.ilovehead {
  position: relative;
  background-image: url(images/5015.png);
  max-height: 70px;
  color: aliceblue;
  margin: auto;
  margin-top: 3%;
  margin-bottom: 0.3%;
  padding: 1%;
  padding-right: 3%;
  font-family: 'fontsncss';
  font-size: 5rem;
  max-width: 1540px;
  letter-spacing: 20px;
  text-align: right;
  border: solid 4px #1c0e01be;
  /* border-image: url(fa1af055d96107d069e97136438821a0.jpg) 8 a; */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
  .navBar {
    background-image: url(images/fa1af055d96107d069e97136438821a0.jpg);
    border: solid 4px #1c0e01be;
    border-radius: 10px;
    max-width: 1600px;
    padding: 0.5%;
    margin: auto;
    margin-bottom: 1.5%;
    text-align: center;
    color: aliceblue;
    font-size: 1.2rem;
    word-spacing: 25px;
    
    a:link {
      color: #ffffff;
      
    }
    a:visited {
      color: #f0f8ff;
    }
    a:hover {
      color: #7d7b76;
    }
  }
.shelf  {
    /* background-color: aliceblue; */
    background-image: url(images/shelf.png);
    background-position: center;
    background-size: contain;
    width: 1500px;
    height: 690px;
    margin: auto;
 
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 30% auto 28%;
}
.iam {
    max-width: 220px;
    margin-left: 8%;
    margin-top: 38.5%;
}
.green {
  height: 290px;
}
.ow {
    height: 200px;
    margin-top: 35%;
    margin-left: 44%;
    rotate: calc(6deg);
}
.seaLion {
  height: 300px;
  margin-left: 34%;
  margin-bottom: 9%;
  rotate: calc(355deg);
  /* background-color: #1c0e01be; */
}
.midTop {
  margin: auto;
  /* background-color: #f0f8ff; */
  width: 92%;
  max-height: 70%;
}
.midMid {
  /* background-color: #0c0a08be; */
  padding-top: 8.8%;
  width: 90%;
  height: 100%;
  margin: auto;
}
.midBot {
  /* background-color: #fefefe7d; */
  width: 90%;
  height: 100%;
  margin: auto;
  margin-top: 7%;
}
.two {
  /* background-color: #1c0e01be; */
    height: 120px;
  margin-left: 12%;
  margin-bottom: 4%;
}
.three {
    height: 160px;
    margin-left: 8%;
    margin-top: 8%;
}
.four {
    height: 120px;
    margin-left: 3%;
    margin-bottom: 4%;
}
.five {
  height: 120px;
  margin-left: 13%;
  rotate: calc(340deg);
}
.six {
    height: 120px;
    margin-left: 18%;
    rotate: calc(355deg);
} 
.nitw {
  height: 120px;
  width: 400px;
  margin-left: 20%;
  margin-top: 12.5%;
  /* margin-bottom: 12.5%; */
  /* background-color: #1c0e01be; */
}
.gridLeft {
  display: grid;
  grid-template-columns: auto;
  /* background-color: #1c0e01be; */
  max-height: 90%;
}
.gridmid {
  display: grid;
  /* background-color: #1c0e01be; */
  grid-template-rows: 20% 31% 20% 25%;
  grid-template-columns: auto ;
max-height: 90%;
}
.gridRight {
  display: grid;
  grid-template-columns: auto;
  /* background-color: #5d5146be; */
  max-height: 90%;
}
.zoom-image {
  transition: transform 0.5s ease;
}
.zoom-image:hover {
  transform: scale(1.1);
}