/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
	----text: darkslategrey;
	----subtitle: darkcyan;  
	----gradientTop:white;
	----gradientBottom:mintcream; 
}

/* Start https://www.cursors-4u.com */ 
* {cursor: url(https://cur.cursors-4u.net/nature/nat-7/nat660.cur), auto !important;}

@font-face {
	font-family: "pixeltext";
	src: url("https://rii-mint.neocities.org/Fonts/PixelOperator.ttf");
}

body{
    background-image: url(mintsea.png);
    background-repeat: repeat;
}

.container{
    max-width: 900px;
    margin: 10px auto;
    background: url(wavybg.png);
    padding: 15px;
    border: 6px ridge PaleTurquoise ;
    outline-offset: 4px;
    border-radius: 10px;
    display: flex;
	  flex-wrap: wrap;
	gap: 5px;
}

.header{
    height: 212px;
    width: 100%;
    background: url(header.png);
    background-size:cover ;
    padding: 30px;
    border: 3px ridge;
    border-color: azure;
    position: relative;
    border-radius: 5px;
	  margin-bottom: 2%;
}

span{
  font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
  color: white;
  text-shadow:1px 1px 2px darkslategray ;
}

.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


a:visited {
  color: rgb(233, 140, 0);
  font-weight: bold;
}

.box {
	border: 2px ridge whitesmoke;
	border-radius: 5px;
	padding: 10px;
	background: #cae5eb;
	background: linear-gradient(0deg, rgb(229, 243, 237) 0%, rgba(235, 255, 246, 1) 60%, rgba(255, 255, 255, 1) 100%);
	margin-bottom: 2%;
	font-family: 'Courier New', Courier, monospace;	
	font-size: smaller;
 }


.boxtitle {
	text-align: left;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
  color: var(----subtitle);
	font-family: "pixeltext";
	font-size: x-large;
}

nav{
	border: 2px ridge whitesmoke;
	border-radius: 5px;
	padding: 5px;
	background: white,mintcream;
}


nav li {
	display: block;
	margin: 5px;
	background: mintcream;
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;  
	background: linear-gradient(79deg, rgb(205, 232, 220) 0%, rgba(235, 255, 246, 1) 50%, rgba(255, 255, 255, 0) 100%); 
	
	background-image: url(star-pixel.gif);
	background-repeat: no-repeat;
  background-position: left;
  background-size: 15px;

	text-align: center;
}


nav li:hover{
	background: linear-gradient(to right,white, mintcream);
}


section {
	border: 2px ridge;
	border-radius: 5px;
	padding: 5px;
}

.change-log{
	overflow-y: auto;
	max-height: 150px;
	border: 2px ridge;
	margin-top: 5px;
}

.log-table{
	border-collapse: collapse;
	margin: 2px;
	min-width: none;
	background-color: rgb(253, 254, 254);
	width: 100%;
	padding: 10px;
	border-bottom: 1px rgb(208, 208, 208);

}


th, td {
  padding: 8px;
  border: 1px solid #ddd;
	text-align: left;
	font-size: 0.9em;
  font-family: 'Courier New', Courier, monospace;
	color: darkcyan;
}

 thead th {
  position: sticky;
  top: 0;
  background: #f9f9f9;
	background-color: rgb(240, 255, 241);
	color: cadetblue;
}

h3 {
	font-family: "pixeltext";
	color: rgb(57, 192, 181)
}

.progressbar{
	background-color: #f9f9f9;
	border-width: 1px;
	min-height: 15px;
	position: relative;
}

.progress{
	background-color: rgb(151, 200, 169);
	min-height: 100%;
	position: absolute;
}

.title{
	overflow-x: auto;
	white-space: nowrap ;
	max-width: 90%;
	color: #7d9aa1;
	font-size: smaller;
	position: absolute;
}

.blinkies{
  margin: 3px;
  padding: 1px;
  border: 2px;

}