@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');



.basic-grid h1 {
    padding: 20px 25px;
    text-align: center;
}

.basic-grid h2 {
    font-size: 24px;
    visibility: hidden;
}

.section-title {
    font-size: 36px;
    margin-bottom: 20px;
    grid-column: span 4;
    text-align: center;
}

.card.prox {
    background-image: url('html/hompage images/prox.png');
}

.card.office {
    background-image: url('html/hompage images/office.png');
}

.card.nas {
    background-image: url('html/hompage images/nas.png');
}

.card.code {
    background-image: url('html/hompage images/visual-studio-code-logo.png');
}

.card.router {
    background-image: url('html/hompage images/telus.png');
}

.card.Nextcloud {
    background-image: url('html/hompage images/Nextcloud_Logo.svg.png');
}

.card.cloudflare {
    background-image: url('html/hompage images/Cloudflare-Logo.wine.png');
}

.card.tailscale {
    background-image: url('html/hompage images/tail.jpeg');
}

.card.dell {
    background-image: url('html/hompage images/dell.png');
}

.card {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(57, 52, 67, 0.35);
    font-size: 3rem;
    color: #fff;
    box-shadow: 0 0.15rem 0.5rem rgba(3, 8, 20, 0.1), 0 0.075rem 0.175rem rgba(2, 8, 20, 0.1);
    border-radius: 4px;
    transition: all 500ms;
    overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.card:hover {
    box-shadow: 0 0.35em 1.175em rgba(2, 8, 20, 0.1), 0 0.175em 0.5em rgba(2, 8, 20, 0.08);
    transform: translateY(-3px) scale(1.1);
    background: #181818;
}

.card:hover h2 {
    visibility: visible;
}

.basic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2rem;
    margin-bottom: 200px;
    margin-top: 100px;
}

.basic-grid-container {
    display: flex;
    justify-content: center;
}