body {
    margin: 0;
    padding: 0;
    background-color: #fdfdfd;
    width: 100%;
    height: 100vh;
    font-family: 'Courier Prime', monospace;
}

#homepage {
    background-color: transparent;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

#homepage header {
    padding-bottom: 26px;
}

/* star */
.stars {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
}

.stars:nth-of-type(1) {
    margin-top: 5%;
    margin-left: 31.5%;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M32.932 75.225a25.242 25.242 0 0 0-25.112-25 25.244 25.244 0 0 0 25.112-25 25.292 25.292 0 0 0 24.888 25 25.29 25.29 0 0 0-24.888 25z' transform='translate(-7.817 -25.225)' style='fill:%2380f'/%3E%3C/svg%3E%0A");
}

.stars:nth-of-type(2) {
    margin-top: -1.5%;
    margin-left: 40%;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M27.909 65.225a20.193 20.193 0 0 0-20.09-20 20.2 20.2 0 0 0 20.09-20 20.233 20.233 0 0 0 19.91 20 20.232 20.232 0 0 0-19.91 20z' transform='translate(-7.817 -25.225)' style='fill:%23ff00c4'/%3E%3C/svg%3E%0A");
}

.stars:nth-of-type(3) {
    margin-top: -6%;
    margin-left: 24%;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M32.932 75.225a25.242 25.242 0 0 0-25.112-25 25.244 25.244 0 0 0 25.112-25 25.292 25.292 0 0 0 24.888 25 25.29 25.29 0 0 0-24.888 25z' transform='translate(-7.817 -25.225)' style='fill:%23fc573b'/%3E%3C/svg%3E%0A");
}

/* logo */
#logo {
    display: inline-flex;
    /* margin: 65px 0 0 100px; */
}

#logoimg {
    display: inline-block;
    width: 40px;
    height: 45px;
}

.dummywp {
    display: inline-block;
    font-size: 40px;
    color: #1d1d28;
}

.dummywp .text-style-1 {
    color: #fc573b;
}

/* heading part */
#contents {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    align-items: end;
    flex: 1;
}

#content {
    z-index: 1;
    margin: 0 0 100px 100px;
    min-height: 480px;
}

.site-heading_line {
    margin-top: 16px;
    height: 12px;
    width: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252.737' height='12' viewBox='0 0 252.737 12'%3E%3Cpath data-name='Path 1' d='M-9.5 0S1.538 6 9.72 6c9.764 0 9.093-6 19.22-6s9.022 6 19.22 6 8.78-6 19.22-6 8.03 6 19.22 6 8.78-6 19.22-6 9.026 6 19.22 6 7.527-6 19.22-6 7.506 6 19.22 6 8.571-6 19.22-6 8.857 6 19.22 6 7.632-6 19.22-6a36.132 36.132 0 0 1 19.22 6' transform='translate(10.933 3)' style='fill:none;stroke:rgba(28,26,23,.4);stroke-width:6px'/%3E%3C/svg%3E%0A");
}

.site-heading {
    margin: 0 0 36px 0;
    font-size: 60px;
    font-weight: bold;
    color: #1d1d28;
}

.hcontents {
    line-height: 27px;
    margin: 0 0 60px 0;
    opacity: 0.75;
    font-size: 24px;
    font-weight: 400;
}

.create-site {
    display: flex;
    border-radius: 2px;
    border: 1px solid black;
    background-color: #1d1d28;
    justify-items: center;
    align-items: center;
    box-shadow: 5px 5px #fc573b;
    height: 68px;
    width: fit-content;
}

.create-site_button {
    font-family: 'Courier Prime', monospace;
    background-color: transparent;
    color: #fc573b;
    grid-template-columns: auto auto auto;
    border: none;
    cursor: pointer;
    font-weight: 700;

}

.Line-1 {
    width: 0;
    /* margin: 8px; */
    display: inline-block;
    height: 36px;
    opacity: 0.6;
    background: #fc573b;
    border: solid 1px #fc573b;
}

.layer1 {
    width: 21.5px;
    height: 25px;
    padding: 12px 20px;
}

.text-1 {
    width: max-content;
    display: inline-grid;
    padding: 12px 20px 12px 20px;
    font-size: 28px;
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
}

