/* gradient info goes in the first two lines in body, or five lines if you picked max compatibility */



body {
  height: 100%;
  color: #fff;
  background-color: #000;
  background-image: url("../images/dither.jpg");
  background-position-y: bottom;
  background-repeat: repeat-x;
  line-height: 1.7;
  font-family: 'Inconsolata', monospace;
  overflow-wrap: break-word; 
}

.logoimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

.diconimg {
	border-radius: 50%;
	width: 40%;

}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


h1,h2,h3,h4,h5,h6 {
  font-family: 'Inconsolata', monospace;
 
  }
  
 .goh { color: #f9a6ff; }

div {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

div.navbar {
  background-image: url("../images/dither.jpg");
  background-color: #000;
  color: #fff;
  line-height: normal;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: double;
  border-radius: 3px;
  padding: 0px 5px 5px 5px;
  margin: 10px 10px 10px 10px;
  font-size: 40px;
  top: 0; 
  width: 99%; 
}

/* links */

a {
text-decoration: underline overline;
background-color: #000;
color: #ff50c5;
font-weight: bold;
white-space: nowrap;
}


a:hover {
text-decoration: line-through;
background-color: #000;
color: #ff50c5;
font-weight: bold;
}

ul.link-row {
  list-style-type: none;
  margin: 5px;
  padding: 5px;
  overflow: hidden;
}

li.link-row {
	float: left;
	margin: 10px;
}


/* block */
div.full-block {
  background-color: #000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: double;
  border-radius: 3px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;

}


div.left-block {
  background-color: #000;
  border-style: none none none solid;
  border-width: 1px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;
 
}

div.right-block {
  background-color: #000;
  border-style: none solid none none;
  border-width: 1px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;

}

div.left-right-block {
  background-color: #000;
  border-style: none solid none solid;
  border-width: 1px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;

}

div.bottom-block {
  background-color: #000;
  border-style: none none solid none;
  border-width: 1px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;

}

div.top-bottom-block {
  background-color: #000;
  border-style: solid none solid none;
  border-width: 1px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;

}


div.none-block {
  background-color: #000;
  border-style: none;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;

}

/* dividers 

div.hr-vert {
  border-left: 1px solid white;
  border-width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -3px;
}
*/

div.hr-horiz {
  border-style: solid none none none;
  border-width: 1px;
  padding: 0px 30px 30px 30px;
  margin: 40px 20px 40px 20px;
}



/* grids */

.four-grid {
   display: grid; 

   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
   
 
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
#item-2 {

   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}
#item-3 {

   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}

.three-grid {
   display: grid; 

   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
 
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
#item-2 {

   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 3;
   grid-column-end: 3;
   
}


.two-grid {
   display: grid; 
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr;
   
   gap: 0px;
   height: 100%;

   
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}

.progress-bar {
  text-align:center;
  color: #fff;
  background-image: url("../images/dither2.jpg");
  background-color: #000;
  border-color: #ff50c5!important;
  border-top: 3px solid;
  border-left: 3px solid;
  border-right: 3px solid;
  border-bottom: 3px solid;
  border-radius: 5px;
  padding: 0px 0px 0px 0px;
  margin: 40px 20px 40px 20px;

}

.progress-bar-inside {
	text-align:center;
	background-color: #ff50c5;
}

/* MOBILE VIEW */


@media (max-width: 700px){
	

/* changes formatting of navbar */

div.navbar {
  background-image: url("../images/dither.jpg");
  background-color: #000;
  line-height: normal;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: double;
  border-radius: 3px;
  padding: 0px 5px 5px 5px;
  margin: 5px 5px 5px 10px;
  font-size: 25px;
  top: 0; 
  width: 91%; 
}



/* changes image size for mobile fit */

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}
	
/* changes stacking of two-block to be single column */
	
 .two-grid {
   display: grid; 
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr;
   
   gap: 0px;
   height: 100%;

   
}
  
#item-0 {

   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {

   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 3;
   
	}
	


/* changes right-block so that the solid line is on the bottom for the sake of the homepage's stack. this is messy but get off my back okay 

div.right-block {
  background-color: #000;
  border-style: none none none none;
  border-width: 1px;
  padding: 0px 10px 10px 10px;
  margin: 10px 5px 10px 5px;

}



}