/* Fonts */

@font-face
  {
  font-family: "Title Font";
  src: url("LT-Beverage.otf") format("opentype");
  /* FONT: Beverage, https://lyonstype4.wixsite.com/lyonstype-beta/fonts */
  }

/* Main Formatting */

.main-wrapper
  {
  width: 100%;
  height: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
  
  /*This is where the title, navbar, and main content all go.*/
  }  
  
body
  { 
  background-image: url("https://craft-room-rhapsody.neocities.org/images/pexels-adonyi-foto-1409221.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	/* Background Image Credit: "Yellow Measuring Tool Lot" Adonyi Gábor. Budapest, Hungary. https://www.pexels.com/photo/yellow-measuring-tool-lot-1409221/ */
	
  color: #231c29;
  margin: 0;
  font-family: Veranda, sans-serif;
  letter-spacing: 0.09em;
  line-height: 175%;
  }
  
h1
	{
	font-weight: bold;
	font-size: 1.5em;
	}

h2
	{
	font-size: 1.2em;
	}

/* links */

a
  { 
  text-decoration: none;
  color : blue;
  transition: 0.3s ease-in-out;
  }
a:hover
  { 
  color: #70006e;
  /* changes the color of the text as you hover over it */
  }

  
/* Title */

.title
  {
  height: 75%;
  border-radius: 65%;
  padding: 2%;
  box-shadow: #069494 0 -0.625em 0.375em inset;

  font-family: "Title Font";
  font-size: 1.75em;
  letter-spacing: 0.15em;
  color: #231c29;
  background: #13D4D4;
  text-align: center;
  }

/* Sidebar */
  
.sidebar-button
  { 
  border-radius: 2em;
  background:  #13D4D4;
  height: 1.5em;
  padding-left: 10%;

  text-decoration: none;
  margin-top: 0.5em;
  box-shadow: #069494 0 -0.625em 0.375em inset;
  transition: all .3s ease-in-out
  } 

.sidebar-button:hover
  {
  transform: translateX(-1.25em)
  }

.ul
  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
/* Columns */

.column-sidebar
  {
  width: 17.5%;
  margin-top: 12%;
  margin-right: 2.5%;
  float: left;
  }

.column-box
  {
  width: 75%;
  height: 47em;
  background: #d5f9f9;
  border: dashed;
  border-color: grey;
  border-radius: 1.5em;
  position: relative;
  float: right;
  padding: 1em;
  margin-right: 2.5%;
  color: #000;
  }

  .content
  {
  position: absolute;
  margin-right: 8%;
  overflow-y: scroll;
  width: 98%;
  height: 95%;
  }
  

@media screen and (max-width: 600px) 
  {
  .column-sidebar, .column-box 
	{
	width: 100%;
	}
	/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  }