/* This is SiteWide Properties*/
html 
{
    overscroll-behavior: none; 
}

body
{
    --font-family: 'Manrope';
}

label 
{
    font-size: 1rem; 
}

a:hover 
{
    color: #5a41c9;
}

a 
{
    text-transform: none; 
    text-decoration: none;
    color: #ffff; 
}

input, textarea 
{
    display: block;
    width: 100%; 
    border: 1px solid darkgray; 
    border-radius: 2px;
}


/* Header Section */
header
{
    background-image: linear-gradient(to right bottom, #0d0630, #0d072e, #0d072b, #0d0829, #0d0826, #0e0827, #0e0929, #0f092a, #100a2f, #110b34, #120b38, #140b3d);
    color:  #ffffff;
}

.header-wrapper 
{
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

.logo-container
{
    width: 40%; 
}

.logo-grid
{
    display: flex; 
    flex-direction: row;
    align-items: center;
    width: 100%; 
}

.logo-wrapper
{
    display: flex; 
    flex-direction: column;
    align-items: center;
    width: 100%; 
}

.logo
{
    user-select: none;
    padding: 2px; 
}

.logo-name
{
    font-size: 1rem;
    font-weight: 700;
    color:#ffffff;
    pointer-events: none;
    user-select: none;
    padding: 2px; 
    margin: 4px 0; 
}

.nav-container 
{
    width: 60%; 
}

.nav-wrapper
{
    display: flex; 
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin: 0 4px;
    font-size: 1rem;
    font-weight: 500;
}

.nav-item
{
    padding: 10px; 
}

/* Homepage CSS */ 
.home-main
{
    background-image:url('/images/circuit.png');
}

.home-wrapper
{
    background: linear-gradient(90deg, hsl(252.52deg 29.18% 8.65% / 93%) 0%, hsl(263.6deg 77.65% 30.67% / 86%) 100%);
}

.home-content
{
    padding: 40px 4px 10px 4px;
    text-align: center; 
}

.home-content h1
{
    font-size: 24pt;
    color:#fff;
    padding: 20px 2px; 
    font-weight:900;
    text-transform:uppercase;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(177deg, rgb(160 160 225) 20%, rgb(59 30 189 / 86%) 80%);   
}


.home-content p
{
    font-size: 20pt;
    padding: 10px 10px; 
    color:#fff;
    font-weight:500;
}

.home-image
{
    width: 100%; 
    padding: 20px 9px 0 8px;   
}

.home-image img
{
    width: 100%;
    padding: 0;  
}


/* Portfolio Page */
.portfolio-main 
{
    background-color: rgb(248, 248, 167);
    padding: 100px 0 100px 0;  

}

.portfolio-inner
{
    padding: 100px 0 100px 0; 
    text-align: center;  

}

.portfolio-positioning 
{
    width: 100%; 
    padding: 100px 0 100px 0; 
    background-color: green;
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
}

.portfolio-card h1, p
{
    color: hsla(264, 73%, 60%, 0.86); 
}

.portfolio-card h1
{
    font-size: 40px;
    font-weight: bold; 
    text-transform: uppercase; 
}

.portfolio-card p
{
    font-size: 32px;
    font-style: italic; 
}

.positioning-card 
{
    height: 300px; 
    width: 200px;
    padding: 2px;  
    background-color: gray; 
}


/* Blog Page */
.blog-page 
{
    background-image: url('/images/blog-bg.jpeg');
}

.blog-hero
{
    background-image:url('/images/circuit.png');
}

.blog-hero_wrapper
{
    background: linear-gradient(90deg, hsl(252.52deg 29.18% 8.65% / 93%) 0%, hsl(263.6deg 77.65% 30.67% / 86%) 100%);
}

.blog-hero_content
{
    color:#ffffff;
    background: linear-gradient(177deg, rgb(160 160 225) 20%, rgb(59 30 189 / 86%) 80%);   
    -webkit-text-fill-color: transparent; 
    font-weight: 900;
    background-clip: text;
    text-transform: uppercase;
    padding: 1rem 1rem 1rem 2.5rem; 
}

.blog-hero_content h1 
{
    line-height: 18pt; 
    font-size: 17pt;
    padding: 3px; 
}

.blog-main
{
    padding: 1rem 1rem;
    background: #5D2E9B;  
}

.blog-main_wrapper 
{
    display: flex;
    flex-flow: column nowrap; 
}

.blog-nav
{
    border: 1px solid lightgray;
}

.blog-nav_wrapper h2, .blog-nav_wrapper li
{
    color: #ffffff; 
}

.blog-content 
{
    padding: 1rem 1rem; 
}

.blog-content_wrapper
{
    display: flex;
    flex-direction: column;
    position: relative;
}

.blog-card-link 
{
    color: rgb(30, 27, 27);  
}
.blog-card-link:hover
{
    text-transform: none;
} 

.blog-card
{
    border-radius: 6px;
    margin: 5px 2px; 
    outline: none;
    border: 1px solid rgb(136, 131, 131);
    box-sizing: border-box;
    background: #ffffff;    
    cursor: pointer;
    padding-bottom: 4px;
    pointer-events: none;
}

.blog-card_image
{
    border-radius: 4px;
}

.blog-card_image img 
{
    width: 100%; 
}

.blog-card_header h2
{
    padding: 4px 2px; 
    font-size: 1rem;
    color: rgb(30, 27, 27);  
}

.blog-card_content p
{
    padding: 4px 2px; 
    font-size: 14px; 
    color:  #5D2E9B; 
 
}

.blog-card_footer small
{
    display: block; 
    padding: 4px 2px;
    font-size: 12px;  
    color: #E40707; 
}

.article-btn-area 
{
    width: 100%; 
    text-align: center;
    padding: 2rem 2px 2px; 
    grid-row: 2; 
    grid-column: 1 blog-content; 
}

.more-articles-btn
{
    color: rgb(145, 8, 145); 
    border: 1px solid #211365; 
    box-sizing: border-box;
}


/* Contact Page */
.contact-page 
{
    background-image: url('/images/circuit.png');
}

.contact-main 
{
    background-image: linear-gradient(90deg, hsl(252.52deg 29.18% 8.65% / 93%) 0%, hsl(263.6deg 77.65% 30.67% / 86%) 100%);
}

.form-main_container
{
    padding: 100px 10px 100px 10px; 
}

.cform-wrapper 
{
    background-color: #ffffff;
    padding: 20px 10px 30px 10px; 
}

.cform-wrapper h1
{
    font-size: 1.5rem; 
    padding: 10px 0; 
} 

.cform-btn 
{
    background-color: blue; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.5rem;
}

.cform-container
{
    box-sizing: border-box;
    padding: 3px 2px 3px 4px;
    border-radius: 5px;
}

.label-input-wrapper 
{
    padding: 5px 0; 
}


/* Fotter Section */ 
footer
{
    background-image: linear-gradient(to right bottom, #0d0630, #0d072e, #0d072b, #0d0829, #0d0826, #0e0827, #0e0929, #0f092a, #100a2f, #110b34, #120b38, #140b3d);
    color:#fff;
}

.footer-content 
{
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: center; 
}

.footer-nav nav 
{
    display: flex; 
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 1rem; 
}

.footer-nav-item 
{
    padding: 3px 3px; 
}

.copywrite 
{
    color: #ffff; 
}

/* Breakpoint at 1000px */
@media only screen and (min-width: 1000px){
    .header-wrapper {
        max-width: 1440px; 
        margin: auto; 
    }
    .home-content_container {
        max-width: 1440px; 
        margin: auto; 
    }
    
    .home-content_wrapper {
        display: flex; 
        flex-flow: row nowrap;
    }

    .home-content {
        align-self: center;
        text-align: start;
    }

    .home-content h1 {
        font-size: 48pt; 
    }

    .home-content p {
        font-size: 32pt; 
    }
    .home-image {
        padding: 80px 20px 0 20px; 
    }

    /* Blog Page */
    .blog-hero_wrapper {
        text-align: center; 
    }
    
    .blog-hero_content {
        width: 1200px; 
        margin: auto; 
        height: 150px; 
        padding: 6rem 1rem 1rem 1rem; 
    }

    .blog-hero_content h1 {
        font-size: 48pt; 
        line-height: 48pt; 
    }
    
    .blog-main_wrapper {
        display: inline-grid; 
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "blog-content" "blog-nav";
        justify-content: center;
        width: 1440px;
        margin: auto;  
    }

    .blog-nav {
        grid-row: 1; 
        grid-column: 2 blog-nav;
        align-self: stretch; 
    }

    .blog-content {
        grid-row: 1;
        grid-column: 1 blog-content; 
        align-self: center; 
    }

    .more-articles-btn {
        grid-row: 2; 
    }

    .blog-content_wrapper {
        display: grid; 
        grid-template-columns: 264px 264px 264px 264px;
        grid-auto-rows: max-content; 
        justify-content: center; 
    }

    /* Contact Page */
    .cform-wrapper {
        width: 450px;
        margin: auto; 
    } 
    

    /* Footer Section */
    .footer-wrapper {
        max-width: 1440px; 
        margin: auto; 
    }

    .footer-nav nav {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
}