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

/*
body 
{
    color: #ebdbb2;
    background: #282828;
    margin: auto;
    padding: 10px;
}
*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #f8f8f2;
    font-family: 'lato';
}

body {
    display: grid;
    justify-content: center;
    background-image: url("images/background.jpg");
    background-repeat: repeat-y;     /* repeat vertically */
    background-position: center top; /* keep centered */
    background-size: 100% auto;          /* optional */
}

/* Central content block */
.main-content {
    width: 900px;
    max-width: 90vw;
    /*margin-left: auto;   /* centers horizontally */
    /*margin-right: auto;   /* centers horizontally */
    /*margin-top: 40px;   /* centers horizontally */
    /*margin-bottom: 40px;   /* centers horizontally */
    margin: auto;
    padding: 30px;

    background-color: #282a36;
    border-radius: 15px;

    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

p
{
    line-height: 150%;
    font-size: 120%;
    color: #f8f8f2;
}

ul
{
    line-height: 150%;
    font-size: large;
    overflow: hidden;
}

menu 
{
    font-size: large;
    word-spacing: 10px;
    text-align: center;
}

h1 
{
    /*check out dracula colour scheme at some point*/
    color: #ffb86c;
    /*color: #98971a;*/
    /*color: #d79921; */
    /* font-size: xx-large; */
    word-spacing: 0px;
    font-size: 220%;
}

h2
{
    /*color: #98971a; */
    color: #50fa7b;
    /*color:  #458588;*/
}

h3
{
    /*color: #98971a; */
    /*color: #b16286*/
    color: #bd93f9;
}

mytitle
{
    /*color: #d79921;*/
    /*color: #AEFF30;*/
    color: #FFC330;
    /* font-size: xx-large; */
    font-family: lato;
    word-spacing: 0px;
    font-size: 500%;
}

a 
{
    color: #ff79c6;
    /*color: #689d6a;*/
    text-decoration: none;
}

a:hover
{
    /*color:#8ec07c;*/
    /*color: #ff79a2;*/
    color: #ffac79;
}

a.header 
{
    color: #ebdbb2;
    text-decoration: none;
}

a.header:hover
{
    color:#458588;
}

hr
{
    color: #ebdbb2;
}

code {
	color: #ebdbb2;
	border-radius: 5px ;
}
pre {
	/*background: #32302f ;*/

	background: #1d2021 ;
	border: 1px solid #458588;
	/*border-radius: 20px ;*/
	padding: 2em ;
	white-space: pre-wrap;
	overflow-wrap: break-word ;
	max-width: 800px ;
	margin: auto ;
}


.floatRight
{
    float:right;
    margin:10px;
}

.floatLeft
{
    float:left;
    margin:10px;
    padding-bottom: 30px ;
}

@media (min-width: 55em) {
	.lol { display: inline-block; vertical-align: top ; }

	.resright {
		float: right;
		padding: 20px ;
		clear: both ;
		max-width: 300px ;
	}

	/*body { max-width: 1000px ; }*/
}

/* Accordion Menu */
.accordion > input[name="collapse"]
{
  display: none;
  
  /*position: absolute;
  left: -100vw;*/
}

.accordion label,
.accordion .content
{
  max-width: 800px;
  margin: 0 auto;
}


.accordion .content
{
  background: #fff;
  overflow: hidden;
  height: 0;
  transition: 0.5s;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.accordion > input[name="collapse"]:checked ~ .content
{
  height: auto;
  transition: height 0.5s;
}

.accordion label
{
  display: block;
 
}

/* For Desktop */



.accordion
{
  margin-bottom: 1em;
}

.accordion > input[name="collapse"]:checked ~ .content
{
  border-top: 0;
  transition: 0.3s;
}

.accordion .handle
{
  margin: 0;
  font-size: 16px;
  
}

.accordion label
{
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  padding: 10px;
  background: #202020;
  user-select: none;
  
}

.accordion label:hover,
.accordion label:focus 
{
  background: #3c3836;
}

.accordion .handle label:before
{
  /*content: "^";*/
  /*content: "―";*/
  content: "-";
  display: inline-block;
  margin-right: 10px;
  font-size: 1em;
  line-height: 1.556em;
  vertical-align: middle;
  /*transition: 0.4s;*/
  
}

.accordion > input[name="collapse"]:checked ~ .handle label:before
{
    transform: rotate(90deg);
    transform-origin: center;
    /*transition: 0.4s;*/
}


.clearRight {
  clear: right;
}