html{
    background-image: url('img/фонбумага.jpg');
    width: 100%;
}
.anon{
    font-family: "Anonymous Pro", monospace;
    font-weight: 400;
    font-style: normal;
}
.brush{
    font-family: "Kolker Brush", cursive;
    font-weight: 400;
    font-style: normal;
}
.caveat{
    font-family: "Caveat", cursive;
    font-weight: 400;
    font-style: normal;
}
.eb{
    font-family: "EB Garamond", serif;
    font-weight: 400;
    font-style: normal;
}
.aleg{
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.bold{
    font-weight: 600;
}
.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-column{
    display: flex;
    flex-direction: column;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}
.text-center{
    text-align: center;
}
.flex-evenly{
    justify-content: space-evenly;
}
.fs-11{
    font-size: 3vw;
}
.fs-12{
    font-size: 3.3vw;
}
.fs-13{
    font-size: 3.6vw;
}
.fs-14{
    font-size: 3.9vw;
}
.fs-16{
    font-size: 4.5vw;
}
.fs-17{
    font-size: 5vw;
}
.fs-19{
    font-size: 5.3vw;
}
.fs-21{
    font-size: 5.8vw;
}
.fs-24{
    font-size: 6.7vw;
}
.w-100{
    width: 100%;
}
.h-100{
    height: 100%;
}
.dear{
    color: rgb(15, 48, 84);
    background-color: rgb(159, 193, 236);
    border-radius: 10vw;
    text-align: center;
    margin-top: -1.2vw;
}
.place{
    color: rgb(212, 42, 113);
    background-color: rgba(126, 178, 245, 0.536);
    border-radius: 10vw;
    padding: 2vw;
    text-align: center;
    width: fit-content;
    height: fit-content;
}
.circle1{
    border-radius: 50%;
    background-color:   rgb(110, 150, 229);
    width: 10vw;
    height: 10vw;
}
.circle2{
    border-radius: 50%;
    background-color:   rgb(242, 183, 214);
    width: 10vw;
    height: 10vw;
}
.circle3{
    border-radius: 50%;
    background-color:   rgb(241, 232, 176);
    width: 10vw;
    height: 10vw;
}
.circle4{
    border-radius: 50%;
    background-color:   rgb(188, 153, 108);
    width: 10vw;
    height: 10vw;
}
.circle5{
    border-radius: 50%;
    background-color:   rgb(185, 146, 234);
    width: 10vw;
    height: 10vw;
}

form.anon input[type="text"]{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 3vw;
    line-height: 3vw;
    padding: 0.8vw 2vw;
    border-radius: 8vw;
    border: 0.3vw solid rgba(224, 88, 181, 0.8);
    background-color: rgba(255, 255, 255, 0.9);
    color: rgb(35, 96, 177);
    width: 70%;
    max-width: 80vw;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form.anon input[type="text"]:focus{
    border-color: rgb(35, 96, 177);
    box-shadow: 0 0 0.5vw rgba(35, 96, 177, 0.5);
}

form.anon input[type="radio"]{
    appearance: none;
    width: 3vw;
    height: 3vw;
    border: 0.2vw solid rgba(224, 88, 181, 0.9);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    margin-right: 1vw;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

form.anon input[type="radio"]::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.3vw;
    height: 1.3vw;
    border-radius: 50%;
    background-color: rgb(35, 96, 177);
    opacity: 0;
    transition: opacity 0.2s ease;
}

form.anon input[type="radio"]:checked{
    border-color: rgb(35, 96, 177);
    background-color: rgba(35, 96, 177, 0.2);
}

form.anon input[type="radio"]:checked::after{
    opacity: 1;
}

form.anon label{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 3vw;
    color: rgb(35, 96, 177);
}