:root {
    --background: #ebe0ea;
    --color1: #121b3b;
    --color2: #1a65bc;
    --color3: #ebe0ea;
    --color4: #c05bb6;
    --color3trans: #0fb2ebe6;
}

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}

/* hero section styles */

.hero {
    min-height: 70vh;
    background: url(./img/computer_midjourney.png) no-repeat center top;
    background-size: cover;
    color: var(--color3);
    text-align: center;
    display: flex;
    justify-content: center;
}

.hero-content {
    flex: 1;
    max-width: 80%;
    text-wrap: wrap;
    text-align: left;
    padding-left: 600px; /* not sure best way to do this */
    padding-right: 200px;
}

.hero-content h1 {
    font-size: 3.5em;
    /* text-align: left; */
    padding: 90px 20px 20px 0px;
    line-height: 1;
}

.hero-content span:first-child {
    font-size: 1.1em;
    color: var(--color4);
}

.hero-content span:last-child {
    font-size: 1.2em;
    color: var(--color3trans);
}

.hero-content p {
    font-size: 1.2em;
}

/* Blog Styles */
.blog {
    padding: 50px 200px;
    background: var(--color3);
    color: var(--color1);
}

.blog h2 {
    font-size: 2.0em;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 2px 2px var(--color3trans);
}

.blog h4 {
    margin: 10px 0 10px 0;
}

.blog p {
    margin-bottom: 10px;
}


/* Responsive Styles */
@media all and (max-width: 700px) {
    .hero-content {
        padding: 50px;
    }
}