.layer1 svg {
    fill: #fc573b;
    transform: scale(1);
    cursor: pointer;
}

#name {
    opacity: 1;
    height: 50px;
    width: 200px;
}

.wordpress_image_container {
    height: 100%;
    display: flex;
    align-content: flex-end;
    justify-content: flex-end;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.modal_box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* modal */
.modal {
    display: flex;
    flex-direction: column;
    transition: opacity 0.1s ease-in-out 25ms, display 0.1s ease-in-out 25ms;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: transparent;
    position: absolute;
    overflow-x: auto;
}

.form {
    padding: 60px;
    border-radius: 2px;
    box-shadow: 0 3px 20px 0 rgb(252 87 59);
    background: #fff;
    z-index: 12;
}

.Environment-Setup {
    margin: 0 4px 40px 0;
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    font-size: 28px;
    color: #1d1d28;
}

.version1, .version2 {
    height: 68px;
    border-radius: 2px;
    background-color: #fef5f4;
    width: 320px;

}

.selected {
    display: block;
}

.version1 {
    margin-right: 20px
}

.version2 {
    margin-left: 20px;
}


.wp_image {
    height: 100%;
    width: 100%;
    background-image: url("/assets/images/wp_image.png");
    background-size: cover;
}


@media screen and (max-width: 1377px) {
    #contents {
        grid-template-columns: 60% 40%;
    }

    .stars:nth-of-type(1) {
        margin-top: 8%;
        margin-left: 41.5%;
    }

    .stars:nth-of-type(2) {
        margin-top: -1.5%;
        margin-left: 52%;
    }

    .stars:nth-of-type(3) {
        margin-top: -6%;
        margin-left: 31.5%;
    }
}

@media all and (max-width: 900px) {
    .wordpress_image_container {
        width: 60%;
        position: fixed;
        top: 0;
        right: 0;
        height: 80vh;
    }

    .stars {
        display: none;
    }

    .wp_image {
        background-image: url("/assets/images/wp_image_ipad.png");
    }

    #contents {
        display: flex;
    }

    #content {
        margin: 0px 0 68px 40px;
    }

    #logo {
        /* margin-left: 40px; */
    }

    .site-heading {
        font-size: 38px;
        line-height: 47px;
    }

    .form {
        margin: 4%;
    }
}

#logo1 {
    display: inline-flex;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#logoimg1 {
    display: inline-block;
    width: 73px;
    height: 45px;
}

#mobilemain {
    display: none;
}

#modalBox2 {
    display: none;
}

#modalBox1 {
    display: none;
}

.modalbckgrnd {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    display: inline-block;
    background-color: rgb(252, 87, 59);
    opacity: 0.5;
}

.loading {
    z-index: 18;
    max-width: 70%;
    text-align: center;
}

.loading p {
    display: none;
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.14;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    margin: 0;
}

#version {
    display: flex;
    padding-bottom: 40px;
    border-bottom: 1px solid #FEF5F4;
}

section {
    position: relative;
    z-index: 1;
}

.mobile_not_supported {
    width: 100%;
    height: 100vh;
}

.mobile_not_supported_wrapper {
    height: 100%;
    font-size: 24px;
    font-weight: bold;
    line-height: 27px;
    color: #1d1d28;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-select {
    position: relative;
    font-size: 24px;
}

.dp-select select {
    display: none;
}

.select-selected {
    background-color: #fef5f4;
}

.select-selected:after {
    content: "";
    position: absolute;
    top: 22px;
    right: 24px;
    width: 20px;
    height: 20px;
    transition: all 150ms ease-out;
    transform: rotate(0deg);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath data-name='Rectangle 207' style='fill:transparent' d='M0 0h20v20H0z'/%3E%3Cpath d='M10.833 14.667a.831.831 0 0 1-.589-.244l-5-5a.833.833 0 0 1 1.179-1.179l4.411 4.411 4.411-4.411a.833.833 0 1 1 1.179 1.179l-5 5a.831.831 0 0 1-.591.244z' transform='translate(-.417 -.917)' style='fill:rgba(252,87,59,.5)'/%3E%3C/svg%3E%0A");
}

.select-selected.select-arrow-active:after {
    transform: rotate(-180deg);
}

