body {
    background-image: url(images/paperbackground.jpg);
    background-repeat: repeat;
    background-size: 100vw auto;
    filter: sepia(50%);
    filter:saturate(70%);
    /* fonts */
    font-family: "caliban-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:33px;
    margin-bottom: 75px;
    margin-left: -10px;
    margin-right: -10px;
    
}

.florence {
    background-image: url(images/ripfirenze.png);
    background-size: 100% 100%;
    text-shadow:
     -2px -2px 0 rgb(255, 231, 231),
     2px -2px 0 rgb(255, 231, 231), 
     -2px  2px 0 rgb(255, 231, 231),  
     2px  2px 0 rgb(255, 231, 231);
}


.venice {
    background-image: url(images/ripvenice.png);
    background-size: 100% 100%;
    text-shadow: 
     -2px -2px 0 rgb(255, 231, 231),
     2px -2px 0 rgb(255, 231, 231), 
     -2px  2px 0 rgb(255, 231, 231),  
     2px  2px 0 rgb(255, 231, 231);
}

.misctrips {
    background-image: url(images/ripmisc.png);
    background-size: 100% 100%;
    text-shadow:
     -2px -2px 0 rgb(255, 231, 231),
     2px -2px 0 rgb(255, 231, 231), 
     -2px  2px 0 rgb(255, 231, 231),  
     2px  2px 0 rgb(255, 231, 231);
}


h1 {
/* ---------------Title Text--------------- */
    color: brown;
    font-size: 175px;
    text-align: center;
    text-shadow: rgb(164, 201, 238) 3px 3px 10px; 
 /* ---------------Title Background--------------- */
    background-image: url(images/riptitle.png);  
    background-size: 100% 100%;
    background-repeat:repeat-x;
    background-position: center center;
    padding-top: 275px;
    padding-bottom: 200px;
    margin-top: 0px;
    margin-bottom:0px;
    position: relative;
    margin-left: -5px;
    margin-right: -5px;
}

/* ---------------Subtitle--------------- */
h2 {
    color: rgb(80, 15, 15);
    font-size: 75px;
    text-align: center;
    font-weight: 200;
    padding-top: 0px;
    margin-right: 90px;
}

.center {
    color: rgb(144, 34, 34);
    text-align: center;
    font-size: 40px;
    margin-top: 20px;
    padding: 2%;
    margin-left: 100px;
    margin-right: 100px;
}

span a{
    display:inline !important;
}

/* ---------------Body Text & Images --------------- */
p {
    color: rgb(80, 15, 15);
    margin-left: 75px;
    margin-right: 75px;
    margin-top: 5px;
    text-align: left;
}

.container {
    align-items: center;
    display: flex;
    gap: 20px;
    width: 85%;
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.container img {
    Height: auto;
    width: 60%;
}

@keyframes fade-in {
    from {scale:.8; opacity: 0;}
    to {scale: 1; opacity: 1;}
}

.container text {
   padding: auto;
   margin: auto;
}

.container img {
    animation: fade-in linear;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 400px;
}

img {
    filter: contrast(90%);
}

.bigger {
    width: 90%;
    height: auto;
}

.smaller {
    width: auto;
    height: 40%;
}

/* ---------------Header--------------- */
header {
    text-decoration: none;
    margin: auto;
    margin-bottom: 0px;
    display: flex; 
    justify-content: space-evenly; 
    align-items: center; 
    padding: 20px;
    padding-bottom:0px;
    size: 45px;
    
}

header a {
    background-image: url(images/textbackground.webp);
    background-size: 200px auto;
    padding: 35px;
    font-size: 35px;
    padding-right: 15px;
}

.current{
    background-image: url(images/textpin.png);
    background-size: auto 105px;
    background-repeat: no-repeat;
    overflow:visible;

}

a {
    text-decoration: none;
    color: brown;
    font-size: 35px;
    transition: 0.3s ease-in-out;
}

a:hover {
    transform:scale(1.2);
    
}

/* ---------------GALLERY-------------- */

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-left: 30px;
  margin-right: 30px;
}

.gallery-item {
  flex: 1 1 250px;
  max-width: 300px;
  overflow:visible;
  border-radius: 8px;
  transition: transform 0.3s;
}

.gallery-item img {
  width: 100%;
  object-fit: cover;
  height: 100%;
  max-width: 200%;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}