@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-Black.woff") format("woff");
    font-weight: 900;
}

@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-Bold.woff") format("woff");
    font-weight: 700;
}

@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-Light.woff") format("woff");
    font-weight: 300;
}

@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-Medium.woff") format("woff");
    font-weight: 500;
}

@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-Regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-SemiBold.woff") format("woff");
    font-weight: 600;
}

@font-face {
    font-family: "Nekst";
    src: url("../font/Nekst-Thin.woff") format("woff");
    font-weight: 200;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

.hero {
    background-image: url('../photo/background1.svg');
    background-position: 0 0;
    height: 729px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

.bigdenis {
    position: absolute;
    width: 623px;
    height: 380px;
    top: 62px;
    left: 760px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.yellowthings-row {
    display: flex;
    flex-direction: row;
    border-radius: 3px;
    background-color: #FCC011;
    font-family: 'Nekst';
    padding: 0 0 10px 6px;
    font-size: 34px;
    height: 46px;
}

.yellowthings {
    padding-left: 6px;
    border-radius: 3px;
    background-color: #FCC011;
    font-family: 'Nekst';
    display: flex;
    font-size: 34px;
    height: 46px;
    align-items: center;
}

#id:hover {
    background-color: #000;
    color: #FCC011;
    cursor: pointer;
}

.yellowthings-row:hover {
    background-color: #000;
    color: #FCC011;
    cursor: pointer;
}

#denis {
    height: 37px;
    font-weight: 600;
    font-size: 22px;
}

#denisimg {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 172px;
    background-color: #FCC011;
    border-radius: 3px;
    padding: 3px;
    align-items: center;
}

#id {
    font-weight: 600;
}

#project {
    font-weight: 600;
}

#label {
    font-weight: 900;
    padding-left: 7px;
}

#threat {
    font-weight: 600;
}

#procent {
    font-weight: 600;
    padding-left: 140px;
}

#line1 {
    position: absolute;
    width: 242px;
    height: 3px;
    top: 164px;
    left: 518px;
    background-color: #FCC011;
}

#rec1 {
    position: absolute;
    width: 87px;
    height: 68px;
    top: 164px;
    left: 432px;
    border: 3px solid;
    border-color: #FCC011;
}

#lineinrec1 {
    position: absolute;
    width: 6px;
    height: 3px;
    top: 196px;
    left: 512px;
    background-color: #FCC011;
}

#lineinrec2 {
    position: absolute;
    width: 6px;
    height: 3px;
    top: 196px;
    left: 432px;
    background-color: #FCC011;
}

#recname1 {
    position: absolute;
    width: 37px;
    height: 11px;
    top: 155px;
    left: 437px;
    background-color: #FCC011;
    font-family: 'Nekst';
    font-weight: 300;
    font-size: 8px;
    align-items: center;
    padding-left: 2px;
}

#rec2 {
    position: absolute;
    width: 320px;
    height: 291px;
    top: 339px;
    left: 328px;
    border: 3px solid;
    border-color: #EF0AF0;
}

#recname2 {
    position: absolute;
    align-items: center;
    width: 61px;
    height: 11px;
    top: 328px;
    left: 335px;
    background-color: #EF0AF0;
    font-family: 'Nekst';
    font-weight: 300;
    font-size: 10px;
    padding-left: 2px;
}

#line2 {
    position: absolute;
    top: 429px;
    left: 646px;
    width: 198px;
    height: 67px;
}

#model {
    position: absolute;
    width: 393px;
    height: 44px;
    top: 487px;
    left: 834px;
    border-radius: 3px;
    padding-left: 9px;
    padding-top: 6px;
    background-color: #EF0AF0;
    font-family: 'Nekst';
    font-weight: 500;
    font-size: 25px;
    align-items: center;
}

#user {
    position: absolute;
    width: 595px;
    height: 44px;
    top: 540px;
    left: 782px;
    border-radius: 3px;
    padding-left: 9px;
    padding-top: 6px;
    background-color: #EF0AF0;
    font-family: 'Nekst';
    font-weight: 500;
    font-size: 25px;
    align-items: center;
}

