:root{
	--base-color: #ffffff;
	--text-color: #000000;
	-primary-color: #ffc06e;
	--secondary-color: #8D8DFF;
	--color-1: #F9F6F3;
	--color-2: #F3F7F9;
	--color-3: #F6F3F9;
}
/*  *: selects all elements */
/*padding makes sure space between element and border is 0*/
/*margin makes sure space between this element and other elements is 0*/
/*boxsizing borderbox include padding and border withing specified width and height*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*styles html page*/
/*color sets text color to --text-color*/
html {
	color: var(--text-color);
}
/*styles body tag*/
/*padding sets spaccing between border and element to be 1em*/
/*set background-color to --base-color*/
body {
	padding: 1em;
	background-color: var(--base-color);
}
/*styles navagation anchor*/
/*text decoration: add underline when hovered over*/
nav a:hover{
	text-decoration: underline;
}

/*styles heading*/
/*font set to 2.5rem*/
h1{
	font-size: 2.5rem;
}

/*styles events and websites into items of 2*/
/*margin: spaces 100pixels top and bottom*/
/*display: put elements into a flexible layout*/
/*flex directions aligns items in columns*/
/*gap defines a 10pixel space between flex items in the column*/
/*align-items: centers items in the columns*/
.span-events-websites{
	margin: 100px 0px;
	display: flex;
  	flex-direction: column;
  	gap: 10px;
  	align-items: center;
}
/*styles all of the events and websites*/
/*display: puts items into a flexible layout*/
/*gap: puts 20pixel space between flex items*/
/*justify-content: centers items to center of webpage*/
.div-events-websites{
	display: flex;
 	gap: 20px;
 	justify-content: center;
}
/*styles the numbers in the events and websites layout*/
/*color: sets the numbers color to blue*/
/*font-size: sets sets the numbers font size to 60 pixels*/
.number-events-websites{
	color: blue;
	font-size: 60px;
}
/*styles the events and websites text*/
/*font size sets the events and websites text to 20 pixels*/
.text-events-websites{
	font-size: 20px;
}

/*styles h1 and paragraph elements*/
/*margin is set in order of top right bottom left*/
/*sets font weight or boldness to 600*/
.about-us{
	text-align: center;
	flex: 0 1 34em;
	font-weight: 600;

}
/*styles the h1 heading*/
/*margin from top and bottom set to 20px*/
/*font size set to 70px*/
.about-heading{ 
	margin: .75em 0 1em 0;
	font-size: 70px;
}
/*styles the about paragraph*/
/*font size sett to 20pixels*/
.about-paragraph{
	font-size: 20px;
}
/* styles the flex containers image*/
/* max width 100% ensures image will never be bigger then screen size*/
/*border-radius curves corners*/
/*set image height to 400px*/
/*set width to 300px*/
/*object fit tell image to fill its area without streching*/
/*object-position: if cropping happens focus on the bottom part of img*/
.collaborative-workspace-img{
	max-width: 100%;
	border-radius: 1em;
	height: 400px;
	width: 300px;
	object-fit: cover;
	object-position: bottom;
}
/*styles image and text*/
/*display: flex allows child elements to be arraged side-by-side*/
/*justify-content: aligns elements horizontally*/
/*align-items center aligns elements vertically in the center*/
/*flex wrap stacks elements in smaller screens*/
/*gap adds spacing between image and text*/
/*margin auto: centers element horizontally. 2em adds vertical spacing*/
/*width: is 75em width but never overflows the screen at 100%*/
/*background color set to default --color-1*/
/*padding of 2em and 15% for smaller screens*/
/*border-radius gives sides slight curved corners*/
.flex-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 3em;
	margin: 2em auto;
	width: min(75em 100%);
	background-color: var(--color-1);
	padding: min(2em, 15%);
	border-radius: 1em;
}
/*media all creates media query that applies styles to all media types and the styles work when screen is smaller than 768px*/
/*styles the girl coding image/
/*set the height to be 250px*/
/*set the width to be 200px*/
@media all and (max-width: 768px){
	/*styles heading*/
	/*font set to 1.5rem*/
	.about-heading{
		font-size: 1.5rem;
	}
	/*styles image for smaller screens*/
	/*set height to 250pixels*/
	/*set width to 200pixels*/
	.collaborative-workspace-img{
		height: 250px;
		width: 200px;
	}
		/*styles section paragraphs*/
	/*margin top sets margin to 1em*/
	/*font-size sets font to 0.75em*/
	.about-paragraph {
		margin-top: 1em;
		font-size: 0.75rem;
	}
}