* {
    box-sizing: border-box;
}

body {
    margin: 0px;

    background-color: rgb(238, 238, 238);
}

body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, and Opera */
}

a {
    text-decoration: none;
    color: black;
}

p {
    cursor: default;
}





#ImgViewContent {
    width: 100%;
    height: 0px;

    position: sticky;
    top: 0px;

    z-index: 100;

    #ImgView {
        width: 100%;

        background-color: rgba(0, 0, 0, 0.5);

        display: none;

        #singleImg {

            position: absolute;

            cursor: grab;
        }

        #ImgViewCloseButton {
            font-size: 30px;
            line-height: 50px;
            text-align: center;

            color: white;
            background-color: black;

            width: 50px;
            height: 50px;

            border-radius: 50%;

            position: absolute;
            top: 100px;
            right: 10%;

            cursor: pointer;
        }
    }
}





#backgroundAnimation {
    width: 100%;
    height: 0px;

    position: sticky;
    top: 0px;
}

#colorfulBullBackground {
    width: 100%;

    border: 0px;

    overflow: hidden;
    z-index: -2;
}





#InformationAndSelectionContent {
    width: 100%;
    min-width: 1300px;
    min-height: fit-content;

    margin-top: auto;
    margin-bottom: auto;

    display: none;
    /* display: flex; */
    justify-content: center;

    position: absolute;
    top: 0px;

    #InformationContent {

        display: flex;
        align-items: center;
        justify-content: center;

        position: sticky;
        top: 0px;
        z-index: -1;

        #ContactInformation {
            background-color: rgb(255, 255, 255);
            box-shadow: 0px 0px 20px 10px rgb(207, 207, 207);
            border-radius: 10px;

            width: 400px;
            height: fit-content;

            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 50px;
            margin-right: 50px;

            padding-top: 50px;
            padding-bottom: 50px;
            padding-left: 20px;
            padding-right: 20px;

            #topIntroduction {
                width: 100%;

                margin-bottom: 20px;

                display: flex;
                align-items: center;
                justify-content: center;

                #Avatar {
                    margin-right: 40px;

                    width: 100px;
                    height: auto;
                }

                #developerName {
                    font-size: 30px;
                    font-weight: 700;
                    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif';

                }
            }

            #helpPage {
                margin-left: 50px;
                margin-right: 50px;

                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: wrap;
            }

            #DeveloperAppearAt {
                font-size: 20px;
                line-height: 20px;
                text-align: center;
            }

            #useableInformationList {
                margin-left: 100px;
                margin-right: 100px;

                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }

            .useableInformationIcon {
                cursor: pointer;

                width: auto;
                height: 40px;
            }
        }
    }

    #SelectionContent {
        /* background-color: rgba(255, 255, 255, 0.404); */
        /* box-shadow: 0px 0px 20px 10px rgb(207, 207, 207);
        border-radius: 10px; */

        width: 800px;
        min-width: 580px;
        min-height: 100px;

        margin-top: 10%;
        margin-bottom: 10%;

        padding: 0px 100px 0px 100px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;

        .ZoningContent {
            cursor: pointer;
            background-color: rgb(255, 255, 255);
            box-shadow: 0px 0px 15px 5px rgb(207, 207, 207);
            border-radius: 10px;

            width: 100%;
            height: 100px;

            margin-top: 20px;
            margin-bottom: 20px;

            font-size: 20px;
            line-height: 100px;
            text-align: center;
        }


        .ZoningContent:hover {
            background-color: rgb(228, 228, 228);
        }
    }
}





#NavigationBar {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 20px 0px rgb(202, 202, 202);

    min-width: 1300px;
    width: 1300px;
    height: 100px;

    margin-left: auto;
    margin-right: auto;

    border-radius: 0px 0px 10px 10px;

    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: space-between;

    position: sticky;
    top: 0px;

    #InformationContentBrief {

        display: flex;
        align-items: center;

        #AvatarBrief {
            cursor: pointer;

            width: auto;
            height: 65px;

            margin-left: 30px;

            border-radius: 50%;
            border-width: 5px;
            border-color: rgb(131, 131, 131);
        }

        #useableInformationListBrief {
            width: 200px;
            height: 50px;

            margin-left: 30px;

            display: flex;
            align-items: center;
            /* justify-content:; */

            .useableInformationIconBrief {
                cursor: pointer;
                width: auto;
                height: 40px;
            }
        }

    }

    #SelectionContentBrief {
        cursor: pointer;

        background-color: rgb(248, 248, 248);
        width: 600px;
        height: 50px;

        margin-right: 100px;

        border-radius: 10px;
        border-width: 1px;
        border-style: dashed;

        #SelectedContent {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
        }
    }

    #SelectionContentBrief:hover {
        background-color: rgb(228, 228, 228);

        border-style: solid;
    }
}





