body {
    margin: 0;
    background: #131313;
    color: #ffffff;
}
hr {
    width: 100%;
    color: #333;
    height: 1px;
}
a {
    text-decoration: none;
    color: currentColor;
}
a:hover {
    text-decoration: none;
    color: currentColor;
}
#main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    height: min-content;
    border-radius: 2.5em;
    margin: 1.5em 20% 1.5em 20%;
    background: #1F2937;
}
#header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: right;
    direction: rtl;
    width: 100%;
    height: 5em;
    /* background: rgba(255, 255, 255, .05) !important; */
}
#header > img {
    width: 4em;
    height: 4em;
    border-radius: 100%;
    margin: 1em 3.5em 1em 1em;
}
#header > span {
    font-size: 1.5em;
    font-family: "Vazirmatn";
    font-weight: 900;
    margin-top: 1.25em;
}

#main-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: min-content;
}
#caption {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    line-height: 200%;
    width: 100%;
    height: min-content;
}
#caption > span {
    width: max-content;
    height: min-content;
    direction: rtl;
    text-align: right;
    font-size: 1.15em;
    font-family: "Vazirmatn";
    width: 80%;
    margin: .75em 10% .75em 10%;
}

#langs {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: right;
    direction: rtl;
    text-align: right;
    width: 100%;
    height: min-content;
}
#langs-title {
    font-size: 1.25em;
    font-family: "Vazirmatn";
    font-weight: 900;
    margin: .75em 1.5em 0 0;
    width: 100%;
}
.langs-item {
    /* display: flex; */
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: right;
    direction: rtl;
    width: 100%;
    height: min-content;
    margin: .65em 5% .65em 5%;
}
.langs-item > svg {
    width: 2em;
    height: 2em;
}
.langs-item > span {
    font-size: 1.15em;
    line-height: 200%;
    font-family: "Vazirmatn";
    direction: rtl;
    text-align: right;
    margin: .25em .5em 0 0;
}

#links {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: right;
    direction: rtl;
    width: 100%;
    height: min-content;
}
.links-item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: right;
    text-align: right;
    direction: rtl;
    width: 40%;
    height: min-content;
    margin: .25em 5% .25em 5%;
    padding: .75em 5% .75em 5%;
    border-radius: .75em;
    cursor: pointer;
}
.links-item > svg {
    width: 1.75em;
    height: 1.75em;
}
.links-item > span {
    font-size: 1.15em;
    font-family: "Vazirmatn";
    direction: rtl;
    margin-right: .5em;
}
.links-item:hover {
    background: rgba(0, 0, 0, .05);
}