.select-items div, .select-selected {
    color: #1d1d28;
    height: 68px;
    line-height: 68px;
    cursor: pointer;
    user-select: none;
}

.select-items div {
    position: relative;
    border-bottom: 1px solid rgba(252, 87, 59, 0.1);
}

.select-items div:last-of-type {
    border-bottom-color: transparent;
}

.select-items {
    position: absolute;
    background-color: #fef5f4;
    left: 0;
    right: 0;
    z-index: 99;
    margin-top: 4px;
    max-height: 314px;
    overflow-y: auto;
}

.select-selected, .select-items {
    position: relative;
}

.select-items {
    padding: 0 24px;
    transition: all 150ms ease-out;
    opacity: 1;
}

.select-hide {
    pointer-events: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.same-as-selected::after, .select_wrapper .select-selected::before, .select_wrapper .select-items div::before {
    content: ' ';
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
}

#wordpress_dropdown .select-selected::before, #wordpress_dropdown .select-items div::before {
    top: 22px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath data-name='Path 10' d='M1.706 12a10.3 10.3 0 0 0 5.8 9.265L2.6 7.81A10.255 10.255 0 0 0 1.706 12zm17.243-.519a5.421 5.421 0 0 0-.849-2.84 4.818 4.818 0 0 1-1.011-2.414A1.783 1.783 0 0 1 18.818 4.4c.046 0 .089.006.133.008A10.292 10.292 0 0 0 3.4 6.346c.242.007.469.012.662.012 1.077 0 2.743-.131 2.743-.131a.425.425 0 0 1 .066.848s-.558.066-1.178.1l3.748 11.149 2.253-6.757-1.6-4.394c-.554-.033-1.079-.1-1.079-.1a.425.425 0 0 1 .065-.848s1.7.131 2.711.131c1.077 0 2.743-.131 2.743-.131a.425.425 0 0 1 .066.848s-.559.066-1.178.1l3.72 11.066 1.027-3.431a12.438 12.438 0 0 0 .784-3.328zM12.18 12.9l-3.088 8.975a10.3 10.3 0 0 0 6.326-.164.9.9 0 0 1-.073-.142L12.18 12.9zm8.852-5.839a7.9 7.9 0 0 1 .068 1.058 9.711 9.711 0 0 1-.783 3.687L17.175 20.9a10.3 10.3 0 0 0 3.857-13.839zM12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0zm0 23.45A11.45 11.45 0 1 1 23.449 12 11.463 11.463 0 0 1 12 23.45z' style='fill:%23fc573b'/%3E%3C/svg%3E%0A");
}

#wordpress_dropdown .select-selected {
    padding: 0 24px 0 64px;
}

#wordpress_dropdown .select-items div {
    padding-left: 39px;
}

#wordpress_dropdown .select-selected::before {
    left: 24px;
}

#wordpress_dropdown .select-items div::before {
    left: 0;
}

#php_dropdown .select-selected::before, #php_dropdown .select-items div::before {
    top: 25px;
    width: 36px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg id='php-logo' xmlns='http://www.w3.org/2000/svg' width='35.823' height='18' viewBox='0 0 35.823 18'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:%23fc573b%7D %3C/style%3E%3C/defs%3E%3Cpath id='Path_54' data-name='Path 54' class='cls-1' d='M2.835 10.123h5.313a4.111 4.111 0 0 1 3.39 1.348 4.519 4.519 0 0 1 .694 3.628 6.958 6.958 0 0 1-.615 2.062 6.129 6.129 0 0 1-1.269 1.824 4.428 4.428 0 0 1-2.121 1.308 9.766 9.766 0 0 1-2.339.278H3.509l-.753 3.767H0l2.835-14.215m2.319 2.26L3.965 18.33a1.458 1.458 0 0 0 .238.02h.277a10.424 10.424 0 0 0 3.172-.377q1.269-.416 1.7-2.894.357-2.082-.714-2.4a8.9 8.9 0 0 0-2.637-.3q-.238.02-.456.02h-.411l.02-.02' transform='translate(0 -6.337)'/%3E%3Cpath id='Path_55' data-name='Path 55' class='cls-1' d='M36.316 0h2.736l-.773 3.786h2.458a4.936 4.936 0 0 1 3.013.833q1.011.793.595 3.013l-1.328 6.6h-2.776l1.269-6.3a1.789 1.789 0 0 0-.119-1.407 1.684 1.684 0 0 0-1.368-.416l-2.2-.02-1.623 8.144h-2.739L36.316 0' transform='translate(-20.945)'/%3E%3Cpath id='Path_56' data-name='Path 56' class='cls-1' d='M65.668 10.123h5.313a4.111 4.111 0 0 1 3.39 1.348 4.519 4.519 0 0 1 .694 3.628 6.958 6.958 0 0 1-.615 2.062 6.129 6.129 0 0 1-1.269 1.824 4.428 4.428 0 0 1-2.121 1.308 9.766 9.766 0 0 1-2.339.278h-2.379l-.753 3.767h-2.756l2.835-14.214m2.319 2.26L66.8 18.33a1.458 1.458 0 0 0 .238.02h.278a10.424 10.424 0 0 0 3.172-.377q1.269-.416 1.7-2.894.357-2.082-.714-2.4a8.9 8.9 0 0 0-2.637-.3q-.238.02-.456.02h-.416l.02-.02' transform='translate(-39.331 -6.337)'/%3E%3C/svg%3E%0A");
}

