#page-landing{
    background: linear-gradient(329.54deg, #29b6d1 0%, #00c7c7 100%);

    text-align: center;
    min-height: 100vh ;

    display: flex;
}


#container{
    margin:auto;

    width: min(90%, 112rem);
    /* 112 rem aqui vale 1120px pq la no root definimos 62.5%, que é 10px */
}

.location, h1, .visit p {
    height: 16vh;
}


main h1 {
    font-size: clamp(4rem, 7vw, 7.6rem);
    font-weight: bold;
}


.visit a {
    width: 8rem;
    height: 8rem;
    background: #fff666;

    border: none;
    border-radius: 3rem;
    
    display:flex;
    align-items: center;
    justify-content: center;

    margin: auto;

    transition: background 200ms
}

.visit a:hover {
    background: #96feff;
}

/* desktop version */
@media (min-width:760px) {

    #container{
        padding: 5rem 2rem 5rem 2rem;
        /* shorthand background: image repeat position / size */
        background: url("../assets/images/bg.svg") no-repeat 80% / clamp(30rem, 35vw, 56rem);

    }

    header{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .location, h1, .visit p{
        height: initial;
        text-align: initial;
    }

    .location {
        text-align: right;
        font-size: 2.4rem;
        line-height: 1.5;
    }

    main h1 {
        line-height: .88;

        width: min(300px, 80%);
        margin: clamp(6%, 5vh, 10%) 0 2rem;
    }

    .visit{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .visit p {
        font-size: 2.4rem;
        line-height: 1.5;
        width: clamp(20rem, 20vw, 30rem);
    }

    .visit a {
        margin: initial;
    }
}