/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* ====Page background==== */ 
body  {
  background: linear-gradient(#401109, black);
  min-height: 100vh;
  font-family: 'RiseUp';
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  
  /*====Cursor====*/

  cursor: url('guitarcursor.png') 0 0, auto;

}

/* ====Page layout====*/

.layout {
  width: 100%;
  max-width:1400px;

  display: grid;
    gap: 15px;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto; 
	grid-template-areas: 
    "header header header" 
    "leftSide bodyContent rightSide" 
    "footer footer footer" 

}


.header { 
  grid-area: header;
  /* From https://css.glass */
background: rgba(0, 0, 0, 0.24);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.4px);
-webkit-backdrop-filter: blur(5.4px);
border: 1px solid rgba(0, 0, 0, 0.28);
}

.leftSide { 
  grid-area: leftSide;
  max-width: 250px;
  text-align: center;
  overflow-wrap: break-word;
  }
  
.bodyContent { 
  grid-area: bodyContent;
    max-width: 870px;
    min-width: 400px;
    min-height:1000px;
    text-align: center;
    overflow-wrap: break-word;
  }
  
.rightSide { 
  grid-area: rightSide;
  max-width: 250px;
  text-align: center;
  overflow-wrap: break-word;
  }
  
.footer { 
  grid-area: footer;
    /* From https://css.glass */
  background: rgba(0, 0, 0, 0.24);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.4px);
  -webkit-backdrop-filter: blur(5.4px);
  border: 1px solid rgba(0, 0, 0, 0.28);
}
 
  


/* ====Text formatting==== */ 
p  {
  color: #e45c44;
  font-family: 'RiseUp';
}

h1  {
  color: #e45c44;
  text-shadow: 1px 2px 3px rgba(98, 27, 14,0.5);
  text-align: center;
  font-family: 'RiseUp';
}

h2  {
  color: #e45c44;
  text-align: center;
  font-family: 'RiseUp';
}

h3  {
  color: #e45c44;
  text-align: center;
  font-family: 'RiseUp';
}

h4  {
  color: #e45c44;
  text-align: center;
  font-family: 'RiseUp';
}

li  {
  color: #e45c44;
  font-family: 'RiseUp';
}

/*===Main box formatting===*/
.main-content  {
  background-color: #160603;
  color: #e45c44;
  border: 4px solid #621b0e;
  border-radius: 6px;
  padding: 5px;
  float:left;
}


/*===Sidebar formatting===*/
.sidebar-content  {
  background-color: #160603;
  color: #e45c44;
  border: 3px solid #621b0e;
  border-radius: 5px;
  padding: 1%;
  float:left;
}


/*===Intro box formatting===*/
.intro  {
  background-color: #160603;
  color: #e45c44;
  border: 5px dashed #621b0e;
  border-radius: 5px;
  padding: 1%;
  margin-left: auto;
  margin-right: auto;
  float:left;
  
}

/*====Cursor====*/
.element {
  cursor: url('guitarcursor.png') 0 0, auto;
}


/*Link formatting*/
a  {
  color: red;
}

a:hover  {
  color: mediumvioletred;
}

/*===== Scrollbar ===== */

  /* Firefox */
* {
scrollbar-width: auto;
  scrollbar-color: #ab3232 #5c1a0e;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #5c1a0e;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #ab3232;
    border-radius: 10px;
    border: 3px none #ffffff;
  }