* {
    /*border:1px solid white;*/
}

@import url('https://fonts.googleapis.com/css2?family=Contrail+One&family=Noto+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Contrail+One&display=swap');

.ctrlpanel {
    position: absolute;
    top: 0px;
}


body {

    background: transparent;
    background: black;
    background-color: black;
    background: url('Zz2.jpg'),
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    background-size: cover;
    background-size: 100% auto;

    background-position: center;

    background-repeat: no-repeat;



    background-repeat: no-repeat;


}

details {
    border: 1px solid black;
    padding: 20px;
}

.uu {
    opacity: 1;
    /* background: #00000088; */
    background-position: center;
    position: absolute;
    margin: 50% auto 50% auto;
    padding: 0px;
    width: 110px;
    height: 110px;
    border-radius: 100%;
}

.graycircle {
    opacity: 1;
    background-position: center;
    position: absolute;
    margin: 50% auto 50% auto;
    text-align: center;
    padding: 40.5px;
    border-radius: 100%;
    border: 12.5px solid #ffffff6f;
    z-index: 0;
}




.uu2 {
    font-family: Helvetica;
    background: #ff000088;
    position: absolute;
    top: 2%;
    left: 47%;
    padding: 0px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    box-shadow: 0px -14px 10px 0px cyan
}

.rtrrall {

    border-radius: 100%;
    border: inset 12px solid gray;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotateZ(0deg);
}

.rtrr {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotateZ(5deg);
}

.rtrr4 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: rotateZ(10deg);
}



.container {
    position: relative;
    top: -12px;
    margin: 50% auto 50% auto;
    transform-origin: center;
    transform: scale(0.7);
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    background: url('Zz.jpg');
    background: transparent;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    background-repeat: no-repeat;

}

.wh {
    color: white;
}

.textlogo {
    font-family: Noto Sans;
    opacity: 1;
    margin: 49.5% auto 50% auto;
    text-align: center;
    width: 100%;
    height: 100%;


    color: white;
    /* color: #00000055; */
    color: white;
    font-weight: 800;
    font-size: 22px;
    z-index: 999;
    /*letter-spacing:-2px;*/
    font-kerning: normal;
    text-shadow: 0px -.5px 0 white, 0px 1px 0 white;
    transform-origin: center;
    transform: scaleY(0.90) scaleX(0.95);
}

.kerned {
    letter-spacing: -1px;

}

x,
y,
vv {
    position: relative;
    display: inline-block;
    transform-origin: center;
}

x {
    top: 1.0px;
    transform: scaleY(1) scaleX(1.1);
    text-shadow: none;
}

y {
    top: 0px;

}

vv {
    color: black;
}

@font-face {
    font-family: 'atomicage';
    src: url('atomic-age.regular.ttf') format('truetype');
}

.perc {
    /* font-family: Contrail One; */
    /* text-align: center; */
    /* text-align: justify; */
    font-family: atomicage;


    /* font-family: Contrail One; */
    /* text-align: center; */
    /* text-align: justify; */
    opacity: 1;
    position: absolute;
    top: 78px;
    margin: 50% auto 50% auto;
    padding: 0;
    border-radius: 100%;
    color: white;
    font-weight: bold;
    font-size: 19px;
    z-index: 1;
    transform-origin: center;
    /* transform: scaleY(0.65) scaleX(.95) skewX(4deg); */
}

.linkylink {
    background-color: rgb(249, 250, 175);
    margin: 5px;
    padding: 5px;
    border-radius: 10px
}