.about {
    background-image: url('../photo/background2.svg');
    background-position: 0 0;
    height: 730px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

.slot {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15px 0;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }

    border-bottom: 3px solid;
    border-right: 3px solid;
    border-color: #00FF03;
}

.slot1 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 8px 10px 12px 15px;
    border-bottom: 3px solid;
    border-color: #00FF03;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.pixels {
    position: absolute;
    background-color: #00FF03;
    animation-duration: 0.1ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
}

#pix1 {
    top: 743px;
    left: 671px;
    width: 133px;
    height: 20px;
    animation-name: brokenPixel1;
}

#pix2 {
    top: 804px;
    left: 756px;
    width: 110px;
    height: 13px;
    animation-name: brokenPixel2;
}

#pix3 {
    top: 878px;
    left: 820px;
    width: 80px;
    height: 13px;
    animation-name: brokenPixel3;
}

#pix4 {
    top: 1045px;
    left: 847px;
    width: 87px;
    height: 12px;
    animation-name: brokenPixel4;
}

#pix5 {
    top: 1072px;
    left: 818px;
    width: 85px;
    height: 13px;
    animation-name: brokenPixel5;
}

#pix6 {
    top: 1144px;
    left: 850px;
    width: 85px;
    height: 13px;
    animation-name: brokenPixel6;
}

#pix7 {
    top: 1257px;
    left: 833px;
    width: 62px;
    height: 20px;
    animation-name: brokenPixel7;
}

#pix8 {
    top: 1394px;
    left: 748px;
    width: 102px;
    height: 10px;
    animation-name: brokenPixel8;
}

#pix9 {
    top: 1428px;
    left: 611px;
    width: 88px;
    height: 20px;
    animation-name: brokenPixel9;
}

@keyframes brokenPixel1 {

    0%,
    70% {
        background-color: #000;
    }

    71%,
    100% {
        background-color: #f00;
    }
}

@keyframes brokenPixel2 {

    0%,
    80% {
        background-color: #000;
    }

    81%,
    90% {
        background-color: #0f0;
    }

    91%,
    100% {
        background-color: #000;
    }
}

@keyframes brokenPixel3 {

    0%,
    60% {
        background-color: #000;
    }

    61%,
    65% {
        background-color: #00f;
    }

    66%,
    100% {
        background-color: #000;
    }
}

@keyframes brokenPixel4 {

    0%,
    85% {
        background-color: #000;
    }

    86%,
    100% {
        background-color: #ff0;
    }
}

@keyframes brokenPixel5 {
    0% {
        background-color: #000;
    }

    25% {
        background-color: #f0f;
    }

    50% {
        background-color: #0ff;
    }

    75% {
        background-color: #fff;
    }

    100% {
        background-color: #000;
    }
}

@keyframes brokenPixel6 {

    0%,
    90% {
        background-color: #000;
    }

    91%,
    95% {
        background-color: #fff;
    }

    96%,
    100% {
        background-color: #000;
    }
}

@keyframes brokenPixel7 {

    0%,
    75% {
        background-color: #000;
    }

    76%,
    100% {
        background-color: #f90;
    }
}

@keyframes brokenPixel8 {
    0% {
        background-color: #f00;
    }

    50% {
        background-color: #800;
    }

    100% {
        background-color: #f00;
    }
}

@keyframes brokenPixel9 {

    0%,
    95% {
        background-color: #000;
    }

    96%,
    100% {
        background-color: #0f0;
    }
}


.greenrec {
    border: 3px solid;
    border-color: #00FF03;
    position: absolute;
}

#rec3 {
    width: 217px;
    height: 478px;
    top: 975px;
    left: 1137px;
}

#rec4 {
    width: 115px;
    height: 93px;
    top: 1000px;
    left: 1170px;
}

#rec5 {
    width: 67px;
    height: 73px;
    top: 1013px;
    left: 1415px;
}

#rec6 {
    width: 130px;
    height: 402px;
    top: 992px;
    left: 1378px;
}

.greenlines {
    background-color: #00FF03;
    position: absolute;
}

