@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    margin: 0;
}

body {
    display: block;
    padding: 0;
    margin: 0;
    user-select: none;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

@font-face {
    font-family: AGENCYB;
    src: url(fonts/AGENCYB.ttf);
}

@font-face {
    font-family: AGENCYR;
    src: url(fonts/AGENCYR.ttf);
}

@font-face {
    font-family: digital-7;
    src: url(fonts/digital-7.ttf);
}

::-webkit-scrollbar {
	width: 4px;
}

::-webkit-scrollbar-thumb {
	background-color: transparent;
    border-radius: 30px;
}

#dui {
    display: flex;
    background-color: #44080886; 
    width: 100%; 
    height: 100%; 
    /* border-radius: 50px; */
    position: relative; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    gap: 70px;
}

#mainDiv {
    width: 50%;
    height: 62%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.24);
}

#MDInDiv {
    width: 98%;
    height: 96.5%;
    position: relative;
    background-image: url(files/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* border-radius: 9px; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#MDIDEffect {
    width: 5%;
    height: 50%;
    transform: rotate(24.042deg);
    border: 1.499px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) -29.49%, rgba(255, 255, 255, 0.00) 73.38%);
    position: absolute;
    z-index: 2;
}

#MDIDEffect2 {
    width: 5%;
    height: 50%;
    transform: rotate(24.042deg);
    border: 1px solid rgba(255, 255, 255, 0.10);
    opacity: 0.5;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
    position: absolute;
    z-index: 2;
}

#MDIDBottomEffect {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
    position: absolute;
    bottom: 0;
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.23) 53.24%, rgba(0, 0, 0, 0.252) 103.36%, rgba(0, 0, 0, 0.36) 103.37%);
}

#MDIDTopDiv {
    width: 100%;
    height: 13%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    /* background-color: red; */
}

#MDIDTDLeft {
    width: 50%;
    height: 80%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 30px;
    gap: 0.7vw;
    /* background-color: red; */
}

#MDIDTDLeftImageDiv {
    width: 14%;
    height: 95%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.51);
}

#MDIDTDLeftImage {
    width: 81%;
    border-radius: 50%;
}

#MDIDTDLeftTextDiv {
    width: 70%;
    height: 95%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* background-color: blue; */
}

#MDIDTDRight {
    width: 50%;
    height: 65%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0.9vw;
    /* background-color: red; */
}

#MDIDTDRightDivType1 {
    width: 23%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.13);
    padding-left: 12px;
    padding-top: 3px;
    backdrop-filter: blur(40px);
}

#MDIDTDRightDivType2 {
    width: 23%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.788);
    padding-left: 12px;
    padding-top: 3px;
    backdrop-filter: blur(40px);
}

#MDIDBottomDiv {
    width: 100%;
    height: 87%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 2.9vw;
}

#MDIDBottomDivOutside {
    width: 26%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#MDIDBottomDivType1 {
    width: 85%;
    height: 81%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="244" height="500" viewBox="0 0 244 500" fill="none"><g filter="url(%23filter0_b_228_57)"><path d="M0 0L122 32.4394L244 0V500H0V0Z" fill="url(%23paint0_linear_228_57)"/><path d="M0 0L122 32.4394L244 0V500H0V0Z" fill="url(%23paint1_radial_228_57)" style="mix-blend-mode:lighten"/></g><defs><filter id="filter0_b_228_57" x="-19.8" y="-19.8" width="283.6" height="539.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="9.9"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_228_57"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_228_57" result="shape"/></filter><linearGradient id="paint0_linear_228_57" x1="122" y1="-80.0173" x2="122" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="%23ACACAC"/><stop offset="1" stop-color="%23ACACAC" stop-opacity="0"/></linearGradient><radialGradient id="paint1_radial_228_57" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-95.5 171.713) rotate(4.77439) scale(218.257 394.477)"><stop stop-color="%23FFEAB5" stop-opacity="0.63"/><stop offset="1" stop-color="%23FFEAB5" stop-opacity="0"/></radialGradient></defs></svg>');
    /* background: radial-gradient(80.46% 89.21% at -39.14% 34.34%, rgba(255, 234, 181, 0.63) 0%, rgba(255, 234, 181, 0.00) 100%), linear-gradient(180deg, #ACACAC -16%, rgba(172, 172, 172, 0.00) 100%); */
    background-blend-mode: lighten, normal;
    /* backdrop-filter: blur(9.899999618530273px); */
    /* clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 10%, 0% 0%); */
    z-index: 4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    backdrop-filter: blur(50px);
    overflow: hidden;
    background-size: cover;
}

