* {
    box-sizing: border-box;
}

button, input {
    font-family: "Unbounded", sans-serif;
}

body {
    width: 100%;
    margin: 0;
    font-family: "Unbounded", sans-serif;
}

.wrapper {
    background-color: #0a0a0a;
    width: 100%;
    height: 900px;
    padding: 50px 220px 0 220px;
    color: #fff;
    background-image: url(/main_repos/main_img/element.png);
    background-repeat: space;
}

.main_wrapper {
    position: absolute;
}

header {
    display: flex;
    /* background-color: #000000; */
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0;
}

.logo h1{
    font-size: 40px;
    line-height: 0px;
}

.navigation {
    width: 500px;
    min-width: 400px;
    display: flex;
    justify-content: space-around;
    position: relative;
    padding: 0 0 3px 40px;
    font-size: 18px;
}

.navigation a {
    text-decoration: none;
    padding: 5px;
    position: relative;
}

.navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: #fff;
    transition: width 0.3s ease;
}

.navigation a:hover::after {
    width: 100%;
}

.navigation a:-webkit-any-link {
    color: #fff;
    /* text-decoration: ; */
}

.navigation a:link, .navigation a:active {
    color: #fff;
}

.header_search {
    /* position: relative; */

    display: flex;
    justify-content: space-around;
    margin: 0 0 0 200px;
}

.header_search input {
    background-color: #0c0c0cef;
    border: 1px solid #515151ef;
    width: 250px;
    height: 60px;
    padding: 10px;
    border-radius: 13px;
    color: #fff;
    font-size: 18px;
    padding: 0 0 0 20px;
}

.header_search input:focus {
    outline: 1px solid #686868;
}

.profile {
    padding: 0 10px 0 20px;
}

.profile button {
    width: 60px;
    height: 60px;
    border-radius: 13px;
    background-color: #0c0c0cef;
    border: 1px solid #515151ef;
    transition: transform 0.1s ease;
}

.profile button:active {
    transform: scale(95%);
    outline: 1px solid #818181;
}

main {
    margin: 80px 0 0 0;
}

.title h2 {
    font-size: 30px;
}

.content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-template-rows: repeat(1, 1fr);
}

.content_cell {
    /* background-color: #ccc; */
    /* background-color: rgba(185, 185, 185, 1); */
    background: linear-gradient(180deg, rgb(98, 98, 98) 0%, rgb(62, 62, 102) 50%, rgb(25, 28, 44) 100%);
    color: #000;
    width: auto;
    max-width: 400px;
    min-width: 200px;
    height: 180px;
    border-radius: 20px;
    font-size: 24px;
    padding: 15px;
}

.cell_discribe {
    
    font-size: 16px;
    padding: 0 0 0 0;
    margin-bottom: 0;
    color: #aaaaaa;
    text-transform: lowercase;
    max-width: 80%;
}

.cell_button {
    display: flex;
    justify-content: flex-end;
    margin: 20px 10px 0px 0;
}

.cell_button_2 {
    display: flex;
    justify-content: flex-end;
    margin: 0px 10px 20px 0;
}

.cell_button button, .cell_button_2 button {
    cursor: pointer;
    padding: 15px 40px 15px 30px;
    border-radius: 13px;
    font-size: 18px;
    font-weight: 300;
    background: radial-gradient(#7b7b9d6d 10%, #36304f);
    /* backdrop-filter: blur(10px); */
    transition: 0.5s ease;
    border-style: none;
    outline: 2px solid #272727;
}

.cell_button button a:-webkit-any-link, .cell_button_2 button a:-webkit-any-link {
    color: #000;
    text-decoration: none;
}

.cell_button button:hover , .cell_button_2 button:hover {
    transform: scale(103%);
    background-color: #8270d5;
}

.cell_button button img, .cell_button_2 button img {
    position: absolute;
    margin: 3px 0 0 5px;
    height: 18px;
}

.grid_line {
    display: grid;
    grid-template-columns: 47.5% 5% 47.5%;
    grid-template-rows: repeat(1, 1px);
    margin: 15px 10px;
}

.first_line {
    margin: 15px 0 0 0;
    border: 1px solid #737373;
}

.second_line {
    margin: 15px 0 0 0;
    border: 1px solid #737373;
}

.show_button {
    display: inline-flex;
    justify-content: center;
}

.show_button button {
    width: 60px;
    height: 20px;
    background-color: #00000000;
    border-style: none;
}

.show_button button img{
    width: 30px;
    margin: 0px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.show_button button:hover img {
    transform: scale(110%);
}