#line3 {
    width: 3px;
    height: 147px;
    top: 854px;
    left: 1235px;
}

#line4 {
    width: 3px;
    height: 161px;
    top: 854px;
    left: 1449px;
}

#line5 {
    width: 748px;
    height: 3px;
    top: 854px;
    left: 702px;
}

.greenrecname {
    background-color: #00FF03;
    position: absolute;
    font-family: 'Nekst';
    font-weight: 300;
    align-items: center;
    padding-left: 2px;
}

#recname3 {
    width: 72px;
    height: 22px;
    top: 954px;
    left: 1141px;
    font-size: 15px;
}

#recname4 {
    width: 50px;
    height: 16px;
    top: 976px;
    left: 1386px;
    font-size: 10px;
}

#rec10 {
    width: 672px;
    height: 524px;
    top: 774px;
    left: 41px;
}

#rec9 {
    width: 649px;
    height: 501px;
    top: 784px;
    left: 54px;
    background-color: black;
}

#rec8 {
    width: 624px;
    height: 472px;
    top: 893px;
    left: 179px;
}

#rec7 {
    width: 598px;
    height: 445px;
    top: 904px;
    left: 195px;
    background-color: #808080;
}

.aboutrec {
    display: flex;
    flex-direction: column;
    width: 647px;
    height: 501px;
}

#rec11 {
    width: 253px;
    height: 48px;
    font-family: 'Nekst';
    font-weight: 700;
    font-size: 45px;
    background-color: #00FF03;
}

.mainpartrow {
    display: flex;
    flex-direction: row;

    .slot {
        width: 50%;
    }
}

#text1 {
    font-family: 'Nekst';
    font-weight: 600;
    font-size: 45px;
    color: #00FF03;

}

#text2 {
    font-family: 'Nekst';
    font-weight: 400;
    font-size: 20px;
    color: white;
    width: 100%;
}

#text3 {
    font-family: 'Nekst';
    font-weight: 400;
    font-size: 20px;
    color: white;
    width: 100%;
}

#text4 {
    font-family: 'Nekst';
    font-weight: 400;
    font-size: 20px;
    color: white;
    align-items: center;
    width: 100%;
    border-bottom: 0;
}

#rec12 {
    height: 30px;
}

.slot2 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 10px 12px 15px;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.closeopen {
    display: flex;
    flex-direction: row;
    padding-left: 486px;
    border-bottom: #00FF03 3px solid;
}

.slot3 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 17px 10px;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

#rec13 {
    width: 31px;
    height: 3px;
    background-color: #00FF03;
}

#rec14 {
    width: 23px;
    height: 23px;
    border: #00FF03 3px solid;
}

.closeopen1 {
    display: flex;
    flex-direction: row;
    padding-left: 400px;
    border-bottom: #00FF03 3px solid;
    width: 100%;
}

.aboutrec2 {
    display: flex;
    flex-direction: column;
    width: 595px;
    height: 501px;
}

.slot4 {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 17px 0 17px 10px;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.outline {
    background-image: url('../photo/background3.svg');
    background-position: 0 0;
    height: 960px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

#infooutline {
    position: absolute;
    top: 1489px;
    left: 47px;
    width: 455px;
    height: 897px;
}

.infooutlineflex {
    display: flex;
    flex-direction: column;
    width: 438px;
    height: 897px;
}

.slot5 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15px;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

#maintext {
    font-family: 'Nekst';
    font-weight: 700;
    font-size: 60px;
    color: white;
    border-bottom: #EF0AF0 3px solid;
}

#text5 {
    font-family: 'Nekst';
    font-weight: 500;
    font-size: 32px;
    color: white;
}

.pinkrec {
    border: #EF0AF0 9px solid;
    background-color: black;
}

.pinkrecwithoutbackground {
    border: #EF0AF0 9px solid;
}

.pinkrecforthird {
    position: absolute;
    border: #EF0AF0 3px solid;
}

.pinkrecmini {
    position: absolute;
    background-color: #EF0AF0;
}

#recj {
    top: 1516px;
    left: 730px;
    width: 218px;
    height: 206px;
}