#MDIDBottomDivType1BG {
    width: 100%;
    height: 75%;
    /* clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 10%, 0% 0%); */
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(20px);
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="262" height="440" fill="none" style="position: absolute;"><g filter="url(%23filter0_b_228_54)"><path d="M0 0L141 30.8824L262 0V440H0V0Z" fill="url(%23paint0_linear_228_54)"/></g><defs><filter id="filter0_b_228_54" x="-19.8" y="-19.8" width="321.6" height="515.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="9.9"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_228_54"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_228_54" result="shape"/></filter><linearGradient id="paint0_linear_228_54" x1="141" y1="-76.1765" x2="141" y2="440" gradientUnits="userSpaceOnUse"><stop stop-color="%233A3A3A" stop-opacity="0.58"/><stop offset="1" stop-color="%23515151" stop-opacity="0"/></linearGradient></defs></svg>');
}

#MDIDBottomDivType2 {
    width: 90%;
    height: 90%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="244" height="578" viewBox="0 0 244 578" fill="none"><g filter="url(%23filter0_b_228_26)"><path d="M0 0L122 37.5L244 0V578H0V0Z" fill="url(%23paint0_linear_228_26)"/><path d="M0 0L122 37.5L244 0V578H0V0Z" fill="url(%23paint1_radial_228_26)" style="mix-blend-mode:lighten"/></g><defs><filter id="filter0_b_228_26" x="-19.8" y="-19.8" width="283.6" height="617.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="9.9"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_228_26"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_228_26" result="shape"/></filter><linearGradient id="paint0_linear_228_26" x1="122" y1="-92.5" x2="122" y2="578" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFB800"/><stop offset="1" stop-color="%23FFB800" stop-opacity="0"/></linearGradient><radialGradient id="paint1_radial_228_26" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-95.5 198.5) rotate(5.5149) scale(218.511 455.485)"><stop stop-color="%23FFEAB5" stop-opacity="0.63"/><stop offset="1" stop-color="%23FFEAB5" stop-opacity="0"/></radialGradient></defs></svg>');
    /* background: radial-gradient(80.46% 89.21% at -39.14% 34.34%, rgba(255, 234, 181, 0.63) 0%, rgba(255, 234, 181, 0.00) 100%), linear-gradient(180deg, #FFB800 -16%, rgba(255, 184, 0, 0.00) 100%); */
    background-blend-mode: lighten, normal;
    /* backdrop-filter: blur(9.899999618530273px); */
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 10%, 0% 0%);
    z-index: 4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    backdrop-filter: blur(50px);
    overflow: hidden;
    background-size: cover;
}

#MDIDBottomDivType2BG {
    width: 105%;
    height: 82%;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 10%, 0% 0%);
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(20px);
    background-size: cover;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="262" height="490" viewBox="0 0 262 490" fill="none" style="position: absolute; z-index: 1; backdrop-filter: blur(45px);"><g filter="url(%23filter0_b_228_23)"><path d="M0 0L141 35.6834L262 0V490H0V0Z" fill="url(%23paint0_linear_228_23)"/></g><defs><filter id="filter0_b_228_23" x="-19.8" y="-19.8" width="321.6" height="589.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="9.9"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_228_23"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_228_23" result="shape"/></filter><linearGradient id="paint0_linear_228_23" x1="141" y1="-88.019" x2="141" y2="490" gradientUnits="userSpaceOnUse"><stop stop-color="%23553D00" stop-opacity="0.37"/><stop offset="1" stop-color="%23FFB800" stop-opacity="0"/></linearGradient></defs></svg>');
}

#MDIDBottomDivType2BGEffect {
    width: 90%;
    height: 90%;
    background: radial-gradient(80.46% 89.21% at -39.14% 34.34%, rgba(255, 234, 181, 0.63) 0%, rgba(255, 234, 181, 0.00) 100%), linear-gradient(180deg, #FFB800 -16%, rgba(255, 184, 0, 0.00) 100%);
    background-blend-mode: lighten, normal;
    z-index: 4;
    position: absolute;
    opacity: 0.7;
    filter: blur(45.04999923706055px);
}

