@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

body {
    font-family: 'Space Grotesk';
    position: relative;
    background-color: hsl(0, 0%, 0%);
    color: hsl(255, 100%, 100%);
    cursor: default;
}

button {
    font-family: 'Space Grotesk';
    background-color: hsl(0, 0%, 0%);
    color: hsl(255, 100%, 100%);
    cursor: pointer;
    border: 2px solid hsl(0, 0%, 25%);
}

a {
    text-decoration: none;
}

.main {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    margin-bottom: 50px;
}

.portfolio {
    overflow: hidden;
}

.centered-main {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    margin-bottom: 50px;
}

.video-showcase {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 100px;
    align-items: center;

    .item {
        display: block;
        max-width: 600px;
        margin-left: 20px;

        h1 { margin: 0; }
    }

     &.left {
        justify-content: left;
        text-align: left;
    }

     &.right {
        justify-content: right;
        text-align: right;
    }
}

.centered-container {
    columns: 3;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 100px;

    .vertical-container {
        max-width: 390px;
        justify-content: center;
    }
}

.center-alligned {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 100px;
}

.home-button {
    position: fixed;
    top: 1%;
    right: 1%;
}

.model-buttons {
    display: flex;
    justify-content: left;
    gap: 5px;
}

.external-links {
    display: flex;
    margin-top: 0.75rem;
    border: none;
    justify-content: center;
}

.external-links img {
    max-width: 30px;
    height: auto;
    background: none;
}

.image-column {
    columns: 4;
    gap: 1%;
}

.image-column img {
    width: 100%;
    height: auto;
    margin-bottom: 1%;
}

.certifications img {
    width: 25%
}

.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1%;
    row-gap: 15px;
}

.model-loader {
    font-family: 'Space Grotesk';

    display: none;
    position: absolute;
    list-style: none;
    overflow-y: auto;

    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    max-height: 200px;
    
    width: 100%;
    z-index: 1000;

    color: hsl(0, 0%, 0%);
    background: white;
    border: 1px solid #ccc;
}

.top-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.top-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mainport {
    display: grid;
    grid-template-columns: 1fr 3fr 1.75fr;
    height: 100vh;
    background: linear-gradient(
    to right,
    rgba(8, 8, 8, 0.541) 0% 17.39%,
    rgb(63, 63, 63) 17.39% 69.57%,
    rgb(0, 156, 78) 69.57% 100%
    );
}

.hidden {
    display: none;
}