/* Google fonts import! */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Raleway&display=swap");

/* Color codes to use!
dark-gold {color: #8E793E} // Border color!
light-gold {color: #AD974F}
intellectual-grey {color: #231F20} Background color!
light-grey {color: #EAEAEA} Text color!
*/

body {
  margin: auto;
  background-color: #231f20;
  color: #050505;
  font-family: "Raleway", sans-serif;
}

h1 {
  background-image: url(../images/bg-img.webp);
  background-position: center center;
  background-size: contain;
  color: #eaeaea;
  font-family: "Playfair Display", serif;
  font-size: 40px;
  margin: 0;
  padding: 5px;
}

button {
  background-color: #ad974f;
  border: 2px solid black;
  border-radius: 10px;
  color: #050505;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

button:active {
  background: radial-gradient(
    circle,
    rgba(55, 255, 0, 0.8) 0%,
    rgba(142, 121, 62, 1) 70%
  );
}
a {
  color: #eaeaea;
  font-weight: 600;
  cursor: pointer;
}

a:active {
  color: #ad974f;
}

a:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #050505;
  padding: 0px 10px 0px 10px;
  text-shadow: rgb(147, 121, 76) 0px 0px 20px;
}

a:visited {
  color: #eaeaea;
}

.bactive {
  background: radial-gradient(
    circle,
    rgba(55, 255, 0, 0.8) 0%,
    rgba(142, 121, 62, 1) 70%
  );
}
/*  Tabs section styles! */
.tab-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 10px 0;
}
.tab {
  cursor: pointer;
  display: inline-block;
  background-color: #ad974f;
  padding: 0px 5px 0px 5px;
  margin: 2px;
  text-align: center;
  border: 2px black solid;
  border-radius: 5px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.tab:hover {
  background-color: #8e793e;
}
.tab-content .content {
  display: none;
}

.tab-content .content.tabActive {
  display: block;
}

/* Reusable flex container with column */
.container-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Reusable flex container with row */
.container-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.top-menu {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 0px 20px 0px 20px;
}
.menu-btn {
  width: 80px;
  height: 48px;
  font-size: 18px;
}
/* Volume designs! */
.vol-hide {
  display: none;
}
#volume-status {
  font-size: 14px;
  margin: 0;
  padding: 5px;
  width: 90px;
  color: #eaeaea;
}
.master-vol-btn {
  width: 48px;
  height: 48px;
  padding: 5px;
  font-size: 20px;
  margin: 0;
}
/* Playstatus  on things*/
.play-status {
  opacity: 1;
}
/* Drum Machine Styles! */
.pad-container {
  display: flex;
  padding: 2px;
  justify-content: center;
}
.pad {
  height: 75px;
  width: 75px;
}
.pad-container button,
kbd {
  margin: 0;
  font-weight: bolder;
}
.key-info {
  color: #eaeaea;
}

/* Sequencer Styles! */

#play-btn {
  padding: 10px;
}
.seq-blocks {
  display: flex;
}

.sequencer {
  cursor: pointer;

  display: flex;
  width: 60px;
  height: 60px;
  margin: 5px;

  background-color: #eaeaea;
  border: 3px solid #8e793e;
  border-radius: 5px;

  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* Loops Styles */

.btn-rr {
  height: 37.5px;
  width: 65px;
}

/* Backing track!  */

.bcktrk {
  width: 100px;
  height: 50px;
}

/* Modal styles */
.modal {
  display: none; /* Hide the modal by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(35, 31, 32, 0.8);
}

.modal-content {
  background-color: #231f20;
  color: #eaeaea;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #ad974f;
  width: 80%;
}
.modal-content span {
  font-weight: bold;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.modal-content h2 {
  text-align: center;
}
.modal-content h3 {
  text-decoration: underline;
  font-weight: bold;
}
.modal-content li {
  padding: 2px;
}

/* Information about me! */

.feet-first {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: #eaeaea;
  text-align: center;
}
.feet-first p {
  /* margin: 0px 20px 0px 20px; */
  padding: 2px;
}
.feet-first a {
  margin: 5px;
}
/* 404.html */
.html-404 {
  color: #eaeaea;
}

/* Media Queries! */
@media only screen and (min-width: 425px) {
  .top-menu {
    justify-content: center;
  }
  .menu-btn {
    margin-right: 35px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 26px;
  }
  h1 {
    font-size: 60px;
  }
  button {
    font-size: 20px;
  }
  .menu-btn {
    width: 110px;
    height: 50px;
  }
  .pad {
    height: 120px;
    width: 120px;
  }
  #volume-status {
    font-size: 18px;
    width: 120px;
  }
  .master-vol-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
  }
  .btn-rr {
    width: 120px;
    height: 60px;
    margin-left: 10px;
  }
  .modal-content {
    width: 50%;
    margin: 5% auto;
  }
}
@media only screen and (min-width: 1024px) {
  .vol-hide {
    display: block;
  }
}

@media only screen and (min-width: 1280px) {
  .modal-content {
    width: 35%;
    margin: 4% auto;
  }
}

@media only screen and (min-width: 1800px) {
  .modal-content {
    width: 25%;
  }
}