invesvpo/styles/Index.module.css

/* page specific overwrites css */
.page h1 {
    font-size: var(--font-xl);
}

.page h3 {
    font-size: var(--font-lg);
    font-weight: normal;
}


/* page layout */

.topcontent {
    width: var(--page-width);
    margin: 0 auto;
}

.topcontainerbackg {
    height: 40vh;
    background-color: #2940D3;

    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
}

.topcontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    color: white;
    background-image: url('/gun.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

.topcontainer h1 {
    margin: unset;
}

.topcontainer p {
    opacity: 50%;
    margin-top: - var(--padding-sm);
}

.bottomcontainer {
    height: 60vh;
    background-color: #232323;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    color: white;
    padding-bottom: var(--padding);
}

.leftsidetint {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 10vw;
    height: 100vh;
    background-color: #1a1a1a;
}


/* items */

.links div {
    flex-wrap: wrap;
    font-size: 1.5em;
    flex-grow: 1;
    display: grid;
    grid-template-columns: 25% 25% 25%;
    gap: var(--padding-lg);
    justify-content: start;
    align-items: center;
}

.links div a {
    text-align: center;
    padding: var(--padding) var(--padding-lg) var(--padding) var(--padding-xl);
    transition-duration: var(--transition-speed);
    background-color: #2940D3;

    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
}

.links div p {
    margin: unset;
}

.links div a span {
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);  
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.links div a:hover {
    transition-duration: 0.3s;
    background-color: #1f309e;
}


/* mobile responsivity */

@media (max-aspect-ratio: 1/1) {
    .topcontent {
        width: 100%;
        padding: var(--padding);
    }

    .links a {
        padding: 0 var(--padding-lg);
    }

    .page h1 {
        font-size: var(--font-lg);
    }

    .page h3 {
        font-size: var(--font-lg);
        font-weight: normal;
    }

    .links div {
        font-size: var(--font);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-aspect-ratio: 5/3) {
    .leftsidetint {
        display: none;
    }
}