@import url('https://fonts.googleapis.com/css2?family=Oxygen&family=Ubuntu:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Work+Sans&display=swap');

body {
 background-image: url("https://davidnwilsonsandbox.files.wordpress.com/2021/10/index-gif-short1.gif");
 background-position: center;
 background-repeat: no-repeat; 
 background-size: cover;
}



div.title {
  font-family: 'Ubuntu';
  color: white;
  font-size: 37.5px;
  border: solid;
  border-color: white;
  width: 465px;
}

div.subtitle {
  font-family: 'Oxygen';
  color: white;
  font-size: 20px;
  left: 183px;
  border: solid;
  border-color: green;
}

div.menu {
  position: relative;
  left: 193px;
  font-family: 'Oxygen';
  background-color: white;
  color: purple;
  border: solid;
  border-color: white;
  width: 272px;
}

div.index-description {
  font-family: 'Oxygen';
  color: white;
  background-color: red;
  width: 400px;
  font-size: 20px;
  border: solid;
  border-color: pink;
}

div.stu-container {
  width: 1050px;
  border: solid;
  border-color: orange;

}

div.student {
	  vertical-align: top;
	  display: inline-block;
	  /*left: auto; added this*/
	  margin: 10px;
	  width: 295px;
    height: auto;
	  text-align: left;
	  font-family: 'Oxygen';
	  font-size: 14px;
    background-color: white;
    color: white;
    padding: 10px;
}

div.about {
  position: relative;
  left: 193px;
  font-family: 'Oxygen';
  color: purple;
  background-color: white;
  width: 272px;
  font-size: 15px;
  border: solid;
  border-color: white;
}

div.research {
  position: relative;
  font-family: 'Oxygen';
  color: purple;
  background-color: white;
  width: 465px;
  font-size: 15px;
  border: solid;
  border-color: white;
}

div.examples {
  vertical-align: top;
  display: inline-block;
  /*left: auto; added this*/
  margin: 10px;
  width: 510px;
  height: auto;
  background-color: white;
  color: white;
  padding: 10px;
}

body {
  background-color: purple;
}

mark.one {
  color: red;
  background-color: white;
}

mark.two {
  color: white;
  background-color: purple;
}

mark.three {
  color: white;
  background-color: green;
}

mark.current {
  color: white;
  background-color: purple;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}


a:link {
  text-decoration: none;
  color: purple;
}

a:link.two {
  text-decoration: none;
  color: white;
}

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

img {
  object-fit: cover;
}

img.one {
  width: 290px;
  height: 290px;
  border: solid 1px;
  border-color: grey;
}

img.two {
  width: 100px;
  height: 100px;
  padding: 0px;
  margin: 0px;
}

img.three {
  width: 500px;
  height: 500px;
  padding: 0px;
  margin: 0px;
  border: solid 1px;
  border-color: purple;
}

/* amanda styling */
div.Atext {
  margin: 10px;
  font-family: 'Oxygen';
  color: white;
  width: 600px;
}

div.amandaexamples {
  vertical-align: top;
  display: inline-block;
  /*left: auto; added this*/
  margin: 10px;
  width: auto;
  height: auto;
  background-color: white;
  color: white;
  padding: 10px;
}

img.amanda1 {
  width: 773px;
  height: 500px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}

img.amanda2 {
  width: 889px;
  height: 500px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}

img.amanda3 {
  width: 500px;
  height: 500px;
  padding: 4px;
  margin: 0px;
  border: solid 1px;
  border-color: purple;
}

img.amanda4 {
  width: 1182px;
  height: 500px;
  padding: 4px;
  margin: 0px;
  border: solid 1px;
  border-color: purple;
}
/* end of amanda styling*/

/* JACOB styling*/

div.Jtext {
  margin: 10px;
  font-family: 'Futura';
  color: white;
  width: 600px;
  text-align: center;
}

div.jacobexamples {
  margin: 2px;
  padding: 2px;
  width: auto;
  height: auto;
  vertical-align: top;
  display: inline-block;
  background-color: grey;
  color: white;
  align-content: center;
}

img.jacob {
  width: 486px;
  height: 364px;
  padding: 4px;
  margin: 4px;
  border: solid 2px;
  border-color: orange;
}
/* end of JACOB styling*/

/* CASSIAN styling*/

div.Ctext {
  margin: 10px;
  font-family: 'M PLUS Rounded 1c';
  color: white;
  width: 800px;
}

div.cassianexamples {
  margin: 4px;
  padding: 4px;
  width: auto;
  height: auto;
  vertical-align: top;
  display: inline-block;
  background-color: white;
  color: white;
 
}

img.cassian1 {
  width: 1224px;
  height: 792px;
  padding: 4px;
  margin: 4px;
  border: solid 2px;
  border-color: yellow;
}

img.cassian2 {
  width: 486px;
  height: 364px;
  padding: 4px;
  margin: 4px;
  border: solid 2px;
  border-color: orange;
}
/* end of CASSIAN styling*/

/* Start of Polo's styling*/

div.Ptext {
	text-align: right;
	color: white;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-right: 25px;
	margin-left: 300px;
	border: solid;
  	border-color: white;
}

div.Ptext2 {
	text-align: left;
	color: white;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-right: 300px;
	margin-left: 25px;
	border: solid;
  	border-color: white;
}

/* Start of Megans Styling */
div.Mtext {
  margin: 10px;
  font-family: 'Helvetica';
  color: white;
  width: 600px;
}

div.meganexamples {
  vertical-align: top;
  display: inline-block;
  /*left: auto; added this*/
  margin: 10px;
  width: auto;
  height: auto;
  background-color: white;
  color: white;
  padding: 10px;
}

img.megan1 {
  width: 500px;
  height: 500px;
  padding: 4px;
  margin: 4px;
	background-color: white;
  color: white;
  padding: 10px;
  border: solid 1px;
  border-color: purple;
}

img.megan2 {
  width: 773px;
  height: 500px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}

/* Erica's Styling */
div.Etext {
  margin: 10px;
  font-family: 'Helvetica';
  color: white;
  width: 600px;
}

div.examples-erica {
  vertical-align: top;
  display: inline-block;
  /*left: auto; added this*/
  margin: 10px;
  width: auto;
  height: auto;
  background-color: white;
  color: white;
  padding: 10px;
}

img.img-erica {
  width: auto;
  height: 510px;
  object-fit: contain;
  background-color: white;
  border: solid 1px;
  border-color: purple;
}

/* christian styling */

div.CLtext {
  margin: 10px;
  font-family: 'Oxygen';
  color: white;
  width: 600px;
}



div.christianexamples {
  vertical-align: top;
  display: inline-block;
  /*left: auto; added this*/
  margin: 10px;
  width: auto;
  height: auto;
  background-color: white;
  color: white;
  padding: 10px;
}
img.christian1 {
  width: 773px;
  height: 500px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}
img.christian2 {
  width: 500px;
  height: 773px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}
img.christian3 {
  width: 500px;
  height: 500px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}
img.christian4 {
  width: 773px;
  height: 650px;
  padding: 4px;
  margin: 4px;
  border: solid 1px;
  border-color: purple;
}
/* responsive styling for mobile browsing */

/* when screen is 600px or less apply changes */
@media only screen and (max-width: 600px) {
  
  /* remove .gif background set background color to purple */
  body {
    background-image: none !important;	  
    background-color: purple !important;
  }
	
}