#MDIDBottomDivType3 {
    width: 85%;
    height: 79%;
    /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="244" height="500" viewBox="0 0 244 500" fill="none"><g filter="url(%23filter0_b_228_90)"><path d="M0 0L122 32.4394L244 0V500H0V0Z" fill="url(%23paint0_linear_228_90)"/><path d="M0 0L122 32.4394L244 0V500H0V0Z" fill="url(%23paint1_radial_228_90)" style="mix-blend-mode:lighten"/></g><defs><filter id="filter0_b_228_90" x="-19.8" y="-19.8" width="283.6" height="539.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="9.9"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_228_90"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_228_90" result="shape"/></filter><linearGradient id="paint0_linear_228_90" x1="122" y1="-80.0173" x2="122" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="%23B83E3E"/><stop offset="0.0749806" stop-color="%23B83E3E" stop-opacity="0.925019"/><stop offset="1" stop-color="%23B83E3E" stop-opacity="0"/></linearGradient><radialGradient id="paint1_radial_228_90" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-95.5 171.713) rotate(4.77439) scale(218.257 394.477)"><stop stop-color="%23F2A975" stop-opacity="0.63"/><stop offset="1" stop-color="%23DB9767" stop-opacity="0"/></radialGradient></defs></svg>'); */
    background: radial-gradient(80.46% 89.21% at -39.14% 34.34%, rgba(242, 169, 117, 0.63) 0%, rgba(219, 151, 103, 0.00) 100%), linear-gradient(180deg, #B83E3E -16%, rgba(184, 62, 62, 0.93) -7.31%, rgba(184, 62, 62, 0.00) 100%);
    background-blend-mode: lighten, normal;
    /* backdrop-filter: blur(9.899999618530273px); */
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 10%, 0% 0%);
    z-index: 4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    backdrop-filter: blur(50px);
}

#MDIDBottomDivType3BG {
    width: 100%;
    height: 73%;
    /* clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 10%, 0% 0%); */
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(20px);
    background-size: cover;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="262" height="415" viewBox="0 0 262 415" fill="none" style="position: absolute; z-index: 1; backdrop-filter: blur(45px);"><g filter="url(%23filter0_b_228_87)"><path d="M0 0L141 30.8824L262 0V415H0V0Z" fill="url(%23paint0_linear_228_87)"/></g><defs><filter id="filter0_b_228_87" x="-19.8" y="-19.8" width="321.6" height="515.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="9.9"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_228_87"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_228_87" result="shape"/></filter><linearGradient id="paint0_linear_228_87" x1="141" y1="-76.1765" x2="141" y2="415" gradientUnits="userSpaceOnUse"><stop stop-color="%23B83E3E" stop-opacity="0.63"/><stop offset="1" stop-color="%23B84D3E" stop-opacity="0"/></linearGradient></defs></svg>');
}

#MDIDBDTImageDiv1 {
    width: 60%;
    height: 25%;
    border-radius: 50%;
    position: absolute;
    top: 9%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url('data:image/svg+xml, <svg width="145" height="145" viewBox="0 0 145 145" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="141" height="141" rx="70.5" stroke="url(%23paint0_linear_228_67)" stroke-width="3"/><defs><linearGradient id="paint0_linear_228_67" x1="72.5" y1="2" x2="72.5" y2="143" gradientUnits="userSpaceOnUse"><stop stop-color="%23CCCCCC"/><stop offset="1" stop-color="%23C4C4C4" stop-opacity="0"/></linearGradient></defs></svg>');
}

#MDIDBDTImageDiv2 {
    width: 60%;
    height: 25%;
    border-radius: 50%;
    position: absolute;
    top: 2%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url('data:image/svg+xml, <svg width="145" height="145" viewBox="0 0 145 145" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="141" height="141" rx="70.5" stroke="url(%23paint0_linear_228_67_2)" stroke-width="3"/><defs><linearGradient id="paint0_linear_228_67_2" x1="72.5" y1="2" x2="72.5" y2="143" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFB600"/><stop offset="1" stop-color="%23FFB600" stop-opacity="0"/></linearGradient></defs></svg>');
}

#MDIDBDTImageDiv3 {
    width: 60%;
    height: 25%;
    border-radius: 50%;
    position: absolute;
    top: 11%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url('data:image/svg+xml, <svg width="145" height="145" viewBox="0 0 145 145" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="141" height="141" rx="70.5" stroke="url(%23paint0_linear_228_67_3)" stroke-width="3"/><defs><linearGradient id="paint0_linear_228_67_3" x1="72.5" y1="2" x2="72.5" y2="143" gradientUnits="userSpaceOnUse"><stop stop-color="%23D45151"/><stop offset="1" stop-color="%23D46151" stop-opacity="0"/></linearGradient></defs></svg>');
}

.MDIDBDTIDImage {
    width: 88%;
    position: relative;
    margin: auto;
    margin-top: 6%;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

#MDIDBottomDivInside {
    width: 100%;
    height: 79%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.2vw;
}

#MDIDBDIDivsColumn {
    width: 70%;
    height: 55%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
    margin-top: 5%;
    gap: 0.55vw;
    z-index: 3;
}

#MDIDBDIDivColumn1 {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 6px;
    font-family: AGENCYB;
    gap: 0.5vw;
    backdrop-filter: blur(190px);
}

#MDIDBDIDivColumn1:nth-child(1), #MDIDBDIDivColumn1:nth-child(2) {
    background: rgba(255, 255, 255, 0.08);
}

