:root {
    --text-color: #444444;
    --text-color-dark: #ffffff;
  }

.field {
    text-align: center;
    color: var(--text-color);
    background-color: whitesmoke;
    box-shadow: var(--box-shadow) 0px 2px 8px 0px;
    padding: 2.25rem;
    margin: auto;
    /*margin-top: 2.5rem;*/
    border-spacing: 25px;
    border-radius: 2px;
    align-self: center;
    width: 60%;
    top: 35%;
    bottom: auto;
    position: relative;
    margin-left: 0;
    /*remember to send field general configs to general.css later*/
}

/* Define the keyframe animation for fading in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px); /* Optional: Add a slight upward movement */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common styles for animation */
.animated {
    opacity: 0; /* Initially hide the elements */
    animation: fadeIn 1s forwards; /* Apply fadeIn animation */
}

/* Specific delays for each element to stagger the animations */
.topMessage {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 7.5rem;
    right: 3.9rem;
    justify-content: flex-end;
    align-items: flex-end;
    color: var(--text-color);
    gap: 0.5rem;
    animation-delay: 0.5s; /* Delay for the top message */
}

@media (min-width: 601px) and (max-width: 1200px) {
    .topMessage {
      right: 4rem !important;
    }
}

@media (max-width: 600px){
    .topMessage{
      right: 1.8rem;
    }
}

.arrowUp {
    height: 2.5rem;
    width: auto;
    align-self: flex-end;
    align-content: flex-end;
    right: 0;
    flex-basis: auto;
}

.bottomMessage {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 13.8dvw;
    bottom: 3rem;
    color: var(--text-color);
    gap: 0.5rem;
    animation-delay: 1.5s; /* Delay for the bottom message */
}

@media (min-width: 601px) and (max-width: 1200px) {
    .bottomMessage {
      left: 3.5rem !important;
    }
}

@media (max-width: 600px){
    .bottomMessage{
      flex-direction: row-reverse;
      right: 8rem;
      left: auto;
      bottom: 0.7rem;
      z-index: 2;
    }
    .arrowLeft {
        transform: scaleX(-1);
    }
}

.arrowLeft {
    width: 2.5rem;
    height: auto;
}

.bottomMessageText {
    margin-left: 0.5rem;
}

.searchMessage {
    position: absolute;
    display: flex;
    flex-direction: column;
    /*align-items: flex-end;*/
    left: 14.5dvw;
    top: 3.5rem;
    color: var(--text-color);
    gap: 0.5rem;
    animation-delay: 1s; /* Delay for the search message */
}

@media (min-width: 601px) and (max-width: 1200px) {
    .searchMessage {
      right: 19rem !important;
      left: auto;
      align-items: flex-end;
    }
    .arrow90DegLeft {
        transform: scaleX(-1);
    }
    .searchMessageField {
        align-self: flex-end !important;
    }
    
}

@media (max-width: 600px){
    .searchMessage{
      visibility: hidden;
    }
}

.arrow90DegLeft {
    width: 2.3rem;
    height: auto;
}

.sideMessage {
    left: 15.8dvw;
    top: 45%;
    display: flex;
    position: absolute;
    color: var(--text-color);
    align-items: center;
    margin-left: 0 !important;
    gap: 0.5rem;
    justify-content: flex-end;
    animation-delay: 1s; /* Delay for the side message */
}

@media (max-width: 600px){
    .sideMessage{
      visibility: hidden;
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .sideMessage {
      visibility: hidden;
    } 
}

.arrowSide {
    width: 2.5rem;
    height: auto;
}

.topMessageField {
    margin: 0;
    align-self: flex-end;
}

.leftMessageField {
    margin: 0;
}

.searchMessageField {
    margin: 0;
    align-self: flex-start;
}

.mainPageTitle {
    color: var(--text-color) !important;
    position: relative;
    text-align: center;
    align-self: center;
    top: 45%;
    font-size: 40px;
}

/* Apply the animated class to each element */
.topMessage, .bottomMessage, .searchMessage, .sideMessage {
    opacity: 0; /* Hide initially */
    animation: fadeIn 1s forwards;
}

.topMessage {
    animation-delay: 0.5s;
}

.searchMessage {
    animation-delay: 2.5s;
}

.sideMessage {
    animation-delay: 4.5s;
}

.bottomMessage {
    animation-delay: 6.5s;
}

@media (min-width: 601px) and (max-width: 1200px) {
    .bottomMessage {
      animation-delay: 4.5s;
    } 
}

@media (max-width: 600px){
    .bottomMessage{
        animation-delay: 2.5s;
    }
}