:root {
    /* Images */
    
    
	
    /*Fonts*/

    --body-font: Brush Script MT, Verdana, sans-serif; /* Body text font */
    --header-font: CHERI, sans-serif; /* Font for headers */
    
    /* Colors */
    /* If you want a transparent background for any element, set the value to none */
    
    --background: #77DFE1; /*Main background color*/
    --textcolor: #D95FAF; /*Body text color*/
    
    --mainbg: #FFFADF; /*Content background color*/
    --mainlink: #5B9AC7; /*Content link color*/
    --mainlinkhover: #FAC849; /*Content link hover color*/
    
    /*Header text colors*/
    --h1color: #67227F;
    --h2color: #67227F;
    --h3color: #67227F;
    --h4color: #67227F;
    
    --navbg: #FFFADF; /*Sidebar background color*/
    --navheader: #67227F; /*Sidebar header color*/
    --navborder: #FAC849; /*If you don't want a border under the headers in the menu, change this to none*/
    
    --navlink: #5B9AC7; /*Sidebar link color*/
    --navlinkbg: none; /*Sidebar link background*/
    --navlinkhover: #5d1d5f; /*Sidebar link hover color*/
    --navlinkbghover: #FAC849; /*Sidebar link hover background*/
    
    --formbg: #ebebeb; /*Form element background*/
    --formtext:#666; /*Form element text color*/
   
    
}

* { margin: 0; padding: 0; }

@font-face {
  font-family: CHERI; /* set name */
  src: url(fonts/CHERI.TFF); /* url of the font */
}

body { 
    background: url(images/background.png) no-repeat center fixed;
  background-size: cover;
}

#statuscafe {
    padding: .5em;
    background-color: --navbg;
	color: var(--h4color);
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
	color: var(--textcolor);
}

header {
            background: url(images/honeycomblight.png); 
			background-repeat: repeat-x;
			width: 100%;
			height: 200px;
 
        }
        html, body {
            padding:0px;
            margin:0px;
        }
		
.logos {
	    position: absolute;
          width: 100px;
          top:10px;
          margin-left:45%;
}
		
		/* Top navigation bar */
.navbar {
  display: flex;
  background-color: #9448BC;
  position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 20px;
	  display: flex; 
  justify-content: center
}

/* Navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
   font: 1em var(--body-font);

}

/* Change color on hover */
.navbar a:hover {
  background-color: #F2AD4B;
  color: #9448BC;
   font: 1em var(--body-font);
}
		

#container { 
    max-width: 800px;
    padding: 10px;
    margin: 25px auto;
    display: flex;
    gap:15px;
    flex-wrap:wrap;
}



main { 
    padding:15px;
    background:var(--mainbg);
    flex:1 1 calc(70% - 45px);
	border-radius: 10px;
	box-shadow: 10px 10px #9448BC;
	 font: 1em var(--body-font);
	   text-align: center;
}

main a { 
    color: var(--mainlink); 
}

main a:hover, main a:focus { 
    color: var(--mainlinkhover); 
}

main p {
    margin:.5em 0px .5em 0px;
    line-height:1.5;
	text-align:center;
	color: var(--textcolor); 
	
}

main h1 {
	background: url(images/h1bg.png); 
	text-align:center;
padding-top: 30px;
	  background-repeat: no-repeat;
	    background-position: center top;
	  width:100%;
	  height:97px;
    font: 2em var(--header-font); 
    color: var(--h1color);
	text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}

main h2 { 
    font: 1.7em var(--header-font);
    color: var(--h2color);
	text-align:center;
}

main h3 { 
    font: 1.4em var(--header-font); 
    color: var(--h3color);
	text-align:center;
}

main h4 {
    font:0.9em var(--header-font);
	   color: var(--h4color);
    font-style:italic;
	text-align:center;
}

main img { 
    margin: 5px; 
    max-width:90%;
}

main ul { 
    list-style: inside; 
	color: var(--textcolor); 
}

main ul li ul {
    margin-left:15px;
	color: var(--textcolor); 
}

main input, textarea, select, button { 
    background: var(--formbg); 
    color: var(--formtext); 
    border: 1px solid; 
    font: 1em var(--body-font);
    padding: 5px; 
    margin: 5px;
}

#sidebar {
    flex:1 1 30%;
	    position: sticky;
}

.item {
    padding:15px;
    background:var(--navbg);
    margin-bottom:15px;
	box-shadow: 10px 10px #9448BC;
	border-radius: 10px;
	text-align:center;
	 font: 1em var(--body-font);
	 color: var(--textcolor);
}

.item2 {
    padding:15px;
    background:var(--navbg);
    margin-bottom:15px;
	box-shadow: 10px 10px #9448BC;
	border-radius: 10px;
	text-align:center;
	 font: 1em var(--body-font);
}


.menu h2 { 
    font: 1.2rem var(--header-font); 
    border-bottom: 1px solid var(--navborder);
    color:var(--navheader);
}

.menu ul {
    list-style:none;
    display:inline;
    margin:0;
}

.menu ul li {
    display:block;
}

.menu a { 
    display: block; 
    text-decoration: none; 
    padding:5px;
    color: var(--navlink);
    background:var(--navlinkbg);
}

.menu a:hover, .menu a:focus { 
    color: var(--navlinkhover);
    background: var(--navlinkbghover);
}

footer {
    background:var(--mainbg);
    padding:15px;
    text-align:center;
    flex: 1 0 calc(100% - 30px);
	 font: 1em var(--body-font);
}

.skip a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
 
.skip a:focus {
    position:static;
    width:auto;
    height:auto;
}


/* Skip to content button */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--mainbg);
    color:var(--mainlink);
    z-index:1001;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

/* convention Image gallery start */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: purple;
  font-size: 35px;
  cursor: pointer;
}

/* convention Image gallery end */
/* gallery images start */
div.gallery {
  border: 1px solid #F2AD4B;
    color: purple;
}

div.gallery:hover {
  border: 1px solid #5B9AC7;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* gallery images end */

@media screen and (max-width:800px) {
    
    main {
        calc(70% - 45px);
    }
    
    #sidebar {
        flex-basis: 30%;
    }

}
* { cursor: url(images/bee.gif), auto; }