html {
    font-family: cursive;
    background-image: url(Фон.png);
    background-position: top;
    color: rgb(44, 30, 21);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(30, 41, 59);
}
button {
    font-family: cursive;
    border: transparent solid 2px;
    background-color: transparent;
    border-radius: 10px;
    width: 100px;
}
#company {
    justify-self: start;
    color: rgb(253, 251, 247);
}
@keyframes mainAnim {
    100% {transform: translateX(10px); };
}
@keyframes aboutAnim {
    100% {transform: translateX(112.5px); };
}
@keyframes worksAnim {
    100% {transform: translateX(220px); };
}
@keyframes withmeAnim {
    100% {transform: translateX(325px); };
}
@keyframes close {
    100% {transform: translate(5px, 120px); opacity: 0;}
}
@keyframes open {
    0% {transform: translate(5px, 120px); opacity: 0;}
    100% {transform: translate(5px, 150px); opacity: 1;}
}
button:hover {
    font-family: cursive;
    border: transparent solid 2px;
    background-color: transparent;
    border-radius: 10px;
    cursor: pointer;
}
#preim {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translateX(-5px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#how {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 20px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#withmeButton {
    width: 200px;
    background-color: rgb(163, 111, 76);
    height: 50px;
    transition: background-color 0.25s;
}
#withmeButton:hover {
    background-color: rgb(134, 87, 55);
}
#showWorks {
    width: 200px;
    background-color: rgb(163, 111, 76);
    height: 50px;
    transition: background-color 0.25s;
}
#showWorks:hover {
    background-color: rgb(134, 87, 55);
}
#MainPage {
    transform: translate(5px, 150px);
    z-index: -1;
    flex: 1 0 auto;
    animation: open 1s forwards;
}
#withmePage {
    transform: translate(5px, 150px);
    z-index: -1;
    flex: 1 0 auto;
    animation: open 1s forwards;
}
#worksPage {
    transform: translate(5px, 150px);
    z-index: -1;
    flex: 1 0 auto;
    animation: open 1s forwards;
}
#aboutPage {
    transform: translate(5px, 150px);
    z-index: -1;
    flex: 1 0 auto;
    animation: open 1s forwards;
}
#contacts {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 20px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#plan {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 20px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#timeRegion {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 40px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#selected {
    width: 80px;
    height: 2px;
    background-color: rgb(163, 111, 76);
    position: absolute;
    transform: translateX(10px);
}
nav {
    position: fixed;
    background: -webkit-linear-gradient(270deg, rgb(253, 251, 247), transparent);
    height: 225px;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 10000;
}
footer {
    color: rgb(253, 251, 247);
    transform: translate(-13px, 20px);
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(30, 41, 59);
    width: 100%;
    margin: 0;
    font-size: 12px;
    text-anchor: middle;
    height: 100px;
    text-align: center;
}
#pad {
    height: 150px;
}
a {
    color: rgb(0, 195, 255);
}
img{
    border-radius: 10px;
    width: 300px;
}
#lustra {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 40px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#budki {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 50px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#cormushki {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 60px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#bed {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 70px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#lestnica {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 80px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
#banka {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 90px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
textarea {
    resize: none;
    outline: 0px;
    border-radius: 10px;
    border-color: transparent;
    width: 100%;
}
#write {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 90px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
    overflow: hidden;
}
#selector {
    background-color: rgb(163, 111, 76);
    height: 50px;
    transition: background-color 0.25s;
    border-radius: 10px;
    color: none;
    overflow: hidden;
    timeline-trigger-exit-range-end: none;
}
#send {
    background-color: rgb(163, 111, 76);
    height: 50px;
    transition: background-color 0.25s;
}
#feedbacks {
    background-color: rgb(253, 251, 247, 0.87);
    transform: translate(-5px, 100px);
    border-radius: 10px;
    padding: 30px 30px 30px 30px;
}
@media (max-width: 480px) {
    button {
        width: 50px;
        font-size: 7.5px;
    }
    #selected {
        width: 30px;
    }
    h1 {
        font-size: 20px;
    }
    h2 {
        font-size: 17.5px;
    }
    h3 {
        font-size: 15px;
    }
    h4 {
        font-size: 12.5px;
    }
    h5 {
        font-size: 10px;
    }
    @keyframes mainAnim {
        100% {transform: translateX(12.5px); };
    }
    @keyframes aboutAnim {
        100% {transform: translateX(65px); };
    }
    @keyframes worksAnim {
        100% {transform: translateX(120px); };
    }
    @keyframes withmeAnim {
        100% {transform: translateX(180px); };
    }
        #withmeButton {
        width: 100px;
        background-color: rgb(163, 111, 76);
        height: 50px;
        transition: background-color 0.25s;
    }
    #showWorks {
        width: 100px;
        background-color: rgb(163, 111, 76);
        height: 50px;
        transition: background-color 0.25s;
    }
    img{
        border-radius: 10px;
        width: 100px;
    }
}