@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@400;700&display=swap');

html {
    font-family: 'Raleway', sans-serif;
    font-size: 62.5%;
}

p {
    font-family: 'Open Sans', sans-serif;
    line-height: 22px;
}

h1,
h2 {
    font-size: 3.8rem;
    line-height: 55px;
}

h1~p {
    font-size: 1.7rem;
    margin: 15px 0 24px;
}

body{
    display: grid;
}

header,
section,
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 58px 70px 25px;
    gap: 40px;
}

input {
    width: 300px;
    padding: 14px 20px;
    margin-right: 10px;
    border: 1px solid var(--light);
    border-radius: 5px;
}

input::placeholder {
    color: var(--light);
    font-size: 1.2rem;
}

button {
    color: var(--light-grayish);
    background: var(--bright);
    border: none;
    border-radius: 5px;
    padding: 13px 58px;
    box-shadow: 5px 5px 15px rgba(148, 148, 148, 0.3);
}

button:hover {
    opacity: 70%;
    cursor: pointer;
}