@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

h1 {
    font-family: "Climate Crisis";
    color: #aa5353;
    font-weight: 100;
    font-style: normal;
    font-size: 4vw;
    letter-spacing: 0.05em;
}

p {
    font-family: "Host Grotesk", serif;
    color: #737373;
    font-weight: 425;
    font-style: normal;
    font-size: 1.5vw;
}

::selection {
    background-color: #d1fae5;
    color: inherit;
}

.link-a {
    color: #303030;
    border-bottom: 1px solid #969696;
    text-decoration: none;
    transition: color 0.3s;
}

.link-a:hover {
    color: #b5a6a6;
    border-bottom: 1px solid #b5a6a6;
}

.link-button {
    background: none;
    border: none;
    color: #303030;
    border-bottom: 1px solid #969696;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: color 0.3s;
}

.link-button:hover {
    color: #b5a6a6;
    border-bottom: 1px solid #b5a6a6;
}

.highlighted {
    background-color: #d1fae5;
}

.hero-container {
    position: absolute;
    text-align: right;
    top: 30%;
    right: 20%;
}


@media (max-width: 767px) {
    .hero-container {
        text-align: center;
    }
    
    h1 {
        font-size: 12vw;
    }

    p {
        font-size: 3vw;
    }

}