/* aw yea */
:root {
  --c1: #d6f6ff;
  --c2: #bff6ff;
  --a1: #234a52; 
  --a2: #256b77;
  --b: #8ed7e62;
}
.indexlogo {
  float: right;
  width: 300px;
}
.indexlogo h1 {
  text-align:center;
}
body {
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
	background-image: url("/bms/bofet/stbg.png");
    background-color: var(--c1);
    color: var(--a1);
    font-family: Helvetica;
    margin: auto;
}
h1 {
  font-size: 40px;
  margin-right: 6px;
  margin-left: 6px;
}
h2 {
  font-size: 30px;
  margin-right: 6px;
  margin-left: 6px;
}
h3 {
  font-size: 20px;
  margin-top: 20px;
  margin-: 10px;
  margin-right: 10px;
  margin-left: 10px;
}
textarea {
  background-color:var(--a2);
  font-size:18px;
  font-family:Roboto;
  padding:10px;
}
.inline {
  display: inline-block;
  color: #bdbdbd;
}
.center {
  margin: auto;
  width: 700px;
  text-align: center;
}
.abcenter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fixed{
	position:fixed;
	left:initial;
	top:5;
	z-index:-10;
	transform: translate(-210px,0px);
}
.date {
  text-decoration: 3px underline overline var(--c1);
}
a {
  text-align:center;
}
a:link {
  color: var(--a2);
  background-color: transparent;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s;
}
.inline a:link{
  display: block;
}
a:visited {
  color: var(--a2);
}
a:hover {
  transform: scale(1.1);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 100%;
  display: table;
  text-align: center;
  background-color: #26262600;
}
ul li{
  display: inline-block;
  float: none;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 14px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: var(--c2);
}
p {
	margin-right: 10px;
	margin-left: 10px;
	text-align: center;
}
.active {
  background-color: var(--c2);
}
.zoom {
  transition: transform .2s;
}
.zoom:hover {
  transform: scale(1.1);
}
.content {
  margin:10px;
  text-align:center;
  border: 4px dashed var(--a1);
  background-color: var(--c1);
  padding-bottom: 10px;
}
.content a img{
  border: 4px solid var(--a1);
  background-color: var(--c1);
}
.content a img:hover{
  transition: 0.1s;
  border: 4px solid white;
}
.blog {
	border: var(--c1) 2px solid;
  border-radius: 10px;
	margin: 50px;
}
.blog p {
	margin-top: 30px;
  margin-right: 50px;
  margin-bottom: 30px;
  margin-left: 50px;
}
.blog li {
  display:grid;
  list-style-type:square;
  list-style-position:inside;
}
#footer {
  display:block;
  margin:4px;
  position: relative;
  text-align: center;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/*thank you isocosa for doing all the hard work*/
#musictable tr:first-child{
	font-weight:bold;
}

#musictable tr:nth-child(2n){
	background-color:var(--a2);
}

#musictable tr{
	background-color:var(--a1);
}

#musictable td:first-child{
	width:85px;
}

#musictable{
	border-collapse: collapse;
	border:4px var(--c1);
	margin: 10px;
}

#musictable td{
	border:black 2px solid;
	padding: 2px 5px 2px 5px;
}

#musictable a{
	margin:2px;
	display:inline-grid;
	align-content:center;
	vertical-align:middle;
	text-align: center;
}

#musictable a:hover{
	background:var(--c2);
}

#musictable img {
  width:100px;
}


@media only screen and (max-width: 620px) {
  .content {
  margin-top:30px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  text-align:center;
  border-left: 0px;
  border-right:0px;
  border-top: 4px dashed var(--a1);
  border-bottom: 4px dashed var(--a1);
  border-radius: 0px;
  background-color:var(--c1);
  }
  .center{
    margin:initial;
    width:100%;
  }
  .blog {
	border: var(--c2) 1px;
	margin: 0;
  }
  .blog p {
	margin-top: 30px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 10px;
  }
}
    @media (min-width: 800px) {

        body {
            width:900px;
  }
}