@import url("https://fonts.bunny.net/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap");

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

body {
    overflow-x: hidden;
}

main {
    font-family: 'Ubuntu Sans', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 1.2;
    font-size: 1.2em;
}

.hero h1 {
    font-size: 5rem;
    font-weight: 200;
}

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(farthest-corner, #5a3f47, #1f1a1b);
    color: #ebe0e1;
    height: 50vh;
    padding-bottom: 2.5vh;
    text-align: center;
    position: relative;
}

.hero .title {
    display: flex;
    align-items: center;
}

.hero .title .logo {
    height: 4rem;
}

.hero .action {
    background-color:#51bd51;
    color: white;
    padding: 0.7rem 2.3rem;
    border-radius: 1rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0.4rem 2rem #0004;
    position: absolute;
    bottom: 0vh;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.hero .action svg {
    fill: white;
    height: 1.7rem;
}

.hero .cover {
    color: black;
    height: 2.5vh;
    background: #efefef;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.info {
    background: #efefef;
    width: 100%;
    padding: 3rem 1rem;
}

.info h2 {
    margin-bottom: 2rem;
}

.info h2, .info h3, .info h4 {
    text-align: center;
    font-weight: 500;
}

.info article {
    margin: 1.2rem auto;
    max-width: 1080px;
}

.info .wowies {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-evenly;
    gap: 1rem;
}

.info .wowies div {
    width: 32%;
    min-width: 240px;
}

.info .wowies p {
    font-size: 1rem;
    font-weight: 300;
}

.info .wowies img {
    height: 8rem;
}

.info .demos img {
    max-width: 100%;
}

.info .demos {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem; 
    justify-content: center;
    align-items: center;
}

@media (max-width: 600px) {
    .info .demos {
        grid-template-columns: 1fr;
    }

    .info .demos img {
        justify-self: center;
    }

    .hero h1 {
        font-size: 3.5rem;
    }
}

/* Comparison table */
.info .comparison {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    margin-top: 1rem;
}

.info .comparison thead tr {
    background-color: #1f1a1b;
    color: #ebe0e1;
}

.info .comparison th,
.info .comparison td {
    padding: 0.75rem 1.2rem;
    text-align: center;
    border-bottom: 1px solid #d5cece;
}

.info .comparison th:first-child,
.info .comparison td:first-child {
    text-align: left;
    font-weight: 500;
}

.info .comparison tbody tr:nth-child(even) {
    background-color: #e4dede;
}

.info .comparison tbody tr.adore-row {
    background-color: #d6f0d6;
    font-weight: 600;
}

.info .comparison .check   { color: #3a9e3a; font-size: 1.2rem; }
.info .comparison .cross   { color: #c0392b; font-size: 1.2rem; }
.info .comparison .partial { color: #b07d20; font-size: 1.1rem; }

.footer {
    background-color: #1f1a1b;
    color: #efefef;
    margin: 0 !important;
    padding: 2rem;
}