/***********************************
 *** Load locally provided fonts ***
 ***********************************/

@font-face {
  font-family: Carlito;
  src: url('../fonts/Carlito.ttf');
}


/*************************
 *** Animation details ***
 *** *********************/

@keyframes fadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}


/*******************  
 *** Tag styling ***
 *******************/

html { scroll-behavior: smooth;  }
body { font-family : "Carlito", sans; font-size : 0.9em; text-align : center; background-color: #222222; color : #bbbbbb; }
section { display: block; animation: fadeIn 0.3s linear; }

a { color: #ccddff; text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }
blockquote { font-family: "Gentium", serif; font-size: 0.8em; margin-left: 2em; background-color: #444444; border: 0.2em solid #444444; border-radius: 1em; padding: 1em; width: 75%; }

details { margin-top: 1em; }
details[open] summary { color: #dddd88; }
details[open] blockquote { animation: fadeIn 0.5s linear; }
emph { font-size: 1.2em; font-weight: bold; }
h1 { margin: 0em; }
hr { width: 65%; margin-top: 2em; margin-bottom: 2em; }
small { font-size: 0.6em; }
summary { cursor: pointer; transition: color 1.5s; }


/********************************
 *** Specific objects (by id) ***
 ********************************/
 
#bannertext { padding: 1em 0em 1em 1em; height: 8em; width: 46.75em; }
#banner { width: 100%; height: 10em; text-align: left; margin-top: 1em; }
#hatstable { margin-top: -0.5em; }
#hatstable td { red; padding-bottom: 0.5em;  }
#hatstable tr>td { padding-right: 1em; }
#nav { margin-top: 2em; }      
#profilepic { height: 100%; vertical-align: top; }
#summary { width: 380px; font-size: 0.9em; margin-top: 0px; }


/**********************
 *** Colour classes ***
 **********************/

.blue { color: #44aaff; } .blue-dark { color: #2288cc; }
.cyan { color: #44aa88; }
.green { color: #44ee44; }
.orange { color: #ffaa00; }
.purple { color: #ee44ee; }      .purple-dark { color: #aa44aa; }
.red { color: #ff4444; } .red-dark { color: #aa4444; }
.shadow { text-shadow: 0.055em 0.045em #222222; }
.white { color: #dddddd; }


/*********************
 *** Other classes ***
 *********************/
 
.aligncenter { text-align: center; }
.alignright { text-align: right; }
.box { background-color: #444444; }
.centralcontainer { display : inline-block; width : 60em; margin-bottom: 5em; text-align : center; }
.closetogether { line-height: 1.5em; }
.filler { width: 20px; }
.fill { width : 100%; height: 20em; }
.hat { width: 1.5em; height: 1.5em; vertical-align: middle; }
.icon { height: 1.75em; vertical-align: top; border-radius: 0.35em; }
.inlineblock { display: inline-block; vertical-align:top; }
.leftrounded { border-radius: 1em 0em 0em 1em; }
.mainbody { text-align: left; }
.plaque { background-color: #eeddbb; border: 0.3em solid #aa9977; border-radius: 1em; color: #220000; padding: 1em; width: fit-content; font-family: gentium; }
.rightrounded { border-radius: 0em 1em 1em 0em; }
.section { margin-top: 3em; }
.smallfont { font-size: 0.8em; }
.spaceabove { margin-top: 2em; }
.spacebelow { margin-bottom: 0.35em; }