header {
    background-image: url(/Images/CSM-desktop/Home.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 370px;
    z-index: 1;
    color: white;
}

.header-text {
    width: 130px;
    left: 40px;
    top: 90px;
    position: absolute;
    font-size: 1.7rem;
    font-weight: 300;
    z-index: 50;
}

h1 {
    font-size: 2rem;
    font-weight: 300;
}

.home-container {
    height: fit-content;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 1.7rem;
    text-align: center;
    margin: 0 auto;
    background-color: #EFE3CC;
    color: white;
}

.info-content,
.join-us,
.square,
.opening-hours,
.exhibits {
    display: flex;
    align-items: center; 
}

/*info box*/

.info {
    background-color: #282630;
    height: 110px;
}

.info-content {
    justify-content: space-around;
}

.info p {
    width: 100px;
}

/*join us box*/

.join-us {
    background-image: url(/Images/CSM-desktop/join-us.png);
    background-size: 100% 100%;
    height: 100vw;
    justify-content: center;
}

.square {
    background-color: rgb(134, 143, 162 , .80);
    width: 340px;
    height: 340px;
    flex-direction: column;
    justify-content: center;
}

.square p {
    padding: 0 20px;
}

/*explore box*/

.explore {
    background-color: #BB836A;
    display: flex;
    flex-direction: column;
    color: #36322A;
}

.explore h2 {
    color: #7c5130;
}

.explore p {
    padding: 0 40px 30px 40px;
}

.button-img {
    background-image: url(/Images/CSM-desktop/explore-learn-more.png);
    background-size: 100% 100%;
    height: 80vw;
}

.btn:hover {
    color: #FF9D71;
    background-color: #EFE3CC;
    border-color: #FF9D71;
}

.btn:hover {
    border: 2px solid;
}

.button {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    text-decoration: none;
    
}

.btn {
    color: #EFE3CC;
    background-color: #FF9D71;
    cursor: pointer;
    border-radius: 90px;
    border: none;
    padding: 7px 10px;
    width: 90px;
    height: 25px;
    font-size: 1.5rem;
    text-decoration: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/*hours box*/

.opening-hours {
    background-color: #868FA1;
    height: 400px;
    flex-direction: column;
    justify-content: center;
}

/*Exhibits*/

.exhibits {
    background-color: #697188;
    flex-direction: column;
}

.exhibits h2{
    margin: 40px;
}

.slider {
    width: 85vw;
    height: 60vw;
    max-width: 1020px;
    max-height: 720px;
    background: url(/Images/CSM-desktop/slide1.png);
    background-size: 100% 100%;
    animation-name: slide;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@keyframes slide {
    20% {
        background: url(/Images/CSM-desktop/slide5.png);
        background-size: 100% 100%;
    }
    40% {
        background: url(/Images/CSM-desktop/slide2.png);
        background-size: 100% 100%;
    }
    60% {
        background: url(/Images/CSM-desktop/slide3.png);
        background-size: 100% 100%;
    }
    80% {
        background: url(/Images/CSM-desktop/slide4.png);
        background-size: 100% 100%;
    }
    100% {
        background: url(/Images/CSM-desktop/slide1.png);
        background-size: 100% 100%;
    }
}

.button-exhibits {
    margin: 30px 0 80px 0;

}

/*Get involved*/

.involved,
.circle {
    display: flex;
    flex-direction: column;
}

.involved {
    background-image: url(/Images/CSM-desktop/involved.png);
    background-size: 100% 100%;
    height: 80vw;
    align-items: center;
    justify-content: space-around
}

.circle {
    background-color: #282630c9;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    font-size: 1.5rem;
    justify-content: center;
}

.btn-involved {
    padding: 20px 0 20px 0;
}

@media only screen and (min-width: 950px) {
    header {
        height: 900px;
    }
    
    .header-text {
        width: 190px;
        left: 200px;
        top: 350px;
        position: absolute;
        font-size: 2.3rem;
        font-weight: 300;
    }

    h1 {
        font-size: 2.8rem;
        font-weight: 300;
    }

    .home-container {
        display: grid;
        grid-template-columns: 80% 20%;
        font-size: 2.5rem;
    }

    .grid1 {
        grid-column: 1 / span 2;
        grid-row: 1 /span 1;
        height: 25vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .info p {
        width: 130px;
    }

    .grid2 {
        grid-column: 2 / span 1;
        grid-row: 2 / span 2;
        width: 20vw;
        height: 130vw;
        white-space: break-spaces;
        max-width: 288px;
        max-height: 1872px;
    }

    .grid2 h2 {
        font-size: 3rem;
        font-weight: 600;
        width: 200px;
    }

    .hours {
        width: 150px;
    }

    .friday {
        width: 149.1px;
    }

    .grid3 {
        grid-row: 2 / span 1;
        margin-top: 70px;
    }

    .square {
        width: 580px;
        height: 520px;
    }

    .grid3,
    .grid4 {
        width: 60vw;
        height: 55vw;
        max-width: 864px;
        max-height: 792px;
        justify-self: center;
        grid-column: 1 / span 1;
    }

    .grid4 {
        grid-row: 3 /span 1;
        justify-content: space-between;
        margin-top: 40px;
    }

    .grid4 p {
        padding: 0;
        margin-top: 0;
        width: 400px;
        align-self: center;
        font-size: 2.3rem;
    }

    .grid4 h2 {
        margin: 15px;
        font-size: 2.8rem;
    }

    .button-img {
            width: 60vw;
            height: 40vw;
            max-width: 864px;
        }

    .btn {
        border-radius: 90px;
        border: none;
        padding: 7px 10px;
        width: 120px;
        height: 40px;
        font-size: 1.8rem;
    }

    .exhibits input[type="button"] {
        width: 140px;
        height: 50px;
        font-size: 2.3rem;
    }

    .grid5 {
        grid-column: 1 / span 2;
        grid-row: 4 / span 1;
    }

    .grid6 {
        grid-column: 1 /span 2;
        grid-row: 5 / span 1;
        height: 100vw;
        max-height: 1440px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .involved {
        width: 80vw;
        height: 80vw;
        max-width: 1152px;
        max-height: 1152px;
    }

    .circle {
        width: 300px;
        height: 300px;
        font-size: 2.3rem;
    }

}

@media only screen and (min-width: 600px) and (max-width: 949px) {
    header {
        height: 650px;
    }
    
    .header-text {
        width: 160px;
        left: 80px;
        top: 200px;
        position: absolute;
        font-size: 2rem;
        font-weight: 300;
    }

    h1 {
        font-size: 2.5rem;
        font-weight: 300;
    }

    .home-container {
        display: grid;
        grid-template-columns: 80% 20%;
    }

    .grid1 {
        grid-column: 1 / span 2;
        grid-row: 1 /span 1;
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .grid1 img {
        height: 90px;
    }

    .grid2 {
        grid-column: 2 / span 1;
        grid-row: 2 / span 2;
        width: 20vw;
        height: 130vw;
        white-space: break-spaces;
    }

    .grid2 h2 {
        font-size: 2.1rem;
        width: 150px;
    }

    .hours {
        width: 103px;
    }

    .friday {
        width: 101.39px;
    }

    .grid3 {
        grid-row: 2 / span 1;
        margin-top: 70px;
    }

    .square {
        width: 330px;
        height: 300px;
    }

    .grid3,
    .grid4 {
        width: 60vw;
        height: 55vw;
        justify-self: center;
        grid-column: 1 / span 1;
    }

    .grid4 {
        grid-row: 3 /span 1;
        justify-content: space-between;
        margin-top: 40px;
    }

    .grid4 p {
        padding: 0;
        margin-top: 0;
        width: 57vw;
        align-self: center;
        font-size: 1.8rem;
    }

    .grid4 h2 {
        margin: 15px;
        font-size: 2.1rem;
    }

    .grid4 img {
        width: 60vw;
    }

    .button-img {
        width: 60vw;
        height: 60vw;
    }

    .button {
        padding-top: 20px;
    }

    .btn {
        border-radius: 90px;
        border: none;
        padding: 7px 10px;
        font-size: 1.4rem;
        width: 80px;
        height: 25px;
    }

    .button-exhibits {
        width: 95px;
        height: 35px;
        font-size: 1.7rem;
    }

    .exhibits input[type="button"] {
        width: 130px;
        height: 40px;
        font-size: 2rem;
    }

    .grid5 {
        grid-column: 1 / span 2;
        grid-row: 4 /span 1;
    }

    .grid6 {
        grid-column: 1 /span 2;
        grid-row: 5 / span 1;
        width: 100vw;
        height: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .involved {
        width: 80vw;
        height: 80vw;
    }

    .circle {
        width: 225px;
        height: 225px;
        font-size: 2rem;
    }
}