html {
  scroll-behavior: smooth;
}

a {
    color: #1b96e7;
    text-decoration: underline;
}


#osn, #descript, #galler, #game, #voprosi {
    scroll-margin-top: 36px;
}


.textt {
    width: 1015px;
    margin-left: auto;
    margin-right: auto;
    color: #EDEDED;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 16.5pt;
    transition: height 0.3s ease;
}

.arrow {
    transition: transform 0.3s ease;
    transform-origin: center;
}

.rotated {
    transform: rotate(180deg);
}

.img {
    width: 500px;
}

.img2 {
    width: 319px;
    padding: 10px 7px;
    position: relative;
    transition: transform 0.35s ease;
    -webkit-transition: transform 0.35s ease;
}

.img2:hover {
    transform: scale(1.254);
    z-index: 100;
}

.description {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jt {
    color: #EDEDED;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14pt;
}

.text {
    color: #EDEDED;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 15.5pt;
}

.text2 {
    color: #00c700;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 26.25pt;
}

.text3 {
    color: #707070;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 13.5pt;
}

.bgc {
    background-color: #161616;
}

.gray2 {
    background-color: rgb(32, 32, 32);
}

.gray3 {
    background-color: rgb(42, 42, 42);
}

.gray4 {
    background-color: #343434;
}

.tl {
    text-align: left;
    padding-left: 15px;
}

.tr {
    text-align: right;
    padding-right: 15px;
}

.otsu {
    padding-top: 10px;
}

.otsd {
    padding-bottom: 15px;
}

.razm {
    width: 965px;
}

.razm2 {
    width: 1015px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    overflow: hidden;
}

.anim {
    opacity: 0;
}

.anim_start {
    animation: anim_start ease-out forwards;
    animation-duration: 0.5s;

}
@keyframes anim_start {
    0% {
        opacity: 0;
        transform: translateY(2vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0vh);
    }
}

.startanim {
    background-position-y: center;
    animation: anim1 ease-out forwards;
    animation-duration: 1s;
}
@keyframes anim1 {
    0% {
        background-position-x: left;
    }

    100% {
        background-position-x: center;
    }
}

.startanim2 {
    animation: anim2 ease-out forwards;
    animation-duration: 0.5s;
}
@keyframes anim2 {
    0% {
        opacity: 0;
        transform: translateY(-2vh);
    }

    100% {
        opacity: 1;
        transform: translateY(0vh);
    }
}

.startanim3 {
    animation: anim3 ease-out;
    animation-duration: 0.5s;
}
@keyframes anim3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.osnblockanim{
    animation: anim4 linear;
    animation-timeline: view();
    animation-range: entry 100% exit 100%;
}
@keyframes anim4 {
    0% {
        height: calc(100dvh - 13px);
    }
    100% {
        height: 270px;
    }
}

.uslov{
    width: 890px;
    margin-left: auto;
    margin-right: auto;
}

.button {
    background-color: #007a00;
    border-color: #005f00;
    transition: 0.15s all linear;
}
.button:hover {
    background-color: #006600;
}

.ssilk {
    font-size: 16.5px;
    padding: 0px 10px 0px 0px;
    color: #EDEDED;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}