@import url(variables.css);
@import url(fonts.css);

header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 2rem;
    background-color: var(--pink);
    position: fixed;
    top: 0;
    z-index: 2;
    box-shadow: 0 8px 8px -4px rgb(0 0 0 / 0.2);

    .header-inner {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        height: 75px;
        width: 1000px;
    }
}

body {
    font-family: Museo_300;
    margin: 0;
    background-color: var(--purple);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}

main {
    margin-top: 2rem;
    max-width: 1300px;
    min-width: 1300px;
    padding: 2rem;
    background-color: var(--lightpink);
    border-radius: 3rem;
    margin: 6.5rem 0;

    @media (max-width: 1400px) {
        min-width: 0;
        width: calc(100% - 4rem);
        padding: 1rem;
    }
}

h2,
h3 {
    margin: 0;
}

a {
    text-decoration: none;
}

.header-link {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: white;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        color: palevioletred;
    }
}

.title-section {
	display: flex;
	background-color: var(--pink);
	color: white;
	border-radius: 2rem;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 4rem;
	gap: 2rem;

	.title {
		font-size: 4rem;
		margin: 0;
	}

	@media (max-width: 1400px) {
		padding: 1rem 2rem;
	}
}