#php_dropdown .select-selected {
    padding: 0 24px 0 75px;
}

#php_dropdown .select-items div {
    padding-left: 51px;
}

#php_dropdown .select-selected::before {
    left: 24px;
}

#php_dropdown .select-items div::before {
    left: 0;
}

.same-as-selected::after {
    height: 20px;
    width: 20px;
    right: 0;
    top: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath data-name='Rectangle 207' style='fill:transparent' d='M0 0h20v20H0z'/%3E%3Cpath data-name='Path 70' d='M3.554-4874.054.311-4877.3a1.053 1.053 0 0 1-.311-.75 1.051 1.051 0 0 1 .311-.75 1.048 1.048 0 0 1 .75-.311 1.052 1.052 0 0 1 .75.311l2.489 2.5 6.385-6.385a1.053 1.053 0 0 1 .751-.312 1.053 1.053 0 0 1 .75.312 1.055 1.055 0 0 1 .31.75 1.057 1.057 0 0 1-.31.75l-7.136 7.135a1.052 1.052 0 0 1-.75.311 1.054 1.054 0 0 1-.746-.315z' transform='translate(4 4888)' style='fill:rgba(252,87,59,.5)'/%3E%3C/svg%3E%0A");
}

.wp_options {
    margin-top: 40px;
}

.wp_options .wp_option {
    margin-bottom: 16px;
}

.wp_options .wp_option:last-of-type {
    margin-bottom: 0
}

.wp_options .wp_option label {
    color: #1d1d28;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wp_options .wp_option input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    display: none;
    height: 0;
    width: 0;
    outline: none;
}


.wp_options .wp_option .input_checkbox {
    height: 24px;
    width: 24px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg data-name='Group 305' transform='translate(-760 -417)'%3E%3Crect data-name='Rectangle 68' width='24' height='24' rx='8' transform='translate(760 417)' style='fill:%23fef5f4'/%3E%3C/g%3E%3C/svg%3E%0A");
}


.wp_options .wp_option input[type="checkbox"]:checked + .input_checkbox {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg data-name='Group 306' transform='translate(-760 -417)'%3E%3Crect data-name='Rectangle 68' width='24' height='24' rx='8' transform='translate(760 417)' style='fill:%23fef5f4'/%3E%3Cpath data-name='Path 53' d='M3.554-4874.054.311-4877.3a1.053 1.053 0 0 1-.311-.75 1.051 1.051 0 0 1 .311-.75 1.048 1.048 0 0 1 .75-.311 1.052 1.052 0 0 1 .75.311l2.489 2.5 6.385-6.385a1.053 1.053 0 0 1 .751-.312 1.053 1.053 0 0 1 .75.312 1.055 1.055 0 0 1 .31.75 1.057 1.057 0 0 1-.31.75l-7.136 7.135a1.052 1.052 0 0 1-.75.311 1.054 1.054 0 0 1-.746-.315z' transform='translate(765.75 5307.372)' style='fill:%23fc573b'/%3E%3C/g%3E%3C/svg%3E%0A");
}

div::selection{
    color: #FC573B;
    background: #FEF5F4;
}