* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "chewy";
    letter-spacing: 2px;
    max-height: 100vh;
}

h1 {
    color: #430f1a;
    font-size: 35px
}
h2 {
    color: #4e2931;
    font-size: 26px;
}

h3 {
    color: #e8ccd2;
}

.container {
    display: grid;
    min-height: 100vh;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.doll-container {
    background-image: none;
    background-color: #ffe1ed;
    grid-column:5/span 5;
    grid-row: 1/span 6;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(14, 1fr);
    .title {
        grid-column: 3/span 4;
        grid-row: 2;
        width: 333px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #bdbef5;
        border-radius: 10px;
        border: 5px dotted #8384ab;
    }
        
    .doll {
        grid-column: 3/span 4;
        grid-row: 4/span 7;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
            .model {
                z-index: 1;
                position: absolute;
            }

            .eyes {
                z-index: 2;
                position: absolute;
            }

            .clothes {
                z-index: 3;
                position: absolute;
            }

            .hair {
                z-index: 4;
                position: absolute;
            }
            .shoes {
                z-index: 5;
                position: absolute;
            }

            .blue , .yellow , .green , .pink , .purple, .model-01 , .model-02 , .model-03 , .model-04 , .model-05 , .blue-shoe , .purple-shoe , .green-shoe , .casual , .formal , .sleep , .curly_braids , .curly_long , .curly_up , .long_straight , .short_straight , .short_wavy {
                display: none;
            }

            .grey_eye , .grey {
                display: flex;
            }
        }


    .new-doll-container {
        grid-column: 4/span 2;
        grid-row: 3/span 11;
        margin-top: 80px;
        padding-bottom: 50px;
        background-color: #cbcbcb;
        z-index: 1;
        box-shadow: 10px 10px 5px gray ;
        }


    .background {
        grid-column: 4/span 2;
        grid-row: 3/span 10;
        margin-top: 100px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 50px;
        background-color: rgb(189, 147, 189);
        z-index: 2;
    }


    .button {
        grid-column: 3/ span 4;
        grid-row: 12/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;

            button {
                padding: 25px;
                font-size: 20px;
                border-radius: 20px;
                border-color: #bdbef5;
                }
            }
}

.character-container {
    background-color: #ffcfdd;
    grid-column: 10/span 4;
    grid-row: 1/span 3;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(13, 1fr);
    .character {
        display: grid;
        grid-column: 2;
        grid-row: 2;
    }
    .skin-tone-title {
        background-color: #5d6281;
        grid-column: 2/span 4;
        grid-row: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        border-radius: 15px;
    }
    .skin-tone {
        background-color: #7D84B2;
        grid-column: 2/span 8;
        grid-row: 5/span 2;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 45px;
        .skin-01 {
            background-color: #5B3027;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .skin-02 {
            background-color: #854021;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .skin-03 {
            background-color: #c26940;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .skin-04 {
            background-color: #e69367;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .skin-05 {
            background-color: #fbc4a6;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }

    }
    .eye-colour-title {
        background-color: #5d6281;
        grid-column: 2/span 4;
        grid-row: 8;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        border-radius: 15px;
    }
    .eye-colour {
        background-color: #7D84B2;
        grid-column: 2/span 8;
        grid-row: 9/ span 2;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 45px;
        .eye-01 {
            background-color: #ff7c90;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .eye-02 {
            background-color: #ec8f0c;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .eye-03 {
            background-color: #9ca315;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .eye-04 {
            background-color: #6eced6;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .eye-05 {
            background-color: #b47bc0;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
    }
}

.clothes-container {
    background-color: #ffafcc;
    grid-column: 10/span 4;
    grid-row: 4/span 3;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(12, 1fr);
    .clothes-title {
        grid-column: 2/span 2;
        grid-row: 2;
    }
    
    .outfit-01 {
        grid-column: 2/ span 3;
        grid-row: 4/ span 6;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .outfit-02 {
        grid-column: 6/ span 3;
        grid-row: 4/ span 6;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .outfit-03 {
        grid-column: 10/ span 3;
        grid-row: 4/ span 6;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.hairstyle-container {
    background-color: #ffcfdd;
    grid-column: 1/span 4;
    grid-row: 1/ span 4;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(13, 1fr);
        .hairstyle-title {
            display: grid;
            grid-column: 2/span 2;
            grid-row: 2;
        }
    .hair-01 {
        grid-column: 2/ span 3;
        grid-row: 4/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hair-02 {
        grid-column: 6/ span 3;
        grid-row: 4/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hair-03 {
        grid-column: 10/ span 3;
        grid-row: 4/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hair-04 {
        grid-column: 2/ span 3;
        grid-row: 7/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hair-05 {
        grid-column: 6/ span 3;
        grid-row: 7/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hair-06 {
        grid-column: 10/ span 3;
        grid-row: 7/ span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .hairstyle-colour-title {
        background-color: #5d6281;
        grid-column: 2/span 4;
        grid-row: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        border-radius: 15px;
    }
    .hair-colour {
        background-color: #7D84B2;
        grid-column: 2/span 10;
        grid-row: 11/ span 2;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 45px;
        .colour-01 {
            background-color: #e33e57;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .colour-02 {
            background-color: #d47d02;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .colour-03 {
            background-color: #8e9415;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .colour-04 {
            background-color: #6e9bd6;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
        .colour-05 {
            background-color: #8b5e93;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            border: 4px solid #4e2931;
        }
    }
}

.shoes-container {
    background-color: #ffafcc;
    grid-column: 1/span 4;
    grid-row: 5/ span 3;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(8, 1fr);
    .shoes-title {
        grid-column: 2/span 2;
        grid-row: 2;
    }
    .shoes-01 {
        grid-column: 2/ 5;
        grid-row: 4/ span 3;
    }
    .shoes-02 {
        grid-column: 8/ span 3;
        grid-row: 4/ span 3;
    }
    .shoes-03 {
        grid-column: 5/ span 3;
        grid-row: 6/ span 3;
    }
}

#finish {
    display: none;
}