@font-face {
    font-family: 'JetBrainsMono-Regular';
    src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono-Bold';
    src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono-Italic';
    src: url('../assets/fonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono-BoldItalic';
    src: url('../assets/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono-ExtraBold';
    src: url("../assets/fonts/JetBrainsMono-ExtraBold.woff2") format('woff2');
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono-ExtraBoldItalic';
    src: url("../assets/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format('woff2');
    font-weight: bolder;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono-Light';
    src: url("../assets/fonts/JetBrainsMono-Light.woff2") format('woff2');
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono-LightItalic';
    src: url("../assets/fonts/JetBrainsMono-LightItalic.woff2") format('woff2');
    font-weight: light;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono-Medium';
    src: url("../assets/fonts/JetBrainsMono-Medium.woff2") format('woff2');
    font-weight: medium;
    font-style: normal;
}

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
}

#header h1 {
    font-size: 5vw;
    font-family: 'JetBrainsMono-BoldItalic', monospace;
    color: white;
    margin: 0px;
}

body {
    background-color: #000000;
    color: #ffffff;
    font-family: 'JetBrainsMono-Regular', monospace;
}

#title-box {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Adjust as needed */
    padding: 15px; /* Adjust as needed */
}

#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
}

#title-phrase {
    background-color: rgba(255, 255, 255, 0.7); /* white with 70% opacity */
    border-radius: 10px; /* adjust as needed */
    color: black;
    padding: 10px; /* adjust as needed */
    margin: 15px; /* adjust as needed */
}

#title-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    padding: 10px;
}

#title-phrase h1 {
    font-family: 'JetBrainsMono-Light', monospace;
    font-size: 4vw;
}

#mo{
    border: black 15px solid;
}

#title-blurb {
    font-size: 2.7vw;
    background-color: black;
    border-radius: 10px; /* adjust as needed */
    color: white;
    padding: 10px; /* adjust as needed */
    margin: 15px; /* adjust as needed */
}

#service-overview {
    background-color: black;
    border-radius: 10px; /* adjust as needed */
    color: white;
    padding: 10px; /* adjust as needed */
    /*margin: 15px;  adjust as needed */
    margin-top: 15px;
    margin-bottom: 15px;
}

#about-us {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    padding: 15px;
    font-size: 2vw;;
}

#about-us h1{
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 5vw;
    color: black;
}

#bgvid-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
}

#contact-form input{
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 10px;
}
#contact-form textarea{
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5vw;
    width: 100%;
    height: 8vw;
}

#contact-form input{
    background-color: white;
    padding: 6px;
    font: 2vw 'JetBrainsMono-ExtraBold', monospace;
    width: 100%;
}

#about-blurb {
    background-color: rgba(255, 255, 255, 0.7); 
    border-radius: 10px; 
    color: black;
    padding: 10px; 
    font-size: 2.5vw;
}

.contactus {
    background-color: black;
    padding: 3vw;;
    border-radius: 15px;
}

#footer {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    line-height: 1.2; 
    min-height: 20px; 
    max-height: 30px; 
}

#footer a{
    color: white;
}

#service-email h2{
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 6vw;
    color: white;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    align-content: left;
}

.service-overview-grid {
    border: 3px solid white;
    border-radius: 15px;
    padding: 10px;
}

.service-overview-grid p {
    font-size: 20px; 
}

#service-email {
    background-color: black;
    display: grid;
    grid-template-columns: 0fr 2fr 3fr;
    font-size: 1.7vw;
    grid-gap: 10px;
    margin-left: -5vw;
    padding-bottom: 15px;
}

#service-email a{
    color: white;
}

#email-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

#email-options div {
    border: 3px solid white;
    border-radius: 15px;
    padding: 10px;
}

#email-options p{
    font-size: 1.2vw;
}

#email-bottom {
    font-size: 1.3vw;
}

#service-email h3 {
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 2.7vw;
}

#service-website {
    background-color: white;
    border-radius: 15px;
    color: black;
    padding: 10px;
    margin-left: -6vw;
    display: grid;
    grid-template-columns: 0fr 1fr 1fr;
    grid-gap: 3vw;
    font-size: 1.7vw;
}

#web-bottom-text {
    font-size: 1.4vw;
}

#web-box {
    border: 3px solid black;
    border-radius: 15px;
    padding: 10px;
}

#web-box p {
    font-size: 1.3vw;
}

#service-website h3{
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 2.7vw;
    color: black;
    align-content: center
}

#service-website h2{
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 6vw;
    color: black;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    align-content: left;
}

#service-website a{
    color: black;
}

#service-network {
    background-color: black;
    padding: 10px;
    margin-left: -6vw;
    display: grid;
    grid-template-columns: 0fr 1fr 1fr 1fr;
    grid-gap: 1vw;
    font-size: 1.7vw;
}

#service-network h3{
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 2.7vw;
    color: white;
}

#service-network h2{
    font-family: 'JetBrainsMono-Bold', monospace;
    font-size: 6vw;
    color: white;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    align-content: left;
}

#service-network a{
    color: white;
}

html {
    scroll-behavior: smooth;
}

@media screen and (max-width: 900px) {
    #title-content {
        display: grid;
        grid-template-columns: 1fr;
    }

    #about-us {
        display: grid;
        grid-template-columns: 1fr;
        font-size: 3vw;
    }

    #footer {
        font-size: 2vw;
    }

}