body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: url('BackgroundRoman.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* makes it stay in place while scrolling */
}
.textbox {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 500px; 
    z-index: 7;
}

.textbox img {
    width: 100%;   
    height: auto;  
}

.container{
     display: flex;
    justify-content: center; 
    align-items: top; 
    gap: 10px; 

  
}
/* Floating effect */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Slow Wiggle */
@keyframes slowWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(1.5deg); }
    50% { transform: rotate(-1.5deg); }
    75% { transform: rotate(1.5deg); }
}



.box:nth-child(1)  { height: 170px; }  
.box:nth-child(2)  { height: 260px; }  
.box:nth-child(3)  { height: 350px; }  
.box:nth-child(4)  { height: 440px; }  
.box:nth-child(5)  { height: 530px; }  
.box:nth-child(6)  { height: 620px; } 
.box:nth-child(7)  { height: 710px; } 
.box:nth-child(8)  { height: 800px; }  
.box:nth-child(9)  { height: 890px; }  
.box:nth-child(10) { height: 980px; } 

.box {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    
 
    text-decoration: none;
    
    align-items: flex-end;
    transition: transform 0.2s ease, background-color 0.3s;

    /* https://www.w3schools.com/css/css3_animations.asp */
    animation: float 3s ease-in-out infinite alternate,
               slowWiggle 4s ease-in-out infinite alternate,
               glow 6s ease-in-out infinite alternate;
}
/* Hover Effect */
.box:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.5);
}

/* Click Effect */
.box:active {
    transform: scale(0.9);
}

/* Images inside boxes */
.box img {
    max-width: 180%;
    max-height: 200%;
    object-fit: cover;
}
@media (max-width: 900px) {
  .container {
    transform: scale(0.9);
    transform-origin: top center;
  }
}

@media (max-width: 700px) {
  .container {
    transform: scale(0.75);
  }
}

@media (max-width: 500px) {
  .container {
    transform: scale(0.6);
  }
}