@font-face {
    font-family: 'futura';
    src: url('futuralightc.woff2') format('woff2'),
    url('futuralightc.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Rising Sun';
    src: url('RisingSun-Light.woff2') format('woff2'),
        url('RisingSun-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
body {
    background-color:rgb(251, 247, 247);
}
.block {
    width: 80%;
    margin: auto;
    text-align: center;
}
@media (max-width: 768px) {
    .block {
        width: 100%;
        margin: auto;
        text-align: center;
        justify-content: center;
    }
}
.content {
    margin: 2%;
    padding: 2%;
    background-color:rgb(255, 255, 255);
    box-shadow:  0 0 15px 3px rgba(181, 181, 177, 0.6);
    border-radius: 15px;
    font-family: 'Rising Sun';
    font-size: medium;
    color: rgb(93, 95, 106);
}
.content img {
    display: block;
    max-width: 70%;
    margin: auto;
}


.test-form {
    display: block;
    width: 90%;
    margin: auto;
}
.variant {
    display: block;
    width: auto;
    font-family: 'Rising Sun';
    font-size: medium;
    margin: 3%;
    padding: 2%;
    border-radius: 15px;
    box-shadow:  0 0 10px 2px rgba(181, 181, 177, 0.6);
    color: rgb(93, 95, 106);
    text-align: left;
    transition: transform 1s, box-shadow 1s;
    border: unset;
}
.variant:hover {
    transform: scale(1.01, 1.01);
    box-shadow: 0 0 25px 2px rgba(197, 197, 193, 0.6);
}


.yes-no-form {
    display: flex;
    margin: auto;
}
.yes-no-form .variant {
    display: flex;
    margin: 5% auto;
    padding: 3%;
    width: 30%;
    transition: width 1.25s, transform 1.25s, box-shadow 1.25s;
}
.yes-no-form .variant:hover {
    width: 40%;
}
.variant.yes {
    margin-right: 1%;
}
.variant.yes:hover {
    box-shadow: 0 0 20px 1px rgb(178, 255, 176);
}
.variant.no {
    margin-left: 1%;
}
.variant.no:hover {
    box-shadow: 0 0 20px 2px rgb(255, 207, 191);
}


select:focus {
    outline: unset;
}
input[type=number]:focus {
    outline: unset;
}
input[type=file] {
    margin: 5%;
    margin-bottom: 0%;
    display: inline;
    font-family: 'Rising Sun';
    font-size: medium;
    text-decoration: none;
    position: relative;
    color: rgb(93, 95, 106);
    text-align: center;
}
input::file-selector-button {
    display: none;
}


.button {
    display: inline-block;
    text-decoration: none;
    font-family: "futura";
    font-size: x-large;
    color: white;
    background-color: rgb(216, 210, 209);
    margin-top: 5%;
    margin-bottom: 2%;
    padding: 10px;
    border: unset;
    border-radius: 15px;
    transition: transform 1.5s, box-shadow 1s, background-color 1s;
}
.button:hover {
    background-color: rgb(216, 209, 209);
    box-shadow: rgb(239, 236, 230) 0 3px 7px 3px;
    font-weight: bolder;
    transform: scale(1.05, 1.05);
}
.button.green {
    background-color: rgb(64, 225, 145);
}
.button.green:hover {
    background-color: rgb(89, 242, 130);
    box-shadow: rgb(197, 255, 210) 0 3px 7px 5px;
}
.button.red {
    background-color: rgb(239, 138, 156);
}
.button.red:hover {
    background-color: rgb(255, 102, 94);
    box-shadow: rgb(255, 210, 208) 0 3px 7px 5px;
}
.button.minor {
    text-align: center;
    display: block;
    color: rgb(93, 95, 106);
    background-color: rgb(248, 248, 248);
    box-shadow: 1px 2px 2px 1px rgba(226, 226, 224, 0.6) inset;
    transition: transform 1.0s, box-shadow 1s, background-color 1s;
}
.button.minor:hover {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 10px 2px rgba(197, 197, 193, 0.6);
    font-weight: normal;
    transform: scale(1.01, 1.01);
}