html,
body {
    height: 100%;
    width: 100%;
}

.font-color-red {
    color: var(--red);
    -webkit-text-fill-color: var(--red);
}
.font-color-grey {
    color: var(--grey);
    -webkit-text-fill-color: var(--grey);
}
.font-color-blue1 {
    color: var(--blue1);
    -webkit-text-fill-color: var(--blue1);
}
.font-color-blue3 {
    color: var(--blue3);
    -webkit-text-fill-color: var(--blue3);
}
.font-color-dark-blue {
    color: var(--dark-blue);
    -webkit-text-fill-color: var(--dark-blue);
}
.font-color-light-blue1 {
    color: var(--light-blue1);
    -webkit-text-fill-color: var(--light-blue1);
}
.font-color-origin1 {
    color: var(--origin1);
    -webkit-text-fill-color: var(--origin1);
}
.font-color-purple1 {
    color: var(--purple1);
    -webkit-text-fill-color: var(--purple1);
}
.bg-color-blue1 {
    background-color: var(--blue1) !important;
}
.bg-color-blue2 {
    background-color: var(--blue2) !important;
}
.bg-color-light-blue1 {
    background-color: var(--light-blue1) !important;
}
.bg-color-light-blue2 {
    background-color: var(--light-blue2) !important;
}
.bg-color-dark-blue {
    background-color: var(--dark-blue) !important;
}
.bg-color-origin1 {
    background-color: var(--origin1) !important;
}
.bg-color-origin2 {
    background-color: var(--origin2) !important;
}
.bg-color-purple1 {
    background-color: var(--purple1) !important;
}
.bg-color-purple2 {
    background-color: var(--purple2) !important;
}
.security-testing {
    --red: #FF0000;
    --blue1: #211FAC;
    --blue2: #87C5FF;
    --blue3: #001EC9;
    --blue4: #00AFF0;
    --dark-blue: #27304D;
    --light-blue1: #C9E6FF;
    --light-blue2: #D8E9FF;
    --origin1: #FA6508;
    --origin2: #FFF2DF;
    --origin3: #FFD9A2;
    --purple1: #BA44AD;
    --purple2: #FFE3FC;
    --grey: #48494E;

    position: relative;
    background-color: #878787;
    background-image: url(/wp-html/Interactive-security-testing-page/images/security-testing-bg.png);
    background-blend-mode: difference;
    width: 100%;
    padding: 20vh 0;
    overflow: hidden;
}
#security-testing-dlg {
    position: relative;
    margin: auto;
    width: 100%;
    border: 8px;
    z-index: 1;
}
/* step start後改為此寬度 */
#security-testing-dlg:not([data-step="start"]) {
    width: 550px;
}
.dlg-title {
    width: 100%;
    text-align: center;
    padding: 26px 0;
    margin-bottom: 0 !important;
}
.button-set {
    gap: 48px;
    margin-top: 50px;
    width: 100%;
}
.title-button {
    padding: 24px 0;
    background-color: #211FAC;
    box-shadow: 4px 4px 0px 2px #87C5FF;
    outline: unset;
    border: unset;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    width: 650px;
}
/* step start後 button寬度改為各半 */
#security-testing-dlg:not([data-step="start"]) .title-button {
    flex: 1;
}


/* step為continue do fake會出現img-group */
#security-testing-dlg:has(.img-group) {
    width: 40%;
}
.img-group {
    position: absolute;
    left: 50%;
    top: 0;
    transform: scale(1.1) translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100%;
}
.flag {
    z-index: -1;
    pointer-events: none;
    position: absolute;
    max-width: unset;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.blue-flag-1 {
    transform: rotate(4deg) translate(-26px, -10px);
}
.blue-flag-2 {
    transform: rotate(-3deg) scale(0.8) translate(61px, -22px);
}
.blue-flag-3 {
    transform: rotate(-1deg) translate(16px, 18px);
}


.pink-flag-1 {
    transform: rotate(-2deg) scale(0.9) translate(-19px, 20px);
}
.pink-flag-2 {
    transform: rotate(5deg) scale(0.9) translate(-11px, 15px);
}
.pink-flag-3 {
    transform: rotate(0deg) scale(0.8) translate(30px, -14px);
}
#security-testing-dlg:has(.end-content) {
    width: 40%;
    padding: 20px;
    border-radius: 12px;
    background-color: var(--blue4);
    background-image: url('/wp-html/Interactive-security-testing-page/images/dlg-end-bg.png');
    background-blend-mode: multiply;
    background-position: 35% bottom;
}
.end-content {
    white-space: nowrap;
    border-radius: 12px;
    box-shadow: 0 0 0 2px #1A39D8;
    padding: 40px 0;
    width: 100%;
    margin-bottom: unset !important;
}

@media (max-width: 1920px) {
    .font_size_5rem {
        font-size: 4rem !important;
    }
    .button-set {
        margin-top: 30px;
    }
    .title-button {
        padding: 16px 0;
        width: 450px;
    }
    #security-testing-dlg:has(.end-content),
    #security-testing-dlg:has(.img-group) {
        width: 750px;
    }
}
@media (max-width: 1440px) {
    .font_size_5rem {
        font-size: 3rem !important;
    }
    .button-set {
        margin-top: 12px;
    }
    .title-button {
        width: 380px;
    }
}

@media (max-width: 1200px) {
    #security-testing-dlg:not([data-step="start"]) {
        width: 400px;
    }
    #security-testing-dlg:has(.end-content),
    #security-testing-dlg:has(.img-group) {
        width: 600px;
    }
}

@media (max-width: 1024px) {
    .title-button {
        padding: 12px 0;
        width: 320px;
    }
}

@media (max-width: 768px) {
    .button-set {
        margin-top: 0;
    }
    .title-button {
        padding: 4px 26px;
        width: auto;
    }
    #security-testing-dlg:not([data-step="start"]) {
        width: 350px;
    }
    #security-testing-dlg:has(.end-content),
    #security-testing-dlg:has(.img-group) {
        width: 550px;
    }
    .img-group {
        width: 85%;
    }
}

@media (max-width: 576px) {
    #security-testing-dlg:not([data-step="start"]) {
        width: 300px;
    }
    #security-testing-dlg:has(.end-content),
    #security-testing-dlg:has(.img-group) {
        width: 90%;
    }
}

@media (max-width: 376px) {
    #security-testing-dlg:has(.end-content),
    #security-testing-dlg:has(.img-group) {
        width: 100%;
    }
}