#linej {
    top: 1565px;
    left: 498px;
    width: 232px;
    height: 3px;
}

#miniline1 {
    top: 1518px;
    left: 836px;
    width: 6px;
    height: 15px;
}

#miniline2 {
    top: 1616px;
    left: 934px;
    width: 15px;
    height: 6px;
}

#miniline3 {
    top: 1707px;
    left: 836px;
    width: 6px;
    height: 15px;
}

#miniline4 {
    top: 1616px;
    left: 731px;
    width: 15px;
    height: 6px;
}

#form {
    position: absolute;
    top: 1489px;
    left: 974px;
    width: 516px;
    height: 897px;
}

.formflex {
    position: absolute;
    top: 1508px;
    left: 998px;
    width: 467px;
    height: 856px;
    display: flex;
    flex-direction: column;
    border: #EF0AF0 3px solid;
}

.formflex1 {
    position: absolute;
    top: 4350px;
    left: 570px;
    width: 816px;
    height: 1104px;
    display: flex;
    flex-direction: column;
    border: #EF0AF0 5px solid;
}

.slwofform {
    display: flex;
    justify-content: center;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.slwofform2 {
    display: flex;
    justify-content: center;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.formrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 3px 6px 3px;
    border: #EF0AF0 3px solid;
    justify-content: flex-start;
    margin: 5px;
    gap: 128px;
}

.formrow1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 3px 6px 3px;
    border: #EF0AF0 5px solid;
    justify-content: flex-start;
    margin: 5px 10px;
    gap: 178px;
}

.formwrap {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    justify-content: space-between;
}

.formwrap1 {
    display: flex;
    flex-wrap: wrap;
    padding: 3px 10px;
    justify-content: space-between;
}

.slot6 {
    display: flex;
    justify-content: center;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

#person3 {
    border: #EF0AF0 3px solid;
    display: flex;
}

#person4 {
    border: #EF0AF0 5px solid;
}

#person {
    border: #EF0AF0 3px solid;
    margin: 3px;
}

#person1 {
    border: #EF0AF0 5px solid;
    width: 421px;
    height: 420px;
    margin: 5px;
    display: flex;
}

.slwofform1 {
    display: flex;
    justify-content: center;
    flex-direction: column;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }

    gap: 10px;
    padding:6px;
}

.slwofform3 {
    display: flex;
    justify-content: center;
    flex-direction: column;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }

    gap: 10px;
    padding:6px;
}

.slwofform2 {
    display: flex;
    justify-content: center;
    flex-direction: column;

    div {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.formrowborder {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 5px;
    border: #EF0AF0 3px solid;
    margin: 0 10px;
    gap: 5px;
}

.formrowborder1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 15px;
    border: #EF0AF0 5px solid;
    margin: 0 10px;
    gap: 10px;
}

.font-options1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: 'Nekst';
    font-size: 54px;
    padding: 8px;

    div {
        display: flex;
        padding-bottom: 18px;
    }
}

.font-options2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    color: #EF0AF0;
    font-family: 'Nekst';
    font-size: 54px;
    padding: 10px;
    align-items: flex-end;

    div {
        display: flex;
        padding-bottom: 20px;
    }
}

.weights {
    display: flex;
}

#thin {
    font-weight: 200;
}

#light {
    font-weight: 300;
}

#regular {
    font-weight: 400;
}

#medium {
    font-weight: 500;
}

#semibold {
    font-weight: 600;
}

#bold {
    font-weight: 700;
}

#black {
    font-weight: 900;
}

.footer {
    color: #EF0AF0;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Nekst';
}

.footer1 {
    color: #EF0AF0;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Nekst';
}

.aboutpolice {
    display: flex;
    flex-direction: row;
    color: #EF0AF0;
    font-family: 'Nekst';
    padding: 5px;
    align-items: flex-end;
    border-top: 3px solid #ff00ff;

    div {
        display: flex;
        text-align: center;
    }
}

