@import url('./variables.css');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

.dino-homepage {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid var(--orange);
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.welcome {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.welcome-to,
.new  {
    display: block;
}

.come-join-container {
    border: 10px solid var(--blue);
}

.come-join-container,
.the-aim-container {
    display: flex;
    justify-content: center;
    margin: 20px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.come-join {
    background: var(--gradient-blue);
}

.come-join,
.the-aim  {
    padding: 30px;
    margin: 10px;
    border: 3px solid var(--black);
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.exhibition-room-container,
.globe-display-container {
    display: flex;
    justify-content: center;
    margin: 0px 30px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.exhibition-room {
    border: 10px solid var(--pink);
}

.exhibition-room,
.globe {
    width: 100vh;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.window-display-container {
    display: flex;
    justify-content: center;
    margin: 20px 50px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.window-display {
    border: 10px solid #7cc34a;
}

.window-display,
.color-display {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.globe {
    border: 10px solid var(--blue);
}

.the-aim-container {
    border: 10px solid var(--orange);
}

.the-aim {
    background: linear-gradient(180deg, rgba(248, 155, 25, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%);
}

.the-containers {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin: 20px;
    gap: 1.5rem;
}

.explore-container,
.exhibition-container,
.special-events-container,
.visit-container,
.get-involved-container,
.color-display-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.color-display-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

.color-display {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.explore-container,
.get-involved-container {
    border: 10px solid var(--blue); 
}

.exhibition-container,
.visit-container {
    border: 10px solid var(--green);
}

.special-events-container {
    border: 10px solid var(--pink);
}

.explore-bullets,
.exhibition-bullets,
.special-events-bullets,
.visit-bullets,
.get-involved-bullets {
    height: 232px;
    padding: 30px;
    margin: 10px;
    border: 3px solid var(--black);
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px var(--shadow);
}

.explore-bullets li,
.exhibition-bullets li,
.special-events-bullets li,
.visit-bullets li,
.get-involved-bullets li {
    margin-left: 20px;
}

.explore-bullets,
.get-involved-bullets {
    background: var(--gradient-blue);
}

.exhibition-bullets,
.visit-bullets {
    background: var(--gradient-green);
}

.special-events-bullets {
    background: var(--gradient-pink);
}

.color-display {
    border: 10px solid var(--orange);
}

.cta-container {
    margin-top: auto;
}

@media (min-width:600px) {
    .dino-homepage {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 500px;
        object-fit: cover;
        width: calc(100% - 200px);
        margin: 0 100px;
    }

    .welcome-to,
    .new  {
        display: inline;
    }

    .images-row {
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 100%;
    }

    .exhibition-room-container,
    .window-display-container,
    .globe-display-container  {
        width: 33%;
        margin: 20px;
    }

    .exhibition-room,
    .globe {
        width: 100%;
        height: 30vh;
        object-fit: cover;
    }

    .come-join-container,
    .the-aim-container {
        margin: 20px 50px;
        padding: 20px;
    }

    .the-containers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:950px) {
  .come-join-container,
  .the-aim-container {
    margin: 30px 50px;
    }
    
  .exhibition-room,
  .globe {
    width: 100%;
    height: 50vh;
    object-fit: cover; 
    }

  .window-display {
    height: 50vh;
    }
    
  .row-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 20px;
    width: calc(100% - 40px);
    }

    .images-row {
     margin: 30px 50px;
     width: calc(100% - 100px);
    }

   .the-containers {
    grid-template-columns: repeat(3, 1fr);
    margin: 30px 50px;
   }
}
  
@media (min-width:1215px) {
    .come-join-container,
    .the-aim-container {
        margin: 30px 100px;
    }

     .images-row {
     margin: 30px 100px;
     width: calc(100% - 200px);
    }

    .the-containers {
     margin: 30px 50px;
     width: calc(100% - 100px);
    }
    
}