/* 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." */

/* -------------------------------------------------------- */
/* button to other page */
/* -------------------------------------------------------- */

.button-class {
  background-color: #caa3ff;
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 4px;
    font-family: monospace;
}

#nav-bar{
  border-style: solid;
  border-width:45px;
  width:175px;
  height:100px;
  padding: 10px;
  padding-right: 300px;
  margin: 50px;
  background-color: pink;
  overflow-y:auto;
  border-image: url("https://foollovers.com/mat/plate/pl035-plate-j03.gif") 55 fill round; 

}
 
 

/* -------------------------------------------------------- */
/* TABBED LAYOUT */
/* -------------------------------------------------------- */

/* variables to be initialized*/
body {
  --tab_bg: #EEE;
  --tab_bg_active: blue;
  --tab_text: black;
  --tab_text_active: white;
  padding: 2rem;
  background-color: linear-gradient(white, #FFF6A3);
  font-family: monospace;
  letter-spacing: 2px;
  line-height: 1.5;
}

/*tab container*/
.tab{
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
  font-family: monospace;
}

/*actual tab buttons*/
.tabButton{
  background-color: var(--tab_bg);
  border: 1px solid #aaa;
  border-radius: 8px 8px 0 0;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: monospace;
}

/* tab buttons upon hovering */
.tabButton:hover {
  background-color: #ccc;
}

/*tab button when clicked on aka active*/
.tabButton .active{
  background-color: var(--tab_bg_active);
  color: var(--tab_text_active);
}

/*box for the content*/
.tabBox {
  background-color: white;
  border: 2px solid #aaa;
  border-radius: 0 8px 8px 8px;
  width: 80%;
}

/*content inside the teb. the actual text.*/
.tabContent{
  display: none;
  border: 2px red;
  padding: 2rem;
  background: green;
  font-family: monospace;
  color: white;
}

/* active tab*/
.tabContent .active{
  display: block;
}