.page1outer {
    background-image: linear-gradient(to bottom, #EEEEFF , #7777FF);
}

.page2outer {
    background-image: linear-gradient(to bottom, #7777FF, #55DDFF);
    padding-top: 30px;
    font-size: clamp(17px, 2.1vw, 21px);
}

.page1inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.page2inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 30px;
}

.indexeye{
    opacity: 0;
    animation: fadeKey 3s linear forwards;
    animation-delay: 0.5s;
    text-align:center;
    width:100%;
    max-width: 1200px;
    font-size: clamp(8px, 6vw, 80px);
    padding-top: 20px;
    font-family:'Times New Roman', Times, serif;
}

.indexship{
    scale: 1.3;
    max-width: 1200px;
    height: 100px;
    margin: 0 auto;
    flex-grow:1;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    animation: zoomKey 3s ease forwards;
    animation-delay: 0.5s;
}

.sing-along{
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeKey 3s linear forwards;
    animation-delay: 0.5s;
    font-size: clamp(10px, 6vw, 60px);
    padding-top: 30px;
    padding-bottom: 30px;
    font-family:cursive;
    font-style: italic;
    font-weight: 100;
}

@keyframes zoomKey {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.75);
  }
}

@keyframes fadeKey {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.richard{
    flex-basis: 48%;
}

.ahoy{
    flex-basis: 48%;
}

.ahoy2{
    font-weight:bold;
    font-style: italic;
}

.upper{
    font-size: clamp(10px, 8vw, 100px);
}

.bullets{
    
    width: 290px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom: 20px;
    transition: color 0.2s ease;
}

@media (max-width: 768px) {
    .page2inner {
        flex-direction: column;
    }
    .ahoy {
        padding: 10px;
        padding-top: 20px;
    }
  
}