body {background-color : #fffccc;
}
/* various header types and colour background fffccc yellow ccffff blue    #e6e6fa Pale blue ffccff pink  ffffcc Normal */

H1 { text-align : center; color: blue; font-size: 1.8em; font-family "Arial", "Comic Sans", "times"font-weight: bold; margin-bottom: 1.5em; margin-top: 1.5em }
H2 { text-align : center; color: blue; font-size: 1.5em; font-weight: bold; margin-bottom: 1em; }
H3 { text-align : center;color: blue; font-size: 1.2em; font-weight: bold; margin-bottom: 1em; }
H4 { text-align : center; color: red; font-size: 1.5em; font-weight: bold; margin-bottom: 1em; }
H5 { text-align : left; color: blue; font-size: 1.2em; font-weight: bold; padding-left: 25px; }

/* various paragraph types */

P {font-family: "Arial", "Comic Sans", "times" }
P {font :normal 12pt "arial", "times" }
P.intro { font : normal 12pt, "arial", "times" }
p.moreinfo { font-style : italic; margin-left:10px;}
p.ex1 {
  border: 0px solid red; 
  padding: 25px;
}

p.ex2 {
  border: 0px solid red; 
  margin: 30px;
padding: 3px;
}
p.ex3 {
  border: 0px solid red; 
  margin-left: 50px; margin-right: 30px;
}
p.ex4 {
   margin-left: 40px;
}
p.one {font-weight: bold; color: red; padding: 20px}
p.oneex {font-weight: bold; color: red; margin: 30px;}
P.twoex {color: blue; margin: 20px;}

/* Style the header */
.header {
  background-color: #fffccc;
  padding: 10px;
  text-align: center; color: blue; font-size: 1.2em; 
  font-weight: bold; margin-bottom: 1.2em;

}

nav{clear: both; height: 45px;font-weight: bold
}

nav ul { margin: 5px; padding: 5px 0px 5px 30px;
}

nav li {display: inline;margin-right: 40px; 
}

nav li a {color: black;
}

nav li a:hover, nav li a.current {
				color: white;}


/* Style the footer */
.footer {
  color: Black;
  background-color: White;
  padding: 10px;
  text-align: center; color: black; font-size: 1.2em; 
  font-weight: bold; margin-bottom: 1.2em;}

/* create a shrinkable image */
img.two {
 max-width: 100%;
  height: 40%;
  width: 100%;

}
/* create a responsive image */
.responsive {
  max-width: 100%;
  height: auto;
}

/* create a left aligned image */
img.align-left {
float : left;
margin-right: 20px;
margin-bottom:30px
}

/* create div left,centered right or justified*/
div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
}

div.e {
  background-color: lightblue;
  padding: 10px;
  text-align: left;
}

div.f {
  background-color: white;
  padding: 10px;
  text-align: left;
}
/* create div red box, left,centered right or justified*/

div.boxed { color: blue;
margin: 30px;
 padding: 20px;
  border: dotted 4px;
  text-align: left;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

table {
  width: 90%;
  margin: 20px auto;
  table-layout: auto;
}

.fixed {
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border: solid 1px;
  text-align: center;
  
}
.import { color: red;
}
/* create a boxed paragraph */
.boxed { color:#800000;
margin: 30px;
 padding: 20px;
  border: solid 2px;
  text-align: left;}

.w {
  width: 150px;
}
a:hover, a:focus {
  color: white;
  background-color: black;
  text-decoration: none;
}
hr{
  height:2px;
  background-color:green;
  border:5px;
  width:80%;
}
#snow-container {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: 1em;
  user-select: none;
  opacity: 0.8;
  animation-name: fall, sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes fall {
  to {
    transform: translateY(110vh);
  }
}

@keyframes sway {
  0%   { margin-left: 0px; }
  50%  { margin-left: 30px; }
  100% { margin-left: 0px; }
}


/* Last update 14th Dec 2025 */