/*===============================================*\
    Fonts, sizes, colors
\*===============================================*/

:root {

/* this percentage makes 1em or 1rem = 10px
   this percentage scales things up to 1920 x 1080
=================================================*/
font-size: 62.5%;

/* this percentage scales things up to 2560 x 1440
=================================================*/
	@media (min-width: 2400px) {
		font-size: 83.125%;
	}

/* Font sizes
=================================================*/
--size-header:    clamp(3.2rem, 0.259vw + 3.103rem, 3.6rem);
--size-subheader: clamp(2.3rem, 0.194vw + 2.227rem, 2.6rem);
--size-body:	  clamp(1.6rem, 0.134vw + 1.542rem, 1.8rem);
--size-secondary: clamp(1.4rem, 0.129vw + 1.351rem, 1.6rem);
--size-tertiary:  clamp(1.2rem, 0.129vw + 1.151rem, 1.4rem);

/* Font templates
=================================================*/
.--bold {
	font-weight: bold;
}

/* Colors
=================================================*/
--purple: #482362ff;
--purple-shadow: #4823627f;
--lt-pink: #f4bfcaff;
--pink: #fc98adff;
--dk-pink: #f16d87ff;
--white: #ffffffff;

}

/*===============================================*\
	General
\*===============================================*/

html,
body {
	height: 100vh;
}

body {
	background: var(--dk-pink);
	color: var(--purple);
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: var(--size-body);
	-webkit-tap-highlight-color: transparent;
}

/* Links
=================================================*/
a, a:visited,
a:hover, a:active {
	color: var(--white);
	text-decoration: none;
}

/* SVG stuff
=================================================*/

.svg-icon {
	height: 2em;
	width: 2em;
	fill: var(--purple);
}

/*===============================================*\
    Content
\*===============================================*/

.sect {
	background: url("../images/background-landscape.jpg") left top no-repeat;
	background-size: cover;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-height: 100%;
	width: 100%;
	padding: 1.875em 0;
}

	@media (min-width: 1400px) and (orientation: landscape) {

		.sect {
			background: url("../images/background-landscape.jpg") center top no-repeat;
			background-size: cover;
		}

	}

.cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.875em;

	min-height: 100%;
	width: 85%;
	max-width: 80rem;
}

.logo {
	max-width: 45rem;
}

.card {
	background-image: linear-gradient(to bottom, var(--lt-pink), var(--dk-pink));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 1;
	gap: 1em;

	width: 100%;
	padding: 2em 0;

	border-radius: 1.2em;
	box-shadow: var(--purple-shadow) 0 .2em .5em,
				inset rgba(255, 255, 255, .4) 0 .1em 0,
				inset rgba(72, 35, 98, .4) 0 -.05em 0;
}

	@media (hover: hover), (-ms-high-contrast: none) {

		.card:hover {
			background-image: linear-gradient(to bottom, var(--pink), var(--dk-pink));
		}

	}

.header {
	display: flex;
	justify-content: space-between;
	gap: 1.4em;

	width: 100%;
}

.social-media {
	display: flex;
	justify-content: space-between;
	flex-shrink: 1;
	gap: 1.4em;

	width: 100%;
}