.aboutpolice1 {
    display: flex;
    flex-direction: row;
    color: #EF0AF0;
    font-family: 'Nekst';
    padding: 5px;
    align-items: flex-end;
    border-top: 5px solid #ff00ff;

    div {
        display: flex;
        text-align: center;
    }
}

.star {
    width: 46px;
    height: 47px;
}

.star1 {
    width: 76px;
    height: 78px;
}

#pinktext {
    font-family: 'Nekst';
    font-weight: 600;
    font-size: 18px;
    color: #EF0AF0;
}

#pinktext1 {
    font-family: 'Nekst';
    font-weight: 600;
    font-size: 37px;
    color: #EF0AF0;
}

.details {
    background-image: url('../photo/background4.svg');
    background-position: 0 0;
    height: 730px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

.yerec {
    position: absolute;
    border: #FCC011 3px solid;
}

#rec41 {
    top: 2543px;
    left: 96px;
    width: 94px;
    height: 134px;
}

#rec42 {
    top: 2624px;
    left: 451px;
    width: 89px;
    height: 57px;
}

#rec43 {
    top: 2865px;
    left: 388px;
    width: 106px;
    height: 89px;
}

#rec44 {
    top: 2885px;
    left: 777px;
    width: 74px;
    height: 77px;
}

#rec45 {
    top: 2983px;
    left: 925px;
    width: 102px;
    height: 129px;
}

#rec46 {
    top: 2736px;
    left: 1306px;
    width: 75px;
    height: 78px;
}

#rec47 {
    top: 2486px;
    left: 991px;
    width: 229px;
    height: 238px;
}

.yename {
    position: absolute;
    background-color: #FCC011;
    font-family: 'Nekst';
    border-radius: 3px;
    font-weight: 400;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rec48 {
    top: 2846px;
    left: 159px;
    width: 97px;
    height: 37px;
}

#rec49 {
    top: 2593px;
    left: 569px;
    width: 178px;
    height: 37px;
}

#rec410 {
    top: 3059px;
    left: 316px;
    width: 184px;
    height: 37px;
}

#rec411 {
    top: 3019px;
    left: 691px;
    width: 127px;
    height: 31px;
}

#rec412 {
    top: 3057px;
    left: 1133px;
    width: 139px;
    height: 41px;
}

#rec413 {
    top: 2913px;
    left: 1235px;
    width: 143px;
    height: 37px;
}

#rec414 {
    top: 2486px;
    left: 1105px;
    width: 3px;
    height: 17px;
}

#rec415 {
    top: 2605px;
    left: 1201px;
    width: 17px;
    height: 3px;
}

#rec416 {
    top: 2705px;
    left: 1105px;
    width: 3px;
    height: 17px;
}

#rec417 {
    top: 2605px;
    left: 993px;
    width: 17px;
    height: 3px;
}

.languages {
    background-image: url('../photo/background5.svg');
    background-position: 0 0;
    height: 1030px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

.greenlang {
    position: absolute;
    font-family: 'Nekst';
    font-size: 30px;
    font-weight: 500;
    background-color: #00FF03;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#langname {
    position: absolute;
    font-family: 'Nekst';
    font-size: 64px;
    font-weight: 700;
    background-color: #00FF03;
    border-radius: 3px;
    top: 3185px;
    left: 34px;
    width: 267px;
    height: 79px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lang1 {
    top: 3335px;
    left: 15px;
    width: 176px;
    height: 45px;
}

#lang2 {
    top: 3407px;
    left: 187px;
    width: 156px;
    height: 39px;
}

#lang3 {
    top: 3593px;
    left: 10px;
    width: 133px;
    height: 39px;
}

#lang4 {
    top: 3708px;
    left: 22px;
    width: 97px;
    height: 39px;
}

#lang5 {
    top: 3824px;
    left: 37px;
    width: 114px;
    height: 39px;
}

#lang6 {
    top: 3916px;
    left: 110px;
    width: 129px;
    height: 39px;
}

#lang7 {
    top: 3997px;
    left: 28px;
    width: 114px;
    height: 39px;
}

#lang8 {
    top: 3955px;
    left: 290px;
    width: 95px;
    height: 39px;
}