#ZoningDisplay {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px 10px 10px 10px;

    width: 1300px;
    height: fit-content;
    min-height: 800px;

    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;

    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 100px;

    display: none;
    /* display: flex; */
    justify-content: space-between;
    flex-wrap: wrap;

    position: relative;

    .project {
        width: 500px;
        height: fit-content;

        margin-top: 50px;
        margin-left: 50px;
        margin-right: 50px;

        .samplePicture {
            cursor: pointer;

            width: 500px;
            height: 300px;
        }

        .projectName {
            font-size: 18px;
            line-height: 35px;
            cursor: pointer;

            text-align: center;
        }

        .details {
            background-color: rgba(221, 221, 221, 0.7);
            box-shadow: inset 0px 20px 20px -23px rgba(0, 0, 0, 0.5), inset 0px -20px 20px -23px rgba(0, 0, 0, 0.5);

            width: 1300px;
            height: 0px;

            padding-left: 100px;
            padding-right: 100px;

            overflow: hidden;
            display: block;
            position: relative;
            transition: height 0.5s;

            left: -100px;

            /* position: absolute; */

            .description {
                font-size: 22px;
                line-height: 35px;
                text-indent: 2em;

                margin-bottom: 20px;

                cursor: default;
            }

            .detailStepContent {

                display: flex;
                align-items: center;
                justify-content: center;

                .detailStep {
                    background-color: rgb(243, 243, 243);

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    cursor: default;
                }

                .lastDetail {
                    background-color: rgb(243, 243, 243);

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    cursor: pointer;
                }

                .stepNumber {
                    background-color: rgb(243, 243, 243);
                    width: fit-content;
                    min-width: 20px;

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    cursor: default;

                }

                .nextDetail {
                    background-color: rgb(243, 243, 243);

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    cursor: pointer;
                }

                .notAvailable {
                    background-color: rgb(243, 243, 243);

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    transition: background-color 0.5s;

                    cursor: pointer;
                }

                .notAvailable:hover {
                    background-color: rgb(255, 142, 142);
                }

                .openWebPage {

                    background-color: rgb(243, 243, 243);

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    transition: background-color 0.5s;

                    cursor: pointer;
                }

                .openWebPage:hover {
                    background-color: rgb(144, 192, 255);
                }

                .copyURL {

                    background-color: rgb(243, 243, 243);

                    margin-left: 10px;
                    margin-right: 10px;

                    border-width: 1px;
                    border-radius: 10px;
                    border-style: solid;
                    border-color: rgb(146, 146, 146);

                    padding: 10px;

                    transition: background-color 0.5s;

                    cursor: pointer;
                }

                .copyURL:hover {
                    background-color: rgb(170, 255, 192);
                }

                .copyURLSuccessful::before {}
            }

            .detailsContent {
                width: 900px;

                margin-top: 20px;
                margin-bottom: 20px;
                margin-left: auto;
                margin-right: auto;

                overflow: hidden;
                display: flex;
                /* flex-wrap: nowrap; */

                .detailContent {
                    min-width: 900px;

                    transition: transform 0.5s;

                    position: relative;

                    .detailSamplePicture {
                        width: 500px;
                        height: auto;

                        float: left;

                        cursor: pointer;
                    }

                    .detailDescription {
                        font-size: 22px;
                        line-height: 35px;
                        text-indent: 2em;

                        width: 350px;

                        margin-left: 50px;

                        float: left;

                        cursor: default;
                    }
                }
            }
        }
    }

    .details::before {
        content: "";
        position: relative;
        top: 20px;
        left: 230px;
        border-width: 20px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

    .rightDetails {
        transform: translate(-600px, 0px);
    }

    .rightDetails::before {
        left: 830px;
    }
}