html {
    scroll-behavior: smooth;
}


body  {
background-image:url("image.jpg");
background-attachment: fixed
background-size:100% 100%;

font-family:"Open Sans";sans-serif;
padding: 10px 0px;
font-size: 18px;
margin: 10px;
color:#090977;
}


.parent {
  margin: 2px;
  border: 1px solid black;
  border-top-left-radius:15px ;
  border-top-right-radius: 15px ;
  padding: 10px 5px;
  font-size: 40px;
  text-decoration: bold;
  font-family: 'Agu Display';
  text-align: center;
  background-color:#0d1244; 
  color:#FFF;
  

}




.child {
  display: inline-block;
  width:100%;
  margin:3px;
  border: 3px solid black;
  border-radius: 15px;
  padding: 10px 10px;
  vertical-align: middle;
  background-image: url(image2.jpg) ;
   /*background-color:#ccccff;*/
  color:white;
  font-size: 30px;
  text-decoration:underline;
}

ul {
   list-style-type: none;
}

.bigbox{

  display: grid;
  grid-template-columns:33% 33% 33% ;
  grid-template-rows: repeat(15, 1fr);
  gap:10px;
}

.planet{
	width: 100%;
	height: 100%;
	max-height:400px;
	max-width:80%;
	border-radius:15%;
	overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
	margin-top:10px;
	background-image: url("black.jpg");
	background-size: 100% 100%;
	
}
.earth { 						/*Earth*/
	grid-row:4;
	grid-column:1;
}
.e1 {
	grid-row:4;
	grid-column-start: 2;
	grid-column-end:4;
}
.mars { 						/*Mars*/
	grid-row:5;
	grid-column:3;
}
.m1 {
	grid-row:5;
    grid-column-start: 1;
	grid-column-end:3;
}
.murk {					/*Mercury*/
	grid-row:2;
	grid-column:1;
}
.mu1 {			
	grid-row:2;
	grid-column-start: 2;
	grid-column-end:4;
}
.venus { 						/*Venus*/
	grid-row:3;
	grid-column:3;
}
.v1 {
	grid-row:3;
	grid-column-start: 1;
	grid-column-end:3;
}	


.jupiter { 						/*Jupiter*/
	grid-row:7;
	grid-column:1;
}
.j1 {
	grid-row:7;
	grid-column-start: 2;
	grid-column-end:4;
}

.saturn { 						/*Saturn*/
	grid-row:8;
	grid-column:3;
}
.sa1 {
	grid-row:8;
	grid-column-start: 1;
	grid-column-end:3;
}

.uranus { 						/*Uranus*/
	grid-row:9;
	grid-column:1;
}
.u1 {
	grid-row:9;
	grid-column-start: 2;
	grid-column-end:4;
}

.neptune { 						/*Neptune*/
	grid-row:10;
	grid-column:3;
}
.ne1 {
	grid-row:10;
	grid-column-start: 1;
	grid-column-end:3;
}

.sunn { 						/**/
	grid-row:12;
	grid-column:1;
}
.sun1 {
	grid-row:12;
	grid-column: 2/4;
}


	/*---------------------------------------------------------------------------------------------------------*/

	
.left {

	text-align:left;
	overflow-wrap:anywhere;
	
}



.image {
    height: auto;
    max-width: 180%;
}

.even {
display:flex;
justify-content:space-between;
}

#content {
  position: center;
  /*background-color: #cacbdb;*/
  background: rgb(202,203,219);
  background: linear-gradient(207deg, rgba(202,203,219,1) 0%, rgba(144,179,217,1) 35%, rgba(224,172,201,1) 73%, rgba(163,140,215,1) 100%);
  border-radius: 15px;
  padding-top: 1px;
  padding-bottom: 1px;


  height: 100%;
  width: 100hw;
  margin: 2% 2%;
}

b {
	Font-size:22px;
}

h2{
	Font-size:30px;
	text-align:center;
	text-decoration: italic;
	text-decoration:underline;
	
}

.Agu	{
    font-family: 'Agu Display';
	font-size: 100px;
}

.outerplanets {
	grid-row:6;
	grid-column:2;
	text-align:center;
	text-decoration:bold;
	text-decoration:italic;
	text-overflow:anywhere;
	Font-size:30px;
}


.decol {
	grid-row: 6;
	grid-column: 1;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}
.decor {
	grid-row: 6;
	grid-column: 3;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}

.outerplanets2 {
	grid-row:1;
	grid-column:2;
	text-align:center;
	text-decoration:bold;
	text-decoration:italic;
	text-overflow:anywhere;
	Font-size:30px;
}
.decol2{
	grid-row: 1;
	grid-column: 1;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}
.decor2 {
	grid-row: 1;
	grid-column: 3;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}

.sun {
	grid-row:11;
	grid-column:2;
	text-align:center;
	text-decoration:bold;
	text-decoration:italic;
	text-overflow:anywhere;
	Font-size:30px;
}
.decol3{
	grid-row: 11;
	grid-column: 1;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}
.decor3 {
	grid-row: 11;
	grid-column: 3;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}

.quiz {
	grid-row:13;
	grid-column:2;
	text-align:center;
	text-decoration:bold;
	text-decoration:italic;
	text-overflow:anywhere;
	Font-size:30px;
}
.decol4{
	grid-row: 13;
	grid-column: 1;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}
.decor4 {
	grid-row: 13;
	grid-column: 3;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}


.links-and-copyrights {
	grid-row:15;
	grid-column:2;
	text-align:center;
	text-decoration:bold;
	text-decoration:italic;
	text-overflow:anywhere;
	Font-size:30px;
}
.decol5{
	grid-row: 15;
	grid-column: 1;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}
.decor5 {
	grid-row: 15;
	grid-column: 3;
    text-align: center;
	text-decoration:italic;
	Font-size:40px;
}

hr {
	color:#26007d;
}


a:link, a:visited {
  color: #FFF;
}

a:hover, a:active {
  color: #60ffdf;
}

.hi {
	grid-row:14;
	grid-column:1/4;
}

.hi > fieldset{ 
		font-size:30px;
}

/*made by Alica*/