#lang9 {
    top: 4079px;
    left: 201px;
    width: 125px;
    height: 36px;
}

#lang10 {
    top: 4104px;
    left: 413px;
    width: 101px;
    height: 39px;
}

#lang11 {
    top: 3320px;
    left: 396px;
    width: 181px;
    height: 35px;
}

#lang12 {
    top: 3439px;
    left: 425px;
    width: 114px;
    height: 38px;
}

#lang13 {
    top: 3320px;
    left: 704px;
    width: 122px;
    height: 39px;
}

#lang14 {
    top: 3411px;
    left: 625px;
    width: 160px;
    height: 39px;
}

#lang15 {
    top: 3581px;
    left: 611px;
    width: 114px;
    height: 39px;
}

#lang16 {
    top: 3631px;
    left: 693px;
    width: 146px;
    height: 40px;
}

#lang17 {
    top: 3509px;
    left: 750px;
    width: 152px;
    height: 36px;
}

#lang18 {
    top: 3426px;
    left: 918px;
    width: 114px;
    height: 39px;
}

#lang19 {
    top: 3333px;
    left: 902px;
    width: 163px;
    height: 39px;
}

#lang20 {
    top: 4070px;
    left: 709px;
    width: 114px;
    height: 38px;
}

#lang21 {
    top: 4048px;
    left: 995px;
    width: 85px;
    height: 36px;
}

#lang22 {
    top: 3737px;
    left: 1079px;
    width: 82px;
    height: 39px;
}

#lang23 {
    top: 3560px;
    left: 1136px;
    width: 119px;
    height: 39px;
}

#lang24 {
    top: 3478px;
    left: 1080px;
    width: 169px;
    height: 39px;
}

#lang25 {
    top: 3415px;
    left: 1258px;
    width: 102px;
    height: 39px;
}

#lang26 {
    top: 3518px;
    left: 1341px;
    width: 114px;
    height: 38px;
}

#lang27 {
    top: 3945px;
    left: 1195px;
    width: 117px;
    height: 38px;
}

#lang28 {
    top: 3836px;
    left: 1344px;
    width: 128px;
    height: 40px;
}

#lang29 {
    top: 4095px;
    left: 1309px;
    width: 125px;
    height: 36px;
}

#lang30 {
    top: 3876px;
    left: 963px;
    width: 142px;
    height: 37px;
}

#reclang1 {
    top: 3511px;
    left: 0px;
    width: 19px;
    height: 29px;
}

#reclang2 {
    top: 3500px;
    left: 28px;
    width: 28px;
    height: 39px;
}

#reclang3 {
    top: 3525px;
    left: 34px;
    width: 44px;
    height: 39px;
}

#reclang4 {
    top: 3500px;
    left: 83px;
    width: 44px;
    height: 39px;
}

#reclang5 {
    top: 3501px;
    left: 165px;
    width: 44px;
    height: 39px;
}

#reclang6 {
    top: 3500px;
    left: 240px;
    width: 40px;
    height: 35px;
}

#reclang7 {
    top: 3514px;
    left: 269px;
    width: 57px;
    height: 68px;
}

#reclang8 {
    top: 3516px;
    left: 366px;
    width: 39px;
    height: 38px;
}

#reclang9 {
    top: 3552px;
    left: 449px;
    width: 59px;
    height: 64px;
}

#reclang10 {
    top: 3554px;
    left: 491px;
    width: 110px;
    height: 130px;
}

#reclang11 {
    top: 3561px;
    left: 326px;
    width: 113px;
    height: 140px;
}

#reclang12 {
    top: 3599px;
    left: 169px;
    width: 179px;
    height: 215px;
}

#reclang13 {
    top: 3707px;
    left: 437px;
    width: 320px;
    height: 330px;
}

#reclang14 {
    top: 3767px;
    left: 743px;
    width: 159px;
    height: 186px;
}

#reclang15 {
    top: 3588px;
    left: 861px;
    width: 181px;
    height: 199px;
}

#reclang16 {
    top: 3651px;
    left: 1189px;
    width: 77px;
    height: 86px;
}

