* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
    position: relative;
    font-family: "Arial";
    font-size: 16px;
    color: rgb(193 193 166);
}

body {
    background: url("../images/background.png") top center;
}

.main {
    width: 1050px;
    margin: auto;
}

.main > .menu-top ul {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
}

.main > .menu-top ul li a {
    display: block;
    width: 263px;
    height: 64px;
    transition: all 0.2s ease-in-out;
}

.main > .menu-top ul li a.website {
    background: url("../images/btn-website.png"),
        url("../images/btn-website-hover.png");
}
.main > .menu-top ul li a.register {
    background: url("../images/btn-register.png"),
        url("../images/btn-register-hover.png");
}
.main > .menu-top ul li a.download {
    background: url("../images/btn-download.png"),
        url("../images/btn-download-hover.png");
}

.main > .menu-top ul li a.website:hover {
    background: url("../images/btn-website-hover.png");
}
.main > .menu-top ul li a.register:hover {
    background: url("../images/btn-register-hover.png");
}
.main > .menu-top ul li a.download:hover {
    background: url("../images/btn-download-hover.png");
}

.main header {
    height: 695px;
}

.main header .redes {
    position: absolute;
    left: 50px;
    top: 20px;
}

.main header .redes ul li a {
    display: block;
    width: 52px;
    height: 49px;
    transition: all 0.2s ease-in-out;
    margin: 10px 0;
}

.main header .redes ul li a.facebook {
    background: url("../images/icon-f.png"), url("../images/icon-f-hover.png");
}
.main header .redes ul li a.instagram {
    background: url("../images/icon-i.png"), url("../images/icon-i-hover.png");
}
.main header .redes ul li a.whatsapp {
    background: url("../images/icon-w.png"), url("../images/icon-w-hover.png");
}

.main header .redes ul li a.facebook:hover {
    background: url("../images/icon-f-hover.png");
}
.main header .redes ul li a.instagram:hover {
    background: url("../images/icon-i-hover.png");
}
.main header .redes ul li a.whatsapp:hover {
    background: url("../images/icon-w-hover.png");
}

.main header .logo {
    width: 401px;
    height: 404px;
    background: url("../images/logo.png");
    top: 50px;
    margin: auto;
}

.main header .title {
    width: 766px;
    height: 133px;
    margin: auto;
    background: url("../images/title.png");
    margin-top: 79px;
}

.main .informations {
    width: 1016px;
    height: 406px;
    background: url("../images/bg-info.png");
    margin: auto;
    display: flex;
    align-items: start;
}
.main .informations ul {
    left: 26px;
    top: 40px;
}
.main .informations ul li a {
    width: 182px;
    height: 46px;
    transition: all 0.2s ease-in-out;
    margin-bottom: 15px;
    display: block;
}

.main .informations ul li a.button-1 {
    background: url("../images/btn-01.png");
}
.main .informations ul li a.button-2 {
    background: url("../images/btn-02.png");
}
.main .informations ul li a.button-3 {
    background: url("../images/btn-03.png");
}
.main .informations ul li a.button-4 {
    background: url("../images/btn-04.png");
}

.main .informations ul li a:hover,
.main .informations ul li a.active {
    filter: grayscale(80%);
}
.main .informations .descriptions {
    width: 698px;
    top: 60px;
    left: 71px;
}
.main .informations .descriptions div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    position: absolute;
}
.main .informations .descriptions div p {
    padding: 0 0 15px;
}
.main .informations .descriptions div.active {
    visibility: visible;
    opacity: 1;
}

footer {
    text-align: center;
    color: rgb(134, 134, 134);
    padding: 4rem 0;
}

footer p {
    padding: 5px 0;
}