html {
	width: 100%;
	height: 100%;
	
	
	
	
	
	background-color: #bbb
	
	
	
	
}




/*
h1{
	font-size:2em;
}
*/


input:hover, textarea:hover {
   /* border: solid 3px #009900; why not use same colout for hover and for focus??? OR use #4d88ff for this???*/
   /*border: solid 3px #7ac7c8; Light Blueish*/
   /*border:solid 3px #00AA01 Green*/
   border: solid 3px #7ac7c8;
}


input:focus, textarea:focus {
   /*border: solid 3px #555555; why not use same colout for hover and for focus??? OR use #1111ff for this???*/
   /*border: solid 3px #009900; Green*/
   /*border: solid 3px #990000; Red*/
   /*border: solid 3px #000099; Blue*/
   /*border: solid 3px #7ac7c8;*/
   /*border:solid 3px #017501;*/
   border: solid 3px #1515cc;
}

/*
input[type=text]:hover {
  width: 550px;
  height: 2.75em;
}


input[type=email]:hover {
  width: 550px;
  height: 2.75em;
}

input[type=password]:hover {
  width: 550px;
  height: 2.75em;
}
*/

/* This increases the width and height of the input box, transitioning at a rate defined in the input-format class*/
input[type=text]:focus {
  width: 500px;
  height: 2.75em;
}

textarea:focus {
  width: 500px;
  height: 7.75em;
}

input[type=email]:focus {
  width: 500px;
  height: 2.75em;
}

input[type=password]:focus {
  width: 500px;
  height: 2.75em;
}


/* This just sets all input borders to the colour RED. This is because upon entry all inputs are empty, and it 
assumes that this is wrong and invalid...need a way to distinguish between invalid entry and and empty field.
input:invalid {
    border: solid 2px red;
}
*/

/* Didn't work the way I wanted it... PROBABLY WILL HAVE TO USE JAVASCRIPT TO SORT THIS OUT...
input:error {
    border: solid 2px red;
}
*/


.article-1 {
   padding-top: 2%;
   padding-bottom: 2%;
   margin: 5% 10%;
   border-radius: 9px;
   height: auto;
   text-align: center;
	border-color: black solid 3px;
	/*background-color: #fafafa; */
	/*background-color:#b0e0e6;    ...powderblue*/
	/*background-color:#b0e0e6; a lighter shade of powderblue...*/
	background-color:#eaf7f8;
}

#game-part{
    padding-top: 2%;
    padding-bottom: 2%;
    margin: 5% 10%;
    border-radius: 9px;
    height: auto;
    text-align: center;
	border-color: black solid 3px;
	/*background-color: #fafafa; */
	/*background-color:#b0e0e6;    ...powderblue*/
	/*background-color:#b0e0e6; a lighter shade of powderblue...*/
	background-color:#eaf7f8;
}

#game-part img{
   display: none;
}


#img_logo {
    border-radius: 15px;
    /*height:75px; */
}

.img-fluid{
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    padding-top: 0px;
}

.article-2 {
   padding-top: 2%;
   padding-bottom: 2%;
   margin: 5% 10%;
   border-radius: 9px;
   height: auto;
   text-align: center;
	border-color: black solid 3px;
	/*background-color: #fafafa; */
	/*background-color:#b0e0e6;    ...powderblue*/
	/*background-color:#b0e0e6; a lighter shade of powderblue...*/
	background-color:#eaf7f8;
}

.h1-text-normal {
	color: #00AA01;
}

.input-border {
	/*border-color: #00AA01;*/
	border:solid 1px #00AA01;
	border-radius: 5px;
}

.input-format {
	padding:10px;
	/*width: 50%;*/
	width: 475px; /*should I use em for widht too???*/
	transition: width .35s ease-in-out; /*I have changed the width to increase gradually to 75% - as a test, at this rate */
	/*height: 46px; - couldn't see underscore in Firefox when typing in email address - worked okay on opera.*/
	height: 2.50em; /*This worked better for visibility of the underscore...*/
	font-size:1.25em;
	margin:10px;
}

.input-textarea {
	padding:10px;
	/*width: 50%;*/
	width: 475px;
	transition: width .35s ease-in-out;
	height: 7.50em; 
	font-size:1.25em;
	margin:10px;
}

::placeholder{
   color: #bbb; /*making placeholder text color a bit lighter than default*/
}

.input-button {
	padding:5px 25px;
	background-color: #00AA01;
	color: white;
	/*height: 46px;*/
	font-size:1.25em;
	margin:10px;
}

/*
.RegInputButton {
	padding:5px 25px;
	height: 46px;
	font-size:1.25em;
}
*/

#link-gap{
	padding-right:5px;
}


/* Add a black background color to the top navigation */
.topnav {
  /*background-color: #333; */
  border-top: solid 1px gray;
  background-color: #000045;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}