body { 
	background-image: url('images/stars.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color:midnightblue;
	color:white;
	}

hr {
	position: relative;
	top: 3px;
	border: none;
	height: 4px;
	background: linear-gradient(to right, #FFFF00 4%, #2BFF00 26%, #00FFF7 48%, #0800FF 69%, #FF00E6 85%, #CF0000 100%);
	margin-bottom: 3px;
}

h1 {
	text-align: center;
	color: white;
	font-size: 40px;
	}

h2 {
	text-align: center;
	color: white;
	font-size: 40px;
	}
		
img {
	display:  block;
	margin-left: auto;
	margin-right: auto;
}
		
a {
	color: gold;
	font-size: 24px;
	}
	
p {
    color:white; 
    font-size:24px; 
    text-align: center;
}

table {
    border-collapse: collapse;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

th {
    border: 3px solid cyan;
    padding: 8px;
    text-align: center;
}

.navbar {
  background:linear-gradient(90deg, red, blue, orange, purple);
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index:1;
}

.navbar a {
    float: left;
    display: block;
    color: cyan;
    text-align: center;
    padding: 4px 12px;
    text-decoration: none;
    font-size: 20px;
}

.navbar a:hover {
  background: radial-gradient(darkblue, blue, mediumspringgreen);
  color: mediumspringgreen;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: mediumspringgreen;
  padding: 50px;
  font-size: 20px;
}

.center {
    text-align: center;
}

.hover th:hover {
  background: radial-gradient(darkblue, blue, mediumspringgreen);
  color: mediumspringgreen;
}

.container {
    border: solid 2px mediumspringgreen;
    display: flex;
    margin:10px;
    flex-direction: row;
    width:100%;
    border-radius:10px;
    justify-content: flex-start;
}

.container1 {
    border: solid 2px gold;
    display: flex;
    margin:10px;
    flex-direction: column;
    width: 100%;
}

.container2 {
    border: solid 2px magenta;
    display: flex;
    margin:10px;
    flex-direction: row-reverse;
}

.container3 {
    border: solid 2px cyan;
    display: flex;
    margin:10px;
    flex-direction: column-reverse;
}

.container4 {
    border: solid 2px indigo;
    display: flex;
    margin:10px;
    flex-direction: row;
    justify-content: center;
}

.container5 {
    border: solid 2px indigo;
    display: flex;
    margin:10px;
    flex-direction: row;
    justify-content: space-around;
}

.container6 {
    border: solid 2px indigo;
    display: flex;
    margin:10px;
    flex-direction: row;
    justify-content: space-between;
}

.container7 {
    border: solid 2px indigo;
    display: flex;
    margin:10px;
    flex-direction: row;
    justify-content: flex-start;
}

.container8 {
    border: solid 2px indigo;
    display: flex;
    margin:10px;
    flex-direction: row;
    justify-content: flex-end;
}

.containerplain {
    display: flex;
}

.item {
    border: 2px solid skyblue;
    margin: 10px;
    padding:5px;
}

.item1 {
    width:100%;
}

.item2 {
    width:100px;
    height:100px;
    margin:5px;
}

.item3 {
    background: linear-gradient(90deg, mediumspringgreen, cyan, skyblue, magenta);
    flex-basis: 25%;
}

.item4 {
    background: crimson;
    border: dashed 2px gold;
    border-radius: 10px;
    padding: 10px;
}

.zero {
    flex: 0 1 auto;
}

.one {
    flex: 1 1 auto;
}

.two {
    flex: 2 1 auto;
}

.three {
    flex: 3 1 auto;
}

.grid-containerhalf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: solid 2px mediumspringgreen;
}

.grid-container {
    display: grid;
    grid-template-columns: 50px 70px 90px 230px;
    background-color:darkblue;
    border: solid 2px mediumspringgreen;
}

.grid-container1 {
    display: grid;
    grid-template-columns: 90px 230px;
    background-color:darkblue;
    border: solid 2px hotpink;
}

.grid-container2 {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 1fr;
    background-color:darkblue;
    border: solid 2px gold;
}

.grid-container3 {
    display: grid;
    grid-template-columns: 50px repeat(4, 1fr);
    background-color:darkblue;
    border: solid 2px cyan;
}

.grid-container4 {
    display: grid;
    grid-template-rows: 50px 80px 120px;
    border: 2px solid blue;
}

.grid-container5 {
    display: grid;
    grid-template: auto 100px / 1fr 1fr 1fr;
    border: 2px solid blue;
    gap: 20px 10px;
}

.grid-container6 {
    display: grid;
    grid-template: 200px 100px / 1fr 1fr 1fr;
    border: 2px solid mediumspringgreen;
    border-radius: 10px;
    gap: 30px;
}

.grid-container5x5 {
    display: grid;
    grid-template: repeat(5, auto) / repeat(5, 1fr);
    gap: 15px;
}

.grid-item {
    background-color: indigo;
    color: white;
    text-align: center;
    margin: 2px;
}

.gradienttext {
    background: linear-gradient(to right, #FFFF00 4%, #2BFF00 26%, #00FFF7 48%, #0800FF 69%, #FF00E6 85%, #CF0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradienttext2 {
    background: radial-gradient(#FFFF00 4%, #2BFF00 26%, #00FFF7 48%, #0800FF 69%, #FF00E6 85%, #CF0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradienttext3 {
    background: conic-gradient(#FFFF00 4%, #2BFF00 20%, #00FFF7 40%, #0800FF 60%, #FF00E6 80%, #CF0000 90%, #FFFF00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradienttext4 {
    background: radial-gradient(white 10%, yellow 25%, gold 50%, lime 60%, mediumspringgreen 70%, aqua 80%, cyan 90%, blueviolet 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grad1 img {
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}

.grad2 img {
    -webkit-mask-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}

.heading {
	text-align: center;color:#FFFF66;font-size: 40px;
	}

.mainphoto {
	width: 50%;
	border: solid 8px gold;
	padding:32px;
	border-radius: 100%;
	background: linear-gradient(40deg, indigo, blueviolet, aquamarine, gold, orange);
	filter: contrast(130%);
	
}

.medphoto {
	width:25%;
	border: solid 8px gold;
	border-radius:100%;
	padding: 12px;
}

.oval {
	border:solid 8px cyan;
	border-radius:100%;
	padding:10px;
	text-align:center;
	}

.colorfuloval {
	background-image: conic-gradient(#FFFF00 4%, #2BFF00 26%, #00FFF7 48%, #0800FF 69%, #FF00E6 80%, #CF0000 90%, #FFFF00 100%);
	border-radius:100%;
	padding:10px;
	text-align:center;
	}

.randomness {
	width:60%;
	font-size:20px;
	font-weight:bold;
	font-style:italic;
	background: linear-gradient(45deg, blueviolet, orange, crimson);
	text-align:center;
	padding: 100px;
	border-radius: 100%;
	border: solid 8px hotpink
	}

.menu {
	width: 25%;
	padding: 20px;	
	border: solid 8px cyan;
	background: linear-gradient(20deg, indigo, gold);
	}
	
.advphoto {
	width:30%;
	border: solid deeppink 5px;
	border-radius: 20% 0 20% 0;
	filter: blur(0) 
		contrast(150%) 
		grayscale(0%) 
		brightness(100%)
		opacity(100%)
		saturate(100%);
	}
		
.block {
	border: solid mediumspringgreen 5px;
	background: linear-gradient(20deg, cyan, deeppink, blueviolet);
	border-radius: 100%;
	}
	
.border {
    border: solid mediumspringgreen 5px;
    border-radius: 10px;
    padding: 10px;
}

.sidemargins {
    margin-left:40px;
    margin-right:40px;
}

.padding {
    padding: 10px;
}