#reclang17 {
    top: 3651px;
    left: 1292px;
    width: 99px;
    height: 126px;
}

#reclang18 {
    top: 3626px;
    left: 1378px;
    width: 97px;
    height: 113px;
}

.glyfs {
    background-image: url('../photo/background6.svg');
    background-position: 0;
    height: 1460px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

#form1 {
    position: absolute;
    top: 4281px;
    left: 503px;
    width: 950px;
    height: 1240px;
}

#blackborder {
    position: absolute;
    top: 4289px;
    left: 512px;
    width: 932px;
    height: 1223px;
    border: #000 58px solid;
}

.glyphs-section {
    padding: 20px;
    display: flex;
    flex-direction: column;

}

#bigpink {
    font-family: 'Nekst';
    font-weight: 900;
    font-size: 75px;
    width: 290px;
    height: 99p;
    display: flex;
    align-items: center;
    background-color: #EF0AF0;
    justify-content: center;
    align-items: flex-end;
    margin: 10px;
}

.bigslot {
    display: flex;
    flex-direction: column;
    gap: 171px;
}

.glyph-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.glyph-row {
    div {
        font-family: 'Nekst';
        color: white;
        font-weight: 600;
        font-size: 40px;
        padding: 7px;
    }
}

.glyph-row div:hover {
    animation-play-state: paused;
    background: #EF0AF0 !important;
    color: #000000 !important;
    transform: scale(1.3) !important;
    z-index: 10;
    box-shadow: 0 0 15px #EF0AF0;
    cursor: pointer;
}

.lygatures {
    background-image: url('../photo/background7.svg');
    background-position: 0 0;
    height: 730px;
    width: 1536px;
    margin: 0;
    padding: 0;
    font-variant-ligatures: discretionary-ligatures;
}

#coolpinkrec {
    position: absolute;
    border: #EF0AF0 5px solid;
    top: 4524px;
    left: 102px;
    width: 125px;
    height: 171px;
}

#yellowrectangle1 {
    top: 6022px;
    left: 196px;
    width: 97px;
    height: 160px;
}

#yellowrectangle2 {
    top: 6026px;
    left: 599px;
    width: 63px;
    height: 134px;
}

#yellowrectangle3 {
    top: 5951px;
    left: 700px;
    width: 179px;
    height: 356px;
}

#yellowrectangle4 {
    top: 5929px;
    left: 1116px;
    width: 178px;
    height: 429px;
}

#miniyellowrectangle1 {
    top: 5775px;
    left: 105px;
    width: 68px;
    height: 21px;
}

#miniyellowrectangle2 {
    top: 5670px;
    left: 391px;
    width: 65px;
    height: 21px;
}

#miniyellowrectangle3 {
    top: 6144px;
    left: 336px;
    width: 94px;
    height: 21px;
}

#miniyellowrectangle4 {
    top: 5698px;
    left: 949px;
    width: 80px;
    height: 21px;
}

.yerecbold {
    position: absolute;
    width: 251px;
    height: 171px;
    background-color: #FCC011;
}

.miniyerecbold {
    position: absolute;
    background-color: #FCC011;
    font-family: 'Nekst';
    font-size: 15px;
    font-weight: 400;
    display: flex;
    justify-content: center;
}

#fractions {
    top: 5790px;
    left: 92px;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
        font-family: 'Nekst';
        font-size: 100px;
        font-weight: 700;
    }
}

.textaboutfractions {
    width: 50%;
    font-family: 'Nekst';
    font-size: 100px;
    font-weight: 700;

}

#lygaturesabout {
    top: 6159px;
    left: 328px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.textaboutlygatures {
    font-family: 'Nekst';
    font-size: 45px;
    font-weight: 700;
}

#numbers {
    top: 5687px;
    left: 378px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 84%;
    align-items: center;

    div {
        font-family: 'Nekst';
        font-size: 45px;
        font-weight: 400;
        padding: 5px;
    }
}

.numbers-div1 {
    font-feature-settings: 'dlig' on, 'ss04' on;
}

