/*root predefines commonly used colors*/
: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 {
	
}
/*styles body tag*/
/*set background-color to black*/
#body {
	background-color: black;
}


/*styles the heading and paragraph*/
/*centers text horizontally*/
.text-container{
	text-align: center;
}
/*styles navagation anchor*/
/*text decoration: add underline when hovered over*/
nav a:hover{
	text-decoration: underline;
}
/*styles the flex container*/
/*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{
	margin: 2em auto;
	width: min(75em 100%);
	background-color: black;
	padding: min(2em, 15%);
	border-radius: 1em;
}
/*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*/
.flex-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 3em;
}
/* 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*/
/*box: shadow places a shadow offset 5pixels horizontally and vertically with a blur radius of 10pixels and semi transparent black*/
.girlcoding{
	max-width: 100%;
	border-radius: 1em;
	height: 400px;
	width: 300px;
	object-fit: cover;
	object-position: bottom;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1);

}


/*styles the coding image*/
/*sets width to 350pixels*/
/*box: shadow places a shadow offset 5pixels horizontally and vertically with a blur radius of 10pixels and semi transparent black*/
/*border-radius curves corners*/
.codingimg{
	animation: 1s ease-out 0s 1 slideInFromRight;
	width: 350px;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
	border-radius: 1em;
}
/*styles heading and paragraph*/
/*flex in order flex grow, flex shrink, and flex basis-which is prefered width*/
.text-container{
	flex: 0 1 34em;
	color: white;
}
/*styles heading*/
/*font set to 2.5rem*/
h1{
	font-size: 2.5rem;
	font-weight: 600;
}
/*styles paragraph*/
/*margin in order of top right bottom left*/
.text-container p{
	margin: .75em 0 1em 0;
}
/*styles each section*/
/*padding in order top and bottom 3em left and right is responsive 15%*/
/*set background color to --color-2*/
/*text align center centers all text inside of section */
/*sets font weight to 600 boldness*/
section{
	padding: 3em min(2em, 15%);
	background-color: black;
	text-align: center;
	font-weight: 600;
}

.questions-title{
	color: white;
}

/*styles section paragraphs*/
/*margin top sets margin to 1em*/
/*font-size sets font to 1.25em*/
section p {
	margin-top: 1em;
	font-size: 1.25rem;
}
/*styles detail tags*/
/*margin top adds spacing between the tops of detail elements*/
/*background color set to --base-color*/
/*border radius curve border*/
details{
	margin-top: 1em;
	background-color: var(--base-color);
	border-radius: 1em;
}
/* styles the detail summary tag */
/*padding between border and element of 1em*/
/*set the font size of summmary to 1.7rem*/
details summary{
	padding: 1em;
	font-size: 1.7rem;
}
/*styles the details paragraph*/
/* padding in order of top right bottom left*/
details p{
	padding: 0 2em 2em 2em;
}
/*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;
 	background-color: black;
}
/*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;
	color: white;
}

/*styles the grid of example work*/
/*displays a grid layout*/
/*repeat specifies the column should be repeated 3 times. 1fr unit ensures columns share remaining space equally.*/ 
/*gap sets space between grid items*/
.examples-container-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;

}
/*styles grid*/
/*max width doesn't let width of container go bigger than 1200pixes*/
/*margin auto centers block-level element inside container*/
/*padding spaces top and bottom 10rem. Also, left and right 1 rem.*/
/*text-align centers text heeading text and centers grid texts*/
.section-container{
	margin: auto;
	padding: 10rem 1rem;
	text-align: center;
}
/*styles individual grid items*/
/* diplay: Initialize a flex container */
/*flex-direction: Arrange items vertically in a column 
/* justify-content: Vertically center items */
/*align-items: Horizontally center items */
/*background color of grid item is white*/
/*border radius rounds the edges of grid elements*/
/*box: shadow places a shadow offset 5pixels horizontally and vertically with a blur radius of 10pixels and semi transparent black*/
.image-label{
	display: flex; 
 	flex-direction: column; 
 	justify-content: center; 
  align-items: center;
 	background-color: white;
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
}
.image-label label {
	text-size: 60px;
}
.example-img:hover {
  transform: scale(1.1); /* Scale up by 20% on hover */
}

.example-img{
	margin: 10px;
	border-radius: 5px;
}
.example-work-title{
	font-size: 30px;
	font-weight: 500;
	color: white;
}

.form-group label{
	color: white;
}
.world-flex{
	display: flex;
	height: 700px;
	background-color: black;

}
.world{
	width: 50%;
}
.world-text p{
	width: 50%;
	color: white;
	font-size: 40px;
	color:white;
}

.world-text{
	display: flex;
	justify-content: center;
	align-items: center;
}

.payment-text p {
	font-size: 40px;
	color: white;
	font-weight: 500;
	text-align: center;
	margin: 20px;
}

#paypal-button-container-P-2XS6873971460343NNDXDGZY{
  width: 50%; /* Or any desired width */
  margin-left: auto;
  margin-right: auto;
}

/*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){
	.example-img{
		max-width: 90%;
	}
	/*styles the grid*/
	/*display set to grid layout*/
	/*grid template columns creates a single column that takes up 3 available spaces*/
	.examples-container-grid {
		display: grid;
    grid-template-columns: 3fr; 
    place-items: center;		
  }
	.world-flex{
		display: block;
	}
	.example-img{
  	height: 250px;
		width: 200px;
  }
	.girlcoding{
		height: 250px;
		width: 200px;
	}
	/*styles the section image*/
	/*set the width to be 200px*/
	.codingimg{
		width: 200px;
	}
	/*styles heading*/
	/*font set to 1.5rem*/
	h1{
		font-size: 1.5rem;
	}
	/* styles the detail summary tag */
	/*padding between border and element of 1em*/
	/*set the font size of summmary to 1.0rem*/
	details summary{
		padding: 1em;
		font-size: 1.0rem;
	}
	/*styles section paragraphs*/
	/*margin top sets margin to 1em*/
	/*font-size sets font to 0.75em*/
	section p {
		margin-top: 1em;
		font-size: 0.75rem;
	}
	/*styles the events and websites text*/
	/*display items in a flexible layout*/
	/*flex-direction: puts items into a column*/
	/*align-items: centers items in the webpage*/
	.div-events-websites{
			display: flex;
	  	flex-direction: column;
	  	align-items: center;
	}
	.world{
		z-index: -10;
		width: 100%;
		height: 700px;
		margin-top: -30px;
	}
	.world-text p{
		position: absolute;
		margin-top: 500px;
		/*justify-content: center;
		left: 50%;
		transform: translate(-50%, -50%);*/
		font-size: 40px;
	}


}

@media all and (max-width: 1100px){

  /*styles the grid container*/
  /*width makes grid widths smaller*/
  /*centers grid items vertically*/
  /*display set to grid layout*/
	/*grid template columns creates a single column that takes up 3 available spaces*/
 .examples-container-grid{
		width: 400px;
		margin: auto;
		display: grid;
    grid-template-columns: 3fr;

  }
}
@media all and (max-width: 500px){
 .examples-container-grid{
 		width: 200px;
 		
	}
}