@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&family=Crete+Round:ital@0;1&family=Hanuman:wght@100..900&display=swap');

:root {
	--ink: #182018;
	--paper: #8fa071;
	--lime: #97acc8;
	--orange: #96d1aa;
	--line: rgba(24, 32, 24, 0.22);
  --body-copy-size: clamp(1rem, calc(0.75rem + 1vw), 1.25rem);
}

/* home page */

* {
  box-sizing:border-box;
}

.homebody {
  margin: 20px;
  font-family: "Outfit", sans-serif;
    }

.topbar{
      display: flex;
      /* background-color: #e6ffc7; */
      justify-content: space-between;
    }

.header{
      padding: 1.5em;
      background-color:#e6ffc7 ;
      display:flex;
      /* border-style: ridge; */
      /* border-radius: 5px; */
    }

.empty{
  visibility: hidden;
  height: 20px;
}

.dropbtn {
  display: block;
  flex: 0 0 auto;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: inherit;
  border: none;
  text-decoration: none;
  text-align: center;
}

.dropbtn:hover {background-color: #3e8e41;}



.content{
  display: grid;
gap: clamp(1.25rem, 3vw, 2.5rem);
 /* justify-items: center ; */
  align-items: stretch;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-areas: 
'text1 text1 text1 text1 text1 text1 text1 text1 pic1 pic1 pic1 pic1'
'list list list list list text2 text2 text2 text2 text2 text2 text2'
'pic2 pic2 pic2 pic2 text3 text3 text3 text3 text3 text3 text3 text3';
  max-width: 1120px;
  margin-inline: auto;

}

#flyer{
  grid-area: pic0 ;
  display:flex;
  height: 200px;
  justify-self: flex-end;
}

#opening-text{
grid-area: text1 ;
}

#guitarphoto{
grid-area: pic1;
}

#guitarphoto,
#keyboardphoto {
  overflow: hidden;
  border-radius: 10px;
}

#guitarphoto img,
#keyboardphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#guitarphoto img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

#keyboardphoto img {
  aspect-ratio: 4 / 5;
}

#whatIteach,
#whatIteach li {
grid-area: list;
background-color: #9999ff;
  line-height: 1em;
font-size: clamp(1rem, 1.65vw, 1.375rem);
}

#whatIteach {
  align-self: stretch;
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
}

#whatIteach ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

#whatIteach h1 {
  font-size: clamp(1.25rem, 6vw, 2rem);
}

#lessonexperience{
grid-area: text2 ;
}

#keyboardphoto{
grid-area: pic2 ;
}

#aboutme{
grid-area: text3;
}

#opening-text,
#lessonexperience,
#aboutme {
  display: block;
}

#opening-text p,
#lessonexperience p,
#aboutme p {
  padding: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--body-copy-size);
  line-height: 1.6;
  display: block;
}

#opening-text p {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
  height: 100%;
}

@media (min-width: 851px) {
  #headerlogo img {
    width: min(100%, 520px);
  }

  #opening-text {
    display: flex;
    align-items: center;
  }

  #opening-text p {
    width: 92%;
    height: 70%;
    padding: clamp(0.875rem, 2vw, 1.5rem);
  }
}









img {
  display: block;
  height: auto;
  max-width: 100%;
}


  h1 {
        color: rgb(0, 0, 0);
        text-align: center;
        font-weight:normal;
        display: flex;
        /* background-color: rgba(0, 210, 105, 0.946); */
        margin-bottom: 10px;
        font-size: 200%;
        width: 100%;
        /* font-family: "Outfit", sans-serif; */
      }

      p {
        /* font-family: "Outfit", sans-serif; */
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        font-size: 3vh;
        line-height:  2em;
        background-color: rgba(223, 254, 230, 0.803);
        border-radius: 10px;
        width: 100%;
         display: flex;
        flex-wrap:wrap; 
       flex-grow: 1;  /*  Make <p> fill the available space  */
        margin: 0; /* Remove default margin */
      }
      

      .bigger { display: block;
        font-size:200%; 
        line-height: 1.2;
        /* display:flex;
        flex-wrap:wrap; */
        margin-bottom: 5px;
       }





.contactbox{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.site-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 24px;
  padding: 1rem;
  background-color: #9999ff;
}

.site-footer .dropbtn {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 8px;
  align-self: stretch;
}

.site-footer p {
  background-color: transparent;
  font-size: var(--body-copy-size);
  line-height: 1.6;
}

  h2 {
        color: rgb(0, 0, 0);
        text-align: center;
        background-color: rgba(0, 210, 105, 0.946);
        margin-bottom: 10px;
        padding: 10px;
        width: fit-content;
      }

form {
    display: flex;
    flex-direction: column;
}
#contact-form{
  width: 70%;
}

label, input, textarea {
    margin: 10px 0;
    padding: 10px;
   font-size: 1em;
}

input, textarea {
 color: black
}

button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    font-size: 1em;
    cursor: pointer;
    border: none;
}

button:hover {
    background-color: #45a049;
}


@media(min-width:1000px){
.homebody{
  margin-left: 15%;
  margin-right: 15%;
}
  .header{
padding-left: 30%;
  padding-right: 30%;
  }

}


@media(max-width:850px){
  .header{
    padding: .5em;
  }

  
  .content{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    /* 'pic0' */
    'text1'
    'pic1'
    'list'
    'text2'
    'pic2'
    'text3';
  }

  #whatIteach {
    width: 85%;
    max-width: 420px;
    min-width: 0;
    justify-self: center;
  }

  #whatIteach li {
    font-size: clamp(1rem, 5vw, 1.25rem);
  }

  #guitarphoto,
  #keyboardphoto {
    width: 85%;
    max-width: 420px;
    justify-self: center;
  }

  #contact-form{
    width: 90%;
  }
}














/* guitar shapes page */


.scalebody{
/*   font-family: Georgia,
 'Times New Roman', Times, serif;
 */  
 font-family: "Crete Round", serif;
 font-style: normal;
    margin:20px;
    background-color:#96ffad;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;

}

.selectionbox{
display:flex;
align-items: center;
flex-direction: column;
background-image: url(images/guitar-icegif-11-1010995368.gif);
background-size: 10%;
background-color: #fff200;
padding: 20px;
height: 40%;
width:fit-content;
max-width: 60vw;
min-height: fit-content;
border: 2px solid #fafcfb;
border-radius: 10px;
margin-bottom: 20px;
}

label{

padding:0%;
margin-bottom: 0%;
margin-top: 0%;
margin-right: 5px;
margin-left: 5px;

}

.labeledbutton {
display:flex ;
flex-direction: column;
justify-content: space-evenly;
padding: 0;
}

#scaleposition{
display: flex;
flex-direction: row;
}

.scalebox{
height: fit-content;
gap: 50px;
 margin-bottom:25px;
 background-color: #9999ff;
border: 2px solid #460000;
border-radius: 10px;
padding: 5px;

}


.chordselector{
display: flex;
margin-bottom:25px;
min-height: fit-content;
background-color: #00fffb;
border-radius: 10px;
border: 2px solid #460000;
padding: 5px;
}

.chordboxes{
display: none;
justify-content:flex-start;
flex-direction: row;
height : 100%;
align-items: flex-start;
flex-wrap: wrap;
}


.image-container{
    display:inline-block;
    border-radius: 10px;
    position: relative;
}

.overlay{
    position:absolute;
    top:0; 
    left:0;
    width:100%;
    display:none;
    pointer-events:none;
    border-radius: 10px;

}

.image-container img{

    display:flex;
    width: auto;      /* Adjust to your image size */
    height:60vh;
    max-width: 95vw;
    border-radius: 10px;
}