/* for debugging styles */
/* div {
    outline: 2px solid black;
} */

body {
    background-image: url('/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Poppins', sans-serif;
    padding-left: 10%;
    padding-right: 10%;
}

h1, h2, h3, h4, h5, h6 {
    color: #cc5827;
}

html {
    font-size: 150%;
}

#title-container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#title-container div {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
}

#title-container div img {
    height: 64px;
    width: auto;
}

#title-container p {
    vertical-align: middle;
    margin: 10px;
}

#program-roadmap div {
    display: flex;
}

.roadmap-item {
    flex-direction: column;
    flex: 1;
    padding: 10px;
}

.roadmap-item h3 {
    margin: 0;
    margin-top: 5px;
}

.roadmap-item h4 {
    margin: 0;
}

#incubator-roadmap {
    display: flex;
}

#incubator-roadmap div {
    flex: 1;
    padding: 10px;
}

#incubator-roadmap div h3 {
    margin: 0;
    margin-top: 5px;
}

#incubator-roadmap div h4 {
    margin: 0;
}

@media only screen and (max-width: 1280px) { 
    html {
        font-size: 90%;
    }
    body::before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        background: url(background-small.png) no-repeat center center;
        background-attachment: scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    #incubator-roadmap {
        flex-direction: column;
    }
    #program-roadmap div {
        flex-direction: column;
    }
}