:root {
    --primary: #111;
    --white: #fff;
    --asphalt: #2c3e50;
    --wishteria: #8e44ad;
    --clouds: #ecf0f1;
    --silver: #bdc3c7;
    --concrete: #95a5a6;
    --asbestos: #7f8c8d;
    --alizarin: #e74c3c;
    --emerald: #34495e;

    --max-width: 1400px;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body * {
    /* border: 1px solid var(--alizarin); */
}
main {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 120px minmax(480px, 1fr) 60px;
    justify-content: center;
}

/* HEADER */
header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-bottom: 2px solid var(--asphalt);
    background-color: var(--white);
}
.header-container {
    width: 100%;
    max-width: var(--max-width);
    padding: 1rem;
}
.site-logo {
    width: 280px;
    max-width: 100%;
    height: 100%;
    background-image: url(../logo.png);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

/* MAIN */
.page-main {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.downloads {
    padding: 1.5rem;
}
.downloads h2 {
    font-size: 1.2rem;
    text-align: center;
    padding-bottom: 1rem;
}
.download_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}
.app-download {
    width: 140px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.app-store {
    background-image: url(../images/app-store.png);
}
.play-store {
    background-image: url(../images/play-store.png);
}
.page-footer {
    border-top: 2px solid var(--asphalt);
    display: flex;
    justify-content: center;
    align-items: center;
}
.copy-right {
    font-size: .8rem;
    color: var(--asphalt);
}