@font-face {
    font-family: GoogleSans;
    src: url(assets/fonts/GoogleSans-Regular.woff2);
    font-weight: 400;
}

@font-face {
    font-family: GoogleSans;
    src: url(assets/fonts/GoogleSans-Medium.woff2);
    font-weight: 500;
}

@font-face {
    font-family: GoogleSans;
    src: url(assets/fonts/GoogleSans-Bold.woff2);
    font-weight: 700;
}

:root {
    --background: #212121;
    --color: #fff;
    --surface: #323232;
}

body {
    margin: 0 auto;
    background-color: var(--background);
    color: var(--color);
    font-family: GoogleSans, Roboto, Arial, Helvetica, sans-serif;
}

h1 {
    text-align: center;
    color: var(--color);
    margin: 50px 0 50px 0;
    font-size: 3rem;
}

.card-container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
}

.card-container div {
    color: var(--color);
    background-color: var(--surface);
    width: min(360px, 90vw);
    margin: 16px;
    border-radius: 16px;
    padding: 8px 32px 8px 32px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.25);
    transition:
        box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
        background-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-container div h2 {
    width: 100%;
    text-align: center;
}

.card-container div b {
    color: #aaa;
}

.card-container div p {
    margin: 0;
    margin-bottom: 16px;
}

.card-container a {
    text-decoration: none;
    color: var(--color);
    background-color: var(--surface);
    width: 320px;
    height: 240px;
    margin: 16px;
    border-radius: 16px;
    padding: 16px 32px 8px 32px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.25);
    transition:
        box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
        background-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.card-container a:focus,
.card-container a:active {
    text-decoration: none;
    color: var(--color);
}

.card-container a:hover {
    background: #505050;
    box-shadow:
        0 4px 8px rgba(10, 10, 10, 0.40),
        0 12px 28px rgba(10, 10, 10, 0.30);
}

.card-container a img {
    width: 72px;
    height: 72px;
}

.card-container a h2 {
    margin: 0;
    margin-top: 12px;
    font-size: 20px;
}

.card-container a p {
    margin: 0;
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
}

.circle-logo {
    border-radius: 50%;
}

.circle-logo-background {
    padding: 12px;
    box-sizing: border-box;
    background-color: white;
}

#matrix-logo {
    background-color: white;
}

.bombsquad-card {
    background-color: #434343!important;
    background-image: url('assets/img/bombsquad.png');
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
}

.rustdesk-card {
    background-color: #323232!important;
    background-image: url('assets/img/rustdesk.png');
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
}

.bordered-p {
    background-color: transparent;
    color: var(--color);
    border-radius: 8px;
    border: 0.5px solid #aaa;
    padding: 8px;
    margin-top: 8px!important;
    word-wrap: break-word;
}

@media (max-width: 1200px) {
    .card-container {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 768px) {
    .card-container {
        grid-template-columns: auto;
    }
}