@import url(https://fonts.googleapis.com/css?family=VT323);
@import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');

*{
    margin: 0;
    padding: 0;
    /* outline: 2px solid lightgreen; */
}

body{
    font-size: 64.5%;
	font-size: 1.4em;
	font-family: 'Rubik doodle shadow', Courier;
    /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
	max-height: 100vh;
	margin: 0;
	padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
}

article{
    border: 2px solid #004673;
}
.parent {
    display: grid;
    grid-template-columns: repeat(8, 175px);
    grid-template-rows: repeat(8, 250px);
    /* grid-template-columns: repeat(8, 1fr); */
    /* grid-template-rows: repeat(8, 1fr); */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2{
        grid-area: 1 / 2 / 2 / 3;
        background: url('./img/planets/merkury.jpeg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div3 { grid-area: 1 / 3 / 2 / 4; }
    .div4{
        grid-area: 1 / 4 / 2 / 5;
    }
    .div5{
        grid-area: 1 / 5 / 2 / 6; 
        background: url('./img/planets/leya.png') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;}
    .div6{
        grid-area: 1 / 6 / 2 / 7; 
        background: url('./img/planets/hermes.png') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div7{
        grid-area: 1 / 7 / 2 / 8; 
        background: url('./img/planets/ariel.jpeg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div8 { grid-area: 1 / 8 / 2 / 9; }
    .div9 { grid-area: 2 / 8 / 3 / 9; }
    .div10{
        grid-area: 3 / 8 / 4 / 9; 
        background: url('./img/planets/pluto.jpeg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div11 { grid-area: 4 / 8 / 5 / 9; }
    .div12{
        grid-area: 5 / 8 / 6 / 9;
        background: url('./img/planets/cera.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div13 { grid-area: 6 / 8 / 7 / 9; }
    .div14{
        grid-area: 7 / 8 / 8 / 9;
        background: url('./img/planets/saturn.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div15 { grid-area: 8 / 8 / 9 / 9; }
    .div16 { grid-area: 8 / 7 / 9 / 8; }
    .div17{
        grid-area: 8 / 6 / 9 / 7; 
        background: url('./img/planets/uranus.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div18 { grid-area: 8 / 5 / 9 / 6; }
    .div19{
        grid-area: 8 / 4 / 9 / 5;
        background: url('./img/planets/mars.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div20 { grid-area: 8 / 3 / 9 / 4; }
    .div21{
        grid-area: 8 / 2 / 9 / 3;
        background: url('./img/planets/neptun5.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div22 { grid-area: 8 / 1 / 9 / 2; }
    .div23{
        grid-area: 7 / 1 / 8 / 2;
        background: url('./img/planets/fobos.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div24{
        grid-area: 6 / 1 / 7 / 2;
        background: url('./img/planets/titan4.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div25 { grid-area: 5 / 1 / 6 / 2; }
    .div26{
        grid-area: 4 / 1 / 5 / 2;
        background: url('./img/planets/vega01.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div27{
        grid-area: 3 / 1 / 4 / 2;
        background: url('./img/planets/moon2.jpg') no-repeat center/155%;
        justify-content: end !important;
        color: #fff;
    }
    .div28 { grid-area: 2 / 1 / 3 / 2; }
    .div29{
        grid-area: 2 / 2 / 8 / 8;
        display: block;
        flex-direction: column;
        color: #000;
        font-weight: 700;
        align-content: center;
}

section.parent > article{
    display: flex;
    flex-direction: column;
    padding: 15px;
    justify-content: space-between;
}

    h2{
        font-size: 20px;
        text-transform: uppercase;
        height: fit-content;
    }

div.price-block{
    display: flex;
    justify-content: space-between;
}

.fortuna{
    background: url('./img/fortuna/fortuna00.jpeg') no-repeat center/155%;
    justify-content: end !important;
    color: #fff;
}

.start{
    background: url('./imG/start/start02.jpeg') no-repeat center/155%;
    color: #fff;
}

.insurance{
    background: url('./img/strahovka/agent01.jpeg') no-repeat center/155%;
    color: #fff;
}

.pirates{
    background: url('./img/pirates/pirates03.jpeg') no-repeat center/160%;
    color: #fff;
    justify-content: flex-end !important;
}

.police{
    background: url('./img/police/police00.jpeg') no-repeat center/153%;
    color: #fff;
}

.astrologer{
    color: #fff;
    justify-content: flex-end !important;
}

article.astrologer:nth-child(25){
    background: url('./img/astrologer/astrologer.jpg') no-repeat center/160%;
}

article.astrologer:nth-child(11){
    background: url('./img/astrologer/astrologer-01.jpg') no-repeat center/160%;
}

.blackhole{
    background: url('./img/hole/blackhole03.jpeg') no-repeat center/160%;
    color: #fff;
}

.casino{
    background: url('./img/casino/casino04.jpeg') no-repeat center/160%;
    color: #fff;
}

.roulette{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    border: 2px solid #004673;
}

.circle{
    grid-area: 3 / 3 / 5 / 5;
    width: 300px;
    height: 300px;
    background-color: #004673;
    border-radius: 50%;
    color: #fff;
    border: 5px solid #fff;
    align-content: center;
    font-size: 2.5rem;
    z-index: 1;
}

.roulette-point{
    opacity: 0.5;
    width: 0px; 
    height: 0px;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-top: 325px solid #0089ac;
    border-bottom: 0;
    border-radius: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    transition: all 0.4s;
    cursor: default;
        --i: 0; /* индекс от 0 до 11 */
    left:50%;
    top:50%;
    transform-origin: center;
    transform: rotate(calc(var(--i) * 30deg)) translate(-50%, -50%);
    /* width:100%;
    height:100%; */
    pointer-events:none;
}

.roulette-point:hover{
    opacity: 1;
}

.roulette-point > div.number{
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    width: 25px;
    height: 25px;
    font-weight: 700;
    text-align: center;
    align-content: center;
    position: absolute;
    top: -300px;
}

.roulette-point > div.cash{
    color: yellow;
    border: none;
    position: absolute;
    top: -200px;
    font-size: 35px;
}

.roulette-point:nth-child(2)::after,
.roulette-point:nth-child(4)::after,
.roulette-point:nth-child(6)::before{
    content: "*";
    color: blueviolet;
    font-size: 50px;
    position: absolute;
    top: 0px;
    left: 5px;
    z-index: 5;
}

.roulette-point:nth-child(2){
    grid-area: 3 / 2 / 4 / 3;
    transform: rotate(-75deg);
    position: absolute;
    left: 10%;
    top: -25%;
}

.roulette-point:nth-child(2) > div.cash,
.roulette-point:nth-child(2) > div.number{
    transform: rotate(90deg);
}

.roulette-point:nth-child(3){
    grid-area: 2 / 2 / 3 / 3;
    transform: rotate(-40deg);
    position: absolute;
    top: 55%;
    left: 50%;
}

.roulette-point:nth-child(3) > div.cash,
.roulette-point:nth-child(3) > div.number{
    transform: rotate(90deg);
}

.roulette-point:nth-child(4){
    grid-area: 2 / 3 / 3 / 4;
    transform: rotate(-15deg);
    position: absolute;
    top: -40%;
    left: 15%;
}

.roulette-point:nth-child(4) > div.cash,
.roulette-point:nth-child(4) > div.number{
    transform: rotate(90deg);
}

.roulette-point:nth-child(5){
    grid-area: 2 / 4 / 3 / 5;
    transform: rotate(15deg);
    position: absolute;
    top: -40%;
    left: -30%;
}

.roulette-point:nth-child(6){
    grid-area: 2 / 5 / 3 / 6;
    grid-area: 2 / 2 / 3 / 3;
    transform: rotate(48deg);
    position: absolute;
    top: -10%;
    right: -210%;
}

.roulette-point:nth-child(6) > div.cash,
.roulette-point:nth-child(6) > div.number{
    transform: rotate(-80deg);
}

.roulette-point:nth-child(7){
    grid-area: 3 / 5 / 4 / 6;
    transform: rotate(80deg);
    position: absolute;
    left: -58%;
    top: -58%;
}

.roulette-point:nth-child(7) > div.cash,
.roulette-point:nth-child(7) > div.number{
    transform: rotate(-90deg);
}

.roulette-point:nth-child(8){
    grid-area: 4 / 5 / 5 / 6;
    transform: rotate(110deg);
    position: absolute;
    left: -60%;
    top: -100%;
}

.roulette-point:nth-child(8) > div.cash,
.roulette-point:nth-child(8) > div.number{
    transform: rotate(-90deg);
}

.roulette-point:nth-child(9){
    grid-area: 5 / 5 / 6 / 6;
    transform: rotate(135deg);
    position: absolute;
    left: -90%;
    top: -100%;
}

.roulette-point:nth-child(9) > div.cash,
.roulette-point:nth-child(9) > div.number{
    transform: rotate(-90deg);
}

.roulette-point:nth-child(10){
    grid-area: 5 / 4 / 6 / 5;
    transform: rotate(165deg);
    position: absolute;
    left: -35%;
    top: -70%;
}

.roulette-point:nth-child(10) > div.cash,
.roulette-point:nth-child(10) > div.number{
    transform: rotate(-90deg);
}

.roulette-point:nth-child(11){
    grid-area: 5 / 3 / 6 / 4;
    transform: rotate(-165deg);
    position: absolute;
    left: 10%;
    top: -70%;
}
.roulette-point:nth-child(12){
    grid-area: 5 / 2 / 6 / 3;
    transform: rotate(-142deg);
    position: absolute;
    left: 45%;
    top: -159%;
}

.roulette-point > div.cash,
.roulette-point > div.number{
    transform: rotate(90deg);
}

.roulette-point:nth-child(13){
    grid-area: 4 / 2 / 5 / 3;
    transform: rotate(-110deg);
    position: absolute;
    left: 10%;
    top: -80%;
}

.roulette-point:nth-child(13) > div.cash,
.roulette-point:nth-child(13) > div.number{
    transform: rotate(90deg);
}