.numbers-div2 {
    font-feature-settings: 'dlig' on, 'ss05' on;
}

.textaboutnumbers {
    font-family: 'Nekst';
    font-size: 35px;
    font-weight: 700;
}

#arrows {
    top: 5713px;
    left: 936px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    padding-bottom: 10px;

    div {
        font-family: 'Nekst';
        font-size: 75px;
        font-weight: 700;
    }
}

.arrows-div1 {
    font-feature-settings: 'dlig' on;
}

.arrows-div2 {
    font-feature-settings: 'ss07' on;
}

.arrows-div3 {
    font-feature-settings: 'ss06' on;
}

.textaboutarrows {
    font-family: 'Nekst';
    font-size: 45px;
    font-weight: 700;
}

.section {
    background-color: black;
    background-position: 0 0;
    height: 730px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

.sstv-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 48px;
    gap: 20px;
    height: 730px;
    width: 1536px;
}

.cameras-section {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.cameras-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    width: 962px;
    height: 622px;
}

.camera-box {
    position: relative;
    border: 3px solid #ff00ff;
    width: 48%;
    width: 463px;
    height: 236px;
    overflow: hidden;
}

.camera-img {
    width: 463px;
    height: 263px;
    object-fit: cover;
}

.camera-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #ff00ff;
    font-weight: 500;
    padding: 4px 10px;
    font-size: 20px;
    font-family: 'Nekst';
}

.interface-footer {
    background-color: #ff00ff;
    text-align: center;
    font-weight: 900;
    padding: 12px 0;
    font-size: 50px;
    font-family: 'Nekst';
    display: flex;
    padding-left: 15px;
}

.status-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: white;
    font-family: 'Nekst';
    font-size: 15px;
    font-weight: 900;
    border: #EF0AF0 3px solid;
    width: 409px;
    height: 645px;
    align-items: center;
    justify-content: space-evenly;
}

.status-box {
    border: 3px solid #ff00ff;
    padding: 10px;
    width: 376px;
    height: 118px;
}

#camera-things1 {
    position: absolute;
    top: 6427px;
    left: 59px;
}

#camera-things2 {
    position: absolute;
    top: 6682px;
    left: 59px;
}

#camera-things3 {
    position: absolute;
    top: 6427px;
    left: 558px;
}

#camera-things4 {
    position: absolute;
    top: 6682px;
    left: 558px;
}

span {
    color: #EF0AF0;
}

.the-last-one {
    background-image: url('../photo/background8.svg');
    background-position: 0 0;
    height: 730px;
    width: 1536px;
    margin: 0;
    padding: 0;
}

#rec01 {
    position: absolute;
    top: 7208px;
    left: 429px;
    width: 672px;
    height: 524px;
}

#rec0 {
    position: absolute;
    top: 7219px;
    left: 442px;
    width: 649px;
    height: 501px;
    background-color: #000;
}

#question {
    font-family: 'Nekst';
    font-size: 35px;
    font-weight: 900;
    color: white;
}

#questiontext {
    font-family: 'Nekst';
    font-size: 25px;
    font-weight: 400;
    color: white;
}

.flexquestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 25px 0 25px;
    gap: 20px;
}

.btn {
    position: absolute;
    top: 440px;
    left: 467px;
    width: 151px;
    height: 35px;
    background-color: #00FF03;
    font-family: 'Nekst';
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    background-color: #000;
    border: #00FF03 2px solid;
    color: #00FF03;
    cursor: pointer;
}

#recfooter {
    width: 1521px;
    height: 250px;
    background-color: #000;
    margin: 0;
    padding: 0;
}

.closeopenfooter {
    display: flex;
    flex-direction: row;
    padding-left: 1375px;
    border-bottom: #00FF03 3px solid;
}

#textname {
    font-size: 33px;
    font-family: 'Nekst';
    font-weight: 600;
    color: white;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

#texthse {
    font-size: 41px;
    font-family: 'Nekst';
    font-weight: 900;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footertext {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: 40px 20px;
}

.batterydiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.batterydiv1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 90px;
}

.slotbattery {
    display: flex;

}