/* create a style for the root class */
:root {
    --clr-white: #ffffff;
    --clr-black: #000000;
	--clr-accent: #BD83FF;


    /*font sizes */
    --fs-h1-desktop: 50px;
    --fs-h1-mobile: 40px;
	--fs-h2-desktop: 25px;
	--fs-h2-mobile: 20px;
    --fs-p-desktop: 20px;
	--fs-p-mobile: 16px;

    /*font weights */
	--fw-h1: 300;
	--fw-h2: 200;
	--fw-h3: 200;
	--fw-p: 200;

}

html {
	font-family: 'Encode Sans Expanded', sans-serif;
	color: white;
	-webkit-appearance: none;  
}

body {
	background: var(--clr-black);
    text-shadow: #00000060 0px 0px 40px;
    margin: 0;
    padding: 0;
    display: flex;
	justify-content: center;
}

.container {
	width: 300px;
    margin: 10px;
    display: flex;
    gap: 40px;
    flex-direction: column;
    align-items: center;
}

h1 {
	color: var( --clr-white);
	font-size: var( --fs-h1-mobile);
	font-weight: var(--fw-h1);
	margin: 5px 0px 5px 0px;
}

h2 {
	color: var( --clr-white);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-h2);
	margin: 0px;
}

p {
	color: var( --clr-white);
	font-size: var( --fs-p);
	font-weight: var(--fw-p);
	margin-top: 20px;
}

a {
    text-decoration: none;
    color: inherit; 
}

a:hover {
    color: #D8DFF0;
}

.logo img {
    width: 160px;
    height: auto;
    margin-top: 20px;
}

.centered {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}
.leftAlign {
	display: flex;
	justify-content: left;
	align-items: left;
	flex-direction: column;
	text-align: left;
	width: 100%;
}

.section {
	width: 100%;
    gap: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.appItem {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	padding: 20px;
	background-color: #141923;
	border-radius: 20px;
}
.appItem img {
    width: 120px;
    height: auto;
	border-radius: 20px;
}

.split {
	display: block;
}
.rightSide {
	display: block;
}
.leftSide {
	display: block;
}

.fullWidth{
	width: 100%;
}

.contact {
	display: flex;
	justify-content: center;
}
.contact a {
	text-decoration: none;
    display: flex;
    /* width: 100%; */
    color: inherit;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	gap: 10px;
}
.contact img {
	height: 20px;
}

.emptySpace {
	min-height: 50px;
}


/* ------------------------------------------ RESPONSIVE Styling ----------------------- */
/* styles for desktop */
@media (min-width: 720px) {
	h1 {
		font-size: var(--fs-h1-desktop);
	}
	h2 {
		font-size: var(--fs-h2-desktop);
	}
	h3 {
		font-size: var(--fs-h3-desktop);
	}
	p {
		font-size: var(--fs-p-desktop);
	}
	.container {
		width: 700px;
		margin: 20px;
		gap: 40px;
	}

	.appItem img {
		width: 200px;
		height: auto;
		border-radius: 40px;
	}

	.split {
		display: flex;
		gap: 20px;
		flex-direction: row;
		align-items: center;
	}
	.rightSide {
		display: flex;
		flex-direction: column;
	}
}