@import "./variables.css";
@import "./reset.css";
@import "./base.css";

header {
    position: relative;
    padding: 4em 2em;
    color: #fff;
    background-color: var(--color-dark-grey);
    background-image: url("../assets/banner_bg_connections.svg");
    background-repeat: no-repeat;
    background-position: top left;
}

header img {
    margin-bottom: 2em;
    width: 11.75em;
}

header h1 {
    font-size: 1em;
    text-align: left;
}

header::after {
    --height: 0.7em;
    content: '';
    width: 100%;
    height: var(--height);
    position: absolute;
    left: 0;
    top: calc(100% - (var(--height) / 2));
    background: rgb(181,190,0);
    background: linear-gradient(90deg, rgba(0,143,191,1) 0%,  rgba(181,190,0,1) 100%);
}

a {
    font-weight: 600;
    color: var(--color-blue);
}

a:hover{
    color: var(--color-green);

}
section#section-app {
    padding: 3em 2em 2.5em;
    display: flex;
    flex-direction: column;
    row-gap: 2em;
}

.app-store-button-container img{
    height: 3em;
}

section#section-no-internet {
    padding: 2.5em 2em;
    display: flex;
    flex-direction: column;
    row-gap: 0.625em;
    background-color: #f7f7f7;
    border-radius: 15px;
    margin-bottom: 2.5em;
    margin-left: 2.5em;
    margin-right: 2.5em;   
}

#image-app {
    display: flex;
    justify-content: center;
}

#image-programmer {
    max-width: 100%;
    border-radius: 1.5em;
    padding: 1em;
    margin: 0.625em 0;
    display: flex;
    justify-content: center;
}

.app-images-container {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.app-store-button-container {
    display: flex;
    column-gap: 1em;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 640px) {
    main {
        margin: 0 auto;
        width: 640px;
    }
}

@media screen and (max-width: 350px) {
    :root {
        --basefontsize: 4.5vw;
    }
}