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

@font-face{
  font-family: "GothicWar";
  src: url('misc/GothicWar.otf');
}

body {
  color: white;
  font-family: Courier;
  /*padding-left:10%;*/
  /*padding-right:10%;*/
  background-image: url('img/bg.jpg');
  cursor: url("img/cursor3.png"), auto;
}

h1{
  font-family: Luminari;
  /*font-family: "GothicWar";*/
  color: #6d3b56;
  padding: 30px;
}



.pink{
  background-color: #edcfdf;
  padding: 40px;           /* adds internal spacing on all sides */
  width: 80%;
  margin: 0 auto;          /* center the pink box */
  box-sizing: border-box;  /* makes padding stay within width */
  border-radius: 10px;     /* optional: softer edges */
  }

  
.header{
  max-width: 100%;
  display: flex;
  padding: 20px;
  gap: 20px;
}


/* HOVER TEXT */

.hover-wrap:hover .hover-text {
  display: inline-block;
}

.hover-text{
  display: none;         /*this is so it is hidden if not being hovered*/
  color: pink;        /*text color*/
  position: absolute;         /*this is so it can be automatically in the right spot*/
  background-color: white;         /*this is so the backgroudn can be white*/
  outline: 2px solid white;         /*this is so i can have a rounded corners*/
  border-radius: 15px;         /*this is so i can have a rounded corners*/
  padding: 8px;        /*this is so the text isnt at the edge lol*/
  white-space: normal;     /* prevent text wrapping */
  max-width: 350px;          /*this is so it isnt all the way across*/
}
/* END HOVER TEXT */

.row{
  display: flex;
  gap: 5px;
  padding: 5px;
  flex-wrap: wrap;
  justify-content: center;
}


.shadowbox{
  padding: 10px;
  background-color: Thistle;
  width: fit-content;
  margin: 0 auto; 
  
}

.gallery-img {
  flex: 1 1; /* allow wrapping at ~150px */
  width: 300; 
  max-width: 300px;
  height: auto;
  border-radius: 6px;
}


/* BUTTON TINS !!!!!!!! */

.pink-box {
  background-color: #f5e2ec;
  color: #af90a1;
  outline: 10px dotted white;
  width: 80%;
  margin: 40px auto;          /* ✅ horizontally center the whole section */
}

.button-collection {
  background-image: url('img/altoid.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 500px;
  padding: 5px;
  position: relative;
  display: block;
  flex-shrink: 0;       /* prevent shrinking on smaller screens */
  margin-top: auto; /*top right bottom left*/
  margin-bottom: auto;
  margin-left: -60px;
  margin-right: -50px;
  
}

.pink-box p {
  font-size: 16px;
  line-height: 1.6;
  margin-top: -20px;
}


.flexbox {
  display: flex;              /* ✅ side-by-side layout */
  gap: 20px;                  /* space between tin and text */
  align-items: flex-start;    /* align top edges of items */
  padding: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;            /* allows stacking on smaller screens */
}

.text-column {
  flex: 1;
  min-width: 200px;
  max-width: 100%;
  text-align: left;
  margin: auto;
}

/* FOR MUSIC SHEETS */
.music-entry {
  /*background-image: url('img/musicbg.jpg');*/
  padding: 20px;
}

.music-entry h3 {
  font-family: Luminari;
  /*font-family: "GothicWar";*/
  color: #6d3b56;
  font-size: 40px;
  margin-bottom: 10px;
}


/*changing links*/
a:link {
  color: #ff008c;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: purple;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #68ff56;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}