/* @fontface */

html, body {
   background-color: #4c375c;
   font-family: sans-serif;
   line-height: 1.5;
   font-size: 100%;
   width: 100%
   font-style: normal;
   color: #3c224f;
}

body {
   padding: 0px;
   margin: 25px;
   display: block;
   position: relative;
   justify-content:center;
}

/*--------------------*/
/*---    Fonts     ---*/
/*--------------------*/
h1, h2, h3, h4, h4, h5, h6 {
   color: #f28948;
   text-shadow: 3px 3px #3c224f;
}

.gerFont {
   color: #7d5596;
}


/*--------------------*/
/*---    Images    ---*/
/*--------------------*/
img.sidebarIMG {
   max-width: 50px;
   height: auto;
}

img.footerIMG {
   float: right;
}

/*--------------------*/
/*---   Container  ---*/
/*--------------------*/
.containerFlex {
   margin-bottom: 5px;
   grid-gap: 5px;
   display: flex;
   flex-direction: row;
}

/*---   Sidebar - Verty Fun  ---*/
.containerBright, .updatebox {
   padding: 5px;
   background-color: #3c224f;
   border-style: solid;
   border-width: thin;
   border-color: #f28948;
   flex-grow: 1;
}

.sidebarContent, .sidebarHeader {
   padding: 5px;
   display: flex;
}

.sidebarHeader {
   height: 50px;
   border-bottom: none;
   justify-content: space-evenly;
   align-items: center;
   color: #f28948;
}

.sidebarContent {
   border-top: none;
   justify-content: space-evenly;
}

/*---   Updatebox ---*/
.updatebox {
   color: #ebd88d;
   max-height: 100px;
   overflow: auto;
}

.updatebox h2, h4, ul {
   margin: 0px 0px 0px 5px;
}

.updatebox ul {
   padding-bottom: 5px;
}

.containerMain {
   display: flex;
   flex-direction: column;
   grid-gap: 5px;
   flex-grow: 2;
}

/*---   Navbar - Top  ---*/
.navbar {
   padding: 5px;
   background-color: #f28948;
   height: 50px;
   border-style: solid;
   border-width: thin;
   border-color: #f2de48;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

/*---   View - Container  ---*/
.containerContent {
   padding: 5px;
   background-color: #ebd88d;
   min-height: 400px;
   border-style: double;
   border-color: #3c224f;
   flex-grow: 2;
   overflow: auto;
}

/*--------------------*/
/*---    Footer    ---*/
/*--------------------*/
footer {
   padding: 5px;
   height: 50px;
   background-color: #f28948;
   border-style: double;
   border-color: #f2de48;
}

/*--------------------*/
/*---     Refs     ---*/
/*--------------------*/
.containerReferences {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 300px;
   min-height: 400px;
   background-color: #3c224f;
   border-style: solid;
   border-width: thick;
   border-color: #2d033d;
   flex-direction: column;
}

.referencesHeader {
   padding: 5px;
   color: #f28948;
   line-height: 1;
   font-size: 25px;
   border-style: groove;
   border-color: #f28948;
}

.referencesListed {
   padding: 5px;
   color: #ebd88d;
   border-style: groove;
   border-color: #f28948;
   flex: 1;
}


/*--------------------*/
/*--- Vertical Fun ---*/
/*--------------------*/
.vertyfun1, .vertyfun2, .vertyfun3, .vertyfun4, .vertyfun5 {
   writing-mode: vertical-rl;
   text-orientation: upright;
   background: -webkit-linear-gradient(#ebd88d, #f50716);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vertyfun2, .vertyfun4 {
   text-orientation: mixed;
}

.vertyfun5 {
writing-mode: vertical-lr;
}