* {
    margin: 0;
    padding: 0;
    color: antiquewhite;
    font-family: serif;
}

a {
    text-decoration: none;

}

body {
    background-color: rgb(50, 50, 50);

}

#index-body {
    min-height: 100vh;
}

header {
    background-image: url(../images/wood.jpg);
    width: 100%;
}

h1 {
    font-size: 5vmin;
}

h2 {
    font-size: 4vmin;
}

.text {
    margin: 10px;
    font-size: 4vmin;
}

#top_main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

}

#top_image {
    width: 15%;
    margin: 15vh auto 20px auto;
}

#top_main>p {
    font-size: 4vw;

}


#form {
    margin: 0 0 20px 20px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    max-width: 100%;
}


.select {
    width: 200px;
    height: 50px;
    text-align: center;

    background-color: #333333;
    font-size: 4vmin;
    color: antiquewhite;
    font-family: serif;
}

.select>option {
    background-color: #333333;
}

#button {
    width: 100px;
    height: 50px;
    margin-left: 30px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 250px;
    padding: 10px 25px;
    line-height: 1.8;
    transition: 0.3s ease-in-out;
    border-radius: 9999px;
    background-image: url(../images/search.png);
    background-color: #333333;
    background-repeat: no-repeat;
    background-position: center;
}

#button:hover {
    height: 49px;
    border-bottom: none;
    transform: translateY(3px);
}

.code-name {
    margin: 20px auto 0 20px;
    display: flex;
    flex-direction: column;
}

#pattern {
    margin-top: 10px;
    width: 170px;
    text-align: center;
    background-color: #333333;
    font-size: 3vmin;
    color: antiquewhite;
    font-family: serif;
}

#container {
    display: grid;
    grid-template-rows: 187px 22px;
    grid-template-columns:
        5px 93px 92px 91px 90px 89px 88px 87px 86px 85px 84px 83px 82px 81px 80px 79px 78px 77px 76px 75px 74px 73px;
    gap: 0;
    overflow-x: scroll;
    scrollbar-color: #6f6f6f #000000;
    margin-top: 50px;
    padding: 10px;
}

.scale {
    background-image: url(../images/black-mat.jpg);
}

.finger {
    justify-self: center;
    visibility: hidden;
}

/*指で押さえる場所を円で表示する*/
#string1 {
    grid-row-start: 1;
    margin-top: -3px;
}

#string2 {
    grid-row-start: 1;
    margin-top: 30px;
}

#string3 {
    grid-row-start: 1;
    margin-top: 63px;
}

#string4 {
    grid-row-start: 1;
    margin-top: 95px;
}

#string5 {
    grid-row-start: 1;
    margin-top: 129px;
}

#string6 {
    grid-row: 1;
    margin-top: 161px;
}

/*弾かない弦にバツ印を表示する*/
.cross {
    justify-self: left;
    visibility: hidden;
    position: sticky;
    left: 0;
}

#cross1 {
    margin-top: -1px;
    grid-column: 1;
    grid-row: 1;
}

#cross2 {
    margin-top: 31px;
    grid-column: 1;
    grid-row: 1;
}

#cross3 {
    margin-top: 64px;
    grid-column: 1;
    grid-row: 1;
}

#cross4 {
    margin-top: 96px;
    grid-column: 1;
    grid-row: 1;
}

#cross5 {
    margin-top: 129px;
    grid-column: 1;
    grid-row: 1;
}

#cross6 {
    margin-top: 162px;
    grid-column: 1;
    grid-row: 1;
}

/*指板の画像↓　grid位置の固定*/
#image0 {
    grid-column-start: 1;
    grid-row-start: 1;
}

#image1 {
    grid-column: 2 /22;
    grid-row: 1;
}

#image2 {
    grid-column: 3/22;
    grid-row: 1;
}

#image3 {
    grid-column: 4/22;
    grid-row: 1;
}

#image4 {
    grid-column: 5/22;
    grid-row: 1;
}

#image5 {
    grid-column: 6/22;
    grid-row: 1;
}

#image6 {
    grid-column: 7/22;
    grid-row: 1;
}

#image7 {
    grid-column: 8/22;
    grid-row: 1;
}

#image8 {
    grid-column: 9/22;
    grid-row: 1;
}

#image9 {
    grid-column: 10/22;
    grid-row: 1;
}

#image10 {
    grid-column: 11/22;
    grid-row: 1;
}

#image11 {
    grid-column: 12/22;
    grid-row: 1;
}

#image12 {
    grid-column: 13/22;
    grid-row: 1;
}

#image13 {
    grid-column: 14/22;
    grid-row: 1;
}

#image14 {
    grid-column: 15/22;
    grid-row: 1;
}

#image15 {
    grid-column: 16/22;
    grid-row: 1;
}

#image16 {
    grid-column: 17/22;
    grid-row: 1;
}

#image17 {
    grid-column: 18/22;
    grid-row: 1;
}

#image18 {
    grid-column: 19/22;
    grid-row: 1;
}

#image19 {
    grid-column: 20/22;
    grid-row: 1;
}

#image20 {
    grid-column: 21/22;
    grid-row: 1;
}

#image21 {
    grid-column: 22/22;
    grid-row: 1;
}

/*フレットの番号*/
.fret {
    justify-self: center;
}

#fret3 {
    grid-column: 4;
    grid-row: 2;
}

#fret5 {
    grid-column: 6;
    grid-row: 2;
}

#fret7 {
    grid-column: 8;
    grid-row: 2;
}

#fret9 {
    grid-column: 10;
    grid-row: 2;
}

#fret12 {
    grid-column: 13;
    grid-row: 2;
}

#fret15 {
    grid-column: 16;
    grid-row: 2;
}

#fret17 {
    grid-column: 18;
    grid-row: 2;
}

#fret19 {
    grid-column: 20;
    grid-row: 2;
}