/*this is for the responsive design for the code  for my assignment*/

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

body {
	line-height: 1.5;
	font-family: system-ui, sans-serif;
}

/* Base styles: Mobile-first */
body {
  font-size: 1em;
  padding: 1em;
}


nav ul {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 10px;
}
nav li {
	border: 0px solid red;
	text-align: center;
}

nav li a {
	display: block;
}

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
  body {
    font-size: 1.1em;
    padding: 2em;
  }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
  body {
    font-size: 1.25em;
    padding: 3em;
  }
}
 

 /* Css code after media qurries */

 body {
	font-family: Futura, Arial, sans-serif;
	font-size: 20px;
	background: rgba(106, 137, 167, 0.5); /*This is a blue Gray color*/

}

 .header {

text-align: justify;
border: 4px solid black;
background-color: #B2BEB5; /*this is a ash gray color*/

	a;link , a:visited {
					color: #D70040; 
					/*this will be a Carmine red color*/
							text-decoration: none;

													}

				a:hover, a:focus {
						color:#D2042D; 
						/*this will be a Cherry red color*/


											}


 }

 .name {
 	padding: 2%;
 	text-align: justify;
 }



 #wrapper {

 	img {
 		width: 100%;
 	}
 	
width:90%;
    max-width: 1000px;
	padding: 20px;
	margin: 20px auto;
	padding: 25px 45px 45px 30px;
	text-align: auto;

 }

 #self_photo {
 	border: 4px solid seagreen;
		width: 30%;
 	height: auto;
					float: right;
 					 position: relative;
  					top: -320px; 
  						right: -90px;
 	
 }

 #self_info {
 		text-align: left;
 			position: relative;
 				right: 200px;
 	 }

 .design {

 	border: 4px solid black;
	background-color: #61727C; /*this is a Dark grayish blue color*/
	padding: 5%;

 }

 #web_photos {
 	img{
 		width: 100%;
 	}

 		display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
}

.project img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}


 #websites {
 	text-align: justify;
border: 4px solid slategray;
background-color: #5D8679; /* this is a Cutty Sark cyan color*/

	a;link , a:visited {
		color: ;#DA70D6 /*this will be a Orchid purple color*/
								text-decoration: none;

													}

				a:hover, a:focus {
						color:#BF40BF; /*this will be a bright purple color*/


											}
 }

 #art {

img {
	width: 100%;
	padding: 5%;
}
	 }

 h1 {
	color: #00A36C; 
	/*this is a jade green*/
	font-size: 2em;
}

h2 {
	color: #0BDA51;
	/*this is a Malachite green*/
}