#MDIDBDIDivColumn1:nth-child(3) {
    background: rgba(255, 255, 255, 0.22);
}

#MDIDBDIDivColumn2 {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 6px;
    font-family: AGENCYB;
    gap: 0.5vw;
    backdrop-filter: blur(190px);
}

#MDIDBDIDivColumn2:nth-child(1), #MDIDBDIDivColumn2:nth-child(2) {
    background: rgba(255, 255, 255, 0.12);
}

#MDIDBDIDivColumn2:nth-child(3) {
    background: rgba(255, 208, 80, 0.22);
}

#MDIDBDIDivColumn3 {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 6px;
    font-family: AGENCYB;
    gap: 0.5vw;
    backdrop-filter: blur(190px);
}

#MDIDBDIDivColumn3:nth-child(1), #MDIDBDIDivColumn3:nth-child(2) {
    background: rgba(255, 255, 255, 0.12);
}

#MDIDBDIDivColumn3:nth-child(3) {
    background: rgba(255, 87, 87, 0.22);
}

#MDIDBDTID1NumberDiv {
    width: 25%;
    height: 25%;
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: radial-gradient(211.95% 211.95% at 50% 42%, #C6C6C6 0%, rgba(171, 171, 171, 0.00) 100%);
    border-radius: 50%;
    z-index: 5;
    top: -10%;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AGENCYR;
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.1vw;
}

#MDIDBDTID2NumberDiv {
    width: 25%;
    height: 25%;
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: radial-gradient(80.46% 89.21% at -39.14% 34.34%, rgba(255, 234, 181, 0.63) 0%, rgba(255, 234, 181, 0.00) 100%), radial-gradient(211.95% 211.95% at 50% 42%, #FFB800 0%, rgba(255, 184, 0, 0.00) 100%);
    background-blend-mode: lighten, normal;
    border-radius: 50%;
    z-index: 5;
    top: -10%;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AGENCYR;
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.1vw;
}

#MDIDBDTID3NumberDiv {
    width: 25%;
    height: 25%;
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: radial-gradient(211.95% 211.95% at 50% 42%, #B83E3E 0%, rgba(166, 60, 60, 0.00) 100%);
    border-radius: 50%;
    z-index: 5;
    top: -10%;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AGENCYR;
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.1vw;
}

/* Mini Game */
#minigameDiv {
    width: 18%;
    height: 17%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    margin: auto;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    /* background-color: red; */
}

#MDTopDiv {
    width: 50%;
    height: 18%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 1vw;
}

#MDTDKeyDiv {
    width: 70%;
    height: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.103);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border-radius: 5px;
    overflow: hidden;
    scale: 1.0;
    /* animation: 0.5s scale linear infinite; */
}

#MDTDKDKeyName {
    width: 25%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.445);
    color: rgba(255, 255, 255, 0.45);
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
}

#MDTimeDiv {
    width: 20%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(89, 10, 19, 0.37);
    color: #FFF;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1vw;
}

#MDProgressBarMain {
    width: 100%;
    height: 26%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
}

#MDProgressBarOut {
    width: 100%;
    height: 60%;
    border-radius: 7px;
    /* border: 5px solid rgba(0, 0, 0, 0.47); */
    /* background: linear-gradient(90deg, #410D12 15.65%, #27060A 99.99%); */
    background: rgba(0, 0, 0, 0.47);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#MDProgressBarOut2 {
    width: 97%;
    height: 60%;
    position: relative;
    border-radius: 7px;
    background: linear-gradient(90deg, #410D12 15.65%, #27060A 99.99%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#MDProgressBar {
    width: 96%;
    height: 40%;
    position: relative;
    border-radius: 7px;
    background: radial-gradient(14.4% 300% at 0% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), rgba(255, 255, 255, 0.20);
}

#MDPBBallDiv {
    width: 12%;
    height: 80%;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    left: 0;
}

#MDPBBallDiv img {
    width: 80%;
}

#MinigameBottomEffect1 {
    display: none;
    width: 591.568px;
    height: 475.943px;
    border-radius: 50%;
    background: #050101;
    filter: blur(108.11873626708984px);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20%;
    margin: auto;
}

#MinigameBottomEffect2 {
    display: none;
    width: 501.654px;
    height: 496.111px;
    border-radius: 50%;
    background: rgba(17, 5, 5, 0.45);
    filter: blur(112.75240325927734px);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20%;
    margin: auto;
}

#MinigameBottomEffect3 {
    display: none;
    width: 151px;
    height: 97px;
    border-radius: 50%;
    background: rgba(186, 0, 0, 0.10);
    filter: blur(59.82904815673828px);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10%;
    margin: auto;
}

#MDCloseDiv {
    width: 3%;
    height: 4%;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(178deg, #E24848 6.26%, #B20707 109.8%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: white;
}