@import './styles/variables';

.App {
  text-align: center;
  padding: $spacer / 2;
}

h1, h2 {
    color: $brand-white;
}

.header {
    h1 {
        margin-bottom: $spacer / 2;
    }

    p {
        font-size: $font-size-large;
        color: $brand-white;
        margin: auto;
        max-width: 35rem;
    }

    svg {
        width: 85px;
        height: 85px;
    }
}

.networks {
    display: grid;
    gap: $spacer;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-top: $spacer * 2;
}

.network {
    border: 1px solid $brand-grey-dark;
    padding: $spacer;
    border-radius: $border-radius;
    text-align: left;

    h2 {
        margin-bottom: $spacer / 4;
        margin-top: 0;

        span { color: $brand-grey-light; font-size: $font-size-base; }
    }

    p:last-child {
        margin-bottom: 0;
    }
}

.block {
    a {
        color: $brand-grey-lighter;
    }
}

.status {
    margin-bottom: 0;
}

.success {
    color: $green;
}

.error {
    color: $red;
}

.latency {
    display: inline-block;
    margin-left: $spacer / 4;
    font-size: $font-size-mini;
}

.clientVersion {
    font-size: $font-size-mini;

}