@font-face
{
    font-family: D-Din;
    src: url(../fonts/D-DIN.otf);
}
@font-face
{
    font-family: D-Din-Bold;
    src: url(../fonts/D-DIN-Bold.otf);
}
* 
{
    box-sizing: border-box;
}
html
{
    scroll-behavior: smooth;
}
body 
{
    margin: 0px;
    font-family: sans-serif;
    background-color: #FFFFFF;
    background-repeat: repeat;
    background-size: auto;
}

/*Font Styling*/
h1
{
    font-family: D-Din-Bold, sans-serif;
    font-style: normal;
}
h2
{
    font-family: D-Din-Bold, sans-serif;
    font-style: normal;
}
h3
{
    font-family: D-Din-Bold, sans-serif;
    font-style: normal;
}
h4
{
    font-family: D-Din-Bold, sans-serif;
    font-style: normal;
}
a
{
    font-family: D-Din-Bold, sans-serif;
    font-style: normal;
}
p
{
    font-family: D-Din, sans-serif;
    font-style: normal;
}
#contact-form,
#contact-form form,
#contact-form label,
#contact-form input,
#contact-form textarea,
#contact-form button 
{
    font-family: D-Din-Bold, sans-serif;
    font-style: normal;
}

/*Navigation*/
#navigation
{
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 1000;
}
#header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1rem;
    border-bottom: 2px solid #000000;
}
#robert-book-design-logo img
{
    height: 50px;
    width: auto;
}
#robert-book-design-logo img:hover
{
    border: 0px solid #000000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#header-title 
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-decoration: none;
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 2rem;
}
#header-title:hover
{
    color: transparent;
    -webkit-text-stroke: 1.5px #DD1212;
    -moz-text-stroke: 1.5px #DD1212;
}
#nav-links 
{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000000;
    font-size: 1.2rem;
}
#nav-links li 
{
    margin-left: 0.5rem;
}
#nav-links a 
{
    text-decoration: none;
    color: #000;
    font-size: 1.2rem;
}
#nav-links a:hover 
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
}
#hamburger 
{
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    -webkit-text-stroke: 0.5px #000000;
    -moz-text-stroke: 0.5px #000000;
    cursor: pointer;
}
#hamburger:hover 
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
}
#mobile-menu 
{
    display: none;
    margin: 0.6rem 0rem 0rem 0rem;
}
#breadcrumb-nav 
{
    padding: 1rem 1rem 1rem 1rem;
    background-color: #ffffff;
    border-bottom: 2px solid #000000;
}
#breadcrumb-nav a 
{
    text-decoration: none;
    color: #000000;
    font-size: 1.2rem;
}
#breadcrumb-nav a:hover 
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
}

/*Homepage (Hero section)*/
#hero
{
    display: flex;
    flex-direction: row;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    height: 50rem;
    width: auto;
    background-color: #FFFFFF;
    scroll-margin-top: 150px;
}
#hero-text
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 6rem;
    height: 100%;
}
#hero-text h3
{
    color: #000000;
    -webkit-text-stroke: 0.5px #000000;
    -moz-text-stroke: 0.5px #000000;
    font-size: 2rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}
#hero-text h1
{
    color: #000000;
    -webkit-text-stroke: 2px #000000;
    -moz-text-stroke: 2px #000000;
    font-size: 7.5rem;
    margin: 5rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}
#hero-text h4
{
    color: #000000;
    font-size: 1.7rem;
    max-width: 700px;
    margin: 2.5rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}
#home-hero-links
{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin: 2.5rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}
.home-cta
{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    font-size: 1.3rem;
    border: 2px solid #000000;
    width: fit-content;
    height: auto;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.home-cta:hover
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}
.home-hero-link
{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    font-size: 1.3rem;
    width: fit-content;
    height: auto;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.home-hero-link:hover
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
}
#hero-reviews
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 8rem;
    height: 52.5rem;
    position: relative;
    overflow: hidden;
}
#hero-review-fade-top,
#hero-review-fade-bot
{
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 5;
}
#hero-review-fade-top
{
    top: 0;
    height: 50px;
    background: linear-gradient(to bottom, #FFFFFF, #FFFFFF, transparent);
}
#hero-review-fade-bot
{
    bottom: 0;
    height: 50px;
    background: linear-gradient(to top, #FFFFFF, #FFFFFF, transparent);
}
#hero-review-track
{
    display: flex;
    flex-direction: column;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    gap: 3rem;
    background-color: #FFFFFF;
    height: 100%;
    animation: review-scroll 15s linear infinite;
}
#hero-review-track:hover
{
    animation-play-state: paused;
}
.hero-review-card
{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    background-color: #FFFFFF;
    border: 2px solid #000000;
    border-radius: 25px;
    height: 35rem;
    width: 25rem;
}
.hero-review-card-image 
{
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0rem 0rem 0rem 0rem;
    align-items: center;
}
.hero-review-card-image img
{
    display: flex;
    width: 100%;
    height: auto;
    border: 0px solid #000000;
    border-radius: 19px;
}
.hero-review-card-text
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-end;
    padding: 0rem 1rem 1rem 1rem;
}
.hero-review-card-text h3
{
    color: #000000;
    font-size: 1.5rem;
    margin: 0rem 0rem 0rem 0rem;
    -webkit-text-stroke: 0.5px #000000;
    -moz-text-stroke: 0.5px #000000;
}
.hero-review-card-text p
{
    color: #000000;
    font-size: 1.1rem;
    margin: 1rem 0rem 0rem 0rem;
}
.hero-review-card-text a
{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: #000000;
    text-decoration: none;
    font-size: 1.25rem;
    border: 2px solid #000000;
    width: fit-content;
    height: auto;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin: 1.5rem 0rem 0rem 0rem;
}
.hero-review-card-text a:hover
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}

/*Scrolling Animation*/
@keyframes review-scroll
{
    from
    {
        transform: translateY(0);
    }
    to
    {
        transform: translateY(-114rem);
    }
}

/*Homepage (About section)*/
#about
{
    padding: 0rem 1rem 0rem 1rem;
    margin: 2rem 0rem 0rem 0rem;
    scroll-margin-top: 150px;
}
.about-content
{
    display: flex;
    gap: 3rem;
    margin: 0rem 5rem 0rem 5rem;
    align-items: center;
}
.about-image-block 
{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: flex-start;
}
.about-image-block img 
{
    width: auto;
    height: 480px;
    margin: 0rem 0rem 0rem 0rem;
    border: 0px solid #000000;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.about-text-block 
{
    display: flex;
    height: 550px;
    gap: 1rem;
    margin-left: 4rem;
}
.about-text-block-titles 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.about-text-block-titles h2 
{
    font-size: 4rem;
    margin: 0rem 0rem 0rem 0rem;
    color: transparent;
    -webkit-text-stroke: 2px #DD1212;
    -moz-text-stroke: 2px #DD1212;
}
.about-text-block-titles h1 
{
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 5rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin: 0rem 0rem 0rem 0rem;
}
.about-content .about-text-block-ruler 
{
    width: 2px;
    background-color: #000000;
    margin: 0rem 0.5rem 0rem 0rem;
    justify-self: center;
    align-self: center;
    height: 480px;
}
.about-text-block-copy 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 350px;
}
.about-text-block-copy p 
{
    text-decoration: none;
    color: #000000;
    font-size: 1.3rem;
}
#about-cta
{
    display: block;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    font-size: 1.3rem;
    border: 2px solid #000000;
    width: fit-content;
    height: auto;
    margin: 0.5rem 0rem 0rem 5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
#about-cta:hover
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}

/*Homepage (Featured works section)*/
#featured-works
{
    padding: 0rem 1rem 0rem 1rem;
    margin: 2rem 0rem 0rem 0rem;
    scroll-margin-top: 150px;
}
#featured-works-projects
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 5rem;
}
.homepage-title
{
    padding: 0rem 0rem 0rem 0rem;
    margin: 1.5rem 0rem 0rem 0rem;
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 5rem;
}
.featured-works-project-card
{
    display: flex;
    flex-direction: row;
    padding: 1rem 1rem 1rem 1rem;
    margin: 2.5rem 0rem 0rem 0rem;
    width: auto;
    height: 450px;
    border: 2px solid #000000;
    border-radius: 25px;
}
.featured-works-project-card:hover
{
    border: 2px solid #DD1212;
}
.featured-works-project-card-text
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    width: 700px;
}
.featured-works-project-card,
.featured-works-project-card:link,
.featured-works-project-card:visited,
.featured-works-project-card:hover,
.featured-works-project-card:active
{
    text-decoration: none;
    color: #000000;
}
.featured-works-project-card-text h2
{
    color: #000000;
    font-size: 2.5rem;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 1rem 0.5rem;
}
.featured-works-project-card-text p
{
    color: #000000;
    font-size: 1.3rem;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 1.5rem 0.5rem;
}
.featured-works-project-card-text h4
{
    color: #000000;
    font-size: 1.3rem;
    border: 2px solid #000000;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin: 0rem 0rem 0rem 0.5rem;
}
.featured-works-project-card:hover .featured-works-project-card-text h4
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}
.featured-works-project-card-text h3
{
    color: #000000;
    font-size: 1.3rem;
    padding: 0rem 0rem 0rem 0rem;
    margin: auto 0rem 0.5rem 0.5rem;
}
.featured-works-project-card-image 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0px solid #000000;
    border-radius: 25px;
    margin: 0.5rem 0.5rem 0.5rem 15rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.featured-works-project-card:hover .featured-works-project-card-image img 
{
    transform: scale(1.05);
}
#featured-works-cta
{
    display: block;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    font-size: 1.3rem;
    border: 2px solid #000000;
    width: fit-content;
    height: auto;
    margin: 2.5rem 0rem 0rem 5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
#featured-works-cta:hover
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}

/*Homepage (Contact section)*/
#contact
{
    padding: 0rem 1rem 0rem 1rem;
    margin: 2rem 0rem 0rem 0rem;
    scroll-margin-top: 150px;
}
.contact-content
{
    display: flex;
    gap: 3rem;
    margin: 0rem 5rem 0rem 5rem;
    align-items: center;
}
.contact-image-block 
{
    display: flex;
    height: 550px;
    align-items: center;
    justify-content: flex-start;
}
.contact-image-block img 
{
    width: auto;
    height: 480px;
    margin: 0rem 0rem 0rem 0rem;
    border: 0px solid #000000;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.contact-text-block 
{
    display: flex;
    height: 550px;
    gap: 1rem;
}
.contact-text-block-titles 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contact-text-block-titles h2 
{
    font-size: 4rem;
    margin: 0rem 0rem 0rem 0rem;
    color: transparent;
    -webkit-text-stroke: 2px #DD1212;
    -moz-text-stroke: 2px #DD1212;
}
.contact-text-block-titles h1 
{
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 5rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin: 0rem 0rem 0rem 0rem;
}
.contact-content .contact-text-block-ruler 
{
    width: 2px;
    background-color: #000000;
    margin: 0rem 0.5rem 0rem 0rem;
    justify-self: center;
    align-self: center;
    height: 480px;
}
.contact-text-block-copy 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 400px;
}
.contact-text-block-copy p 
{
    text-decoration: none;
    color: #000000;
    font-size: 1.3rem;
}
#contact-cta
{
    display: block;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    font-size: 1.3rem;
    border: 2px solid #000000;
    width: fit-content;
    height: auto;
    margin: 0.5rem 0rem 0rem 6rem;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
#contact-cta:hover
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}

/*About Page*/
#about-page
{
    scroll-margin-top: 150px;
}
#about-text-block-ruler-two
{
    width: 2px;
    background-color: #000000;
    margin: 0rem 0.5rem 0rem 0rem;
    justify-self: center;
    align-self: center;
    height: 420px;
}

/*Projects Page*/
#projects
{
    padding: 0rem 1rem 0rem 1rem;
    margin: 0rem 0rem 0rem 0rem;
    scroll-margin-top: 150px;
}
#graphic-design-projects
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    scroll-margin-top: 150px;
}
#ui-ux-design-projects
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 2rem 0rem 0rem 0rem;
    scroll-margin-top: 150px;
}
.projects-page-section-headers
{
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 5rem;
}
#projects-page-section-headers-top
{
    margin: 1.5rem 0rem 0rem 0rem;
}
.projects-page-project-card
{
    display: flex;
    flex-direction: row;
    padding: 1rem 1rem 1rem 1rem;
    margin: 2.5rem 0rem 0rem 0rem;
    width: auto;
    height: 450px;
    border: 2px solid #000000;
    border-radius: 25px;
}
.projects-page-project-card:hover
{
    border: 2px solid #DD1212;
}
.projects-page-project-card-text
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    width: 700px;
}
.projects-page-project-card,
.projects-page-project-card:link,
.projects-page-project-card:visited,
.projects-page-project-card:hover,
.projects-page-project-card:active
{
    text-decoration: none;
    color: #000000;
}
.projects-page-project-card-text h2
{
    color: #000000;
    font-size: 2.5rem;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 1rem 0.5rem;
}
.projects-page-project-card-text p
{
    color: #000000;
    font-size: 1.3rem;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 1.5rem 0.5rem;
}
.projects-page-project-card-text h4
{
    color: #000000;
    font-size: 1.3rem;
    border: 2px solid #000000;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin: 0rem 0rem 0rem 0.5rem;
}
.projects-page-project-card:hover .projects-page-project-card-text h4
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: 2px solid #DD1212;
}
.projects-page-project-card-text h3
{
    color: #000000;
    font-size: 1.3rem;
    padding: 0rem 0rem 0rem 0rem;
    margin: auto 0rem 0.5rem 0.5rem;
}
.projects-page-project-card-image 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0.5rem 0.5rem 0.5rem 15rem;
    border-radius: 25px;
    margin: 0.5rem 0.5rem 0.5rem 15rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.projects-page-project-card:hover .projects-page-project-card-image img 
{
    transform: scale(1.075);
}
.placeholder-image
{ 
    border-radius: 25px;
    height: 400px;
    width: 400px;
}

/*Project Pages Title*/
.project-title-fix
{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 25px;
    background-color: #ffffff;
    margin: -1.5rem 0rem 0rem 0rem;
}
.project-title
{
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 88px;
    background-color: #ffffff;
    margin: 1.5rem 0rem 0rem 0rem;
}
.project-title h1
{
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 5rem;
    margin: 0rem 0rem 0rem 1rem;
}
.gradient-block 
{
    height: 30px;
    background: linear-gradient(to bottom, #ffffff, transparent);
    padding: 0rem;
    margin: 0rem 0rem 0rem 0rem;
}
.project-title a
{
    position: fixed;
    top: 16rem;
    background-color: #FFFFFF;
    text-decoration: none;
    color: #000;
    font-size: 1.2rem;
    padding: 0.5rem;
    border: solid 2px #000000;
    margin: 0rem 0rem 0rem 1rem;
}
.project-title a:hover 
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border: solid 2px #DD1212;
}

/*Project Pages Portfolio Pieces*/
.project-objective 
{
    display: flex;
    gap: 3rem;
    margin: 9rem 5rem 0rem 5rem;
    align-items: center;
    scroll-margin-top: 250px;
}
.project-ideation 
{
    display: flex;
    gap: 3rem;
    margin: 0rem 5rem 0rem 5rem;
    align-items: center;
    scroll-margin-top: 250px;
}
.project-solution 
{
    display: flex;
    gap: 3rem;
    margin: 0rem 5rem 5rem 5rem;
    align-items: center;
    scroll-margin-top: 250px;
}
.image-block 
{
    position: relative;
    display: inline-flex;
    flex: 1;
    height: 600px;
    align-items: center;
    justify-content: start;
}
.image-block::before 
{
    content: "";
    position: absolute;
    width: 960px;
    height: calc(100% - 140px);
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    z-index: 1;
}
.image-block img 
{
    width: 900px;
    height: auto;
    border-radius: 25px;
    position: relative;
    z-index: 1;
}
.text-block 
{
    display: flex;
    flex: 0.5;
    height: 600px;
    gap: 1rem;
}
.text-block-titles 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.text-block-titles h2 
{
    font-size: 4rem;
    margin: 0rem 0rem 0rem 0rem;
    color: transparent;
    -webkit-text-stroke: 2px #DD1212;
    -moz-text-stroke: 2px #DD1212;
}
.text-block-titles h1 
{
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -moz-text-stroke: 1px #000000;
    font-size: 5rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin: 0rem 0rem 0rem 0rem;
}
.project-objective .text-block-ruler 
{
    width: 2px;
    background-color: #000000;
    margin: 0rem 0.5rem 0rem 0rem;
    justify-self: center;
    align-self: center;
    height: 425px;
}
.project-ideation .text-block-ruler 
{
    width: 2px;
    background-color: #000000;
    margin: 0rem 0.5rem 0rem 0rem;
    justify-self: center;
    align-self: center;
    height: 380px;
}
.project-solution .text-block-ruler 
{
    width: 2px;
    background-color: #000000;
    margin: 0rem 0.5rem 0rem 0rem;
    justify-self: center;
    align-self: center;
    height: 405px;
}
.text-block-copy 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 375px;
}
.text-block-copy p 
{
    text-decoration: none;
    color: #000000;
    font-size: 1.3rem;
}

/*Contact Page*/
#contact-page
{
    padding: 0rem 1rem 0rem 1rem;
    margin: 2rem 0rem 0rem 0rem;
    height: 780px;
    scroll-margin-top: 150px;
}
#contact-sections 
{
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin: 2.5rem 0rem 0rem 0rem;
}
#contact-info 
{
    display: flex;
    flex-direction: column;
    flex: 0 0 260px;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.contact-item 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0rem;
}
.contact-item img 
{
    width: 50px;
    height: auto;
}
.contact-item h2 
{
    text-decoration: none;
    color: #000000;
    font-size: 1.3rem;
    -webkit-text-stroke: 0.5px #000000;
    -moz-text-stroke: 0.5px #000000;
}
.contact-item a 
{
    text-decoration: none;
    color: #000000;
    font-size: 1.2rem;
}
.contact-item a:hover 
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
}
#contact-divider 
{
    justify-content: center;
    align-self: flex-start;
    width: 2px;
    background-color: #000000;
    height: 585px;
}
#contact-form 
{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    max-width: 1500px;
}
#contact-form form 
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#contact-form label 
{
    display: flex;
    flex-direction: column;
    font-size: 1.65rem;
    color: #000000;
    gap: 0.5rem;
    -webkit-text-stroke: 0.5px #000000;
    -moz-text-stroke: 0.5px #000000;
}
#contact-form input::placeholder,
#contact-form textarea::placeholder 
{
    font-size: 1.2rem;
    color: #999999;
    -webkit-text-stroke: 0px #000000;
    -moz-text-stroke: 0px #000000;
}
#contact-form input,
#contact-form textarea 
{
    padding: 0.5rem;
    font-size: 1.3rem;
    border: 2px solid #000000;
    outline: none;
}
#contact-form input:focus,
#contact-form textarea:focus 
{
    border-color: #DD1212;
}
#contact-form textarea 
{
    resize: vertical;
    min-height: 250px;
}
#contact-form button 
{
    align-self: flex-start;
    padding: 0.5rem;
    font-size: 1.3rem;
    color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;
    cursor: pointer;
}
#contact-form button:hover 
{
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
    border-color: #DD1212;
}

/*Footer*/
.footer
{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1rem;
    border-top: 2px solid #000000; 
}
.footer h2
{
    color: #000000;
    font-size: 1.2rem;
}
.footer a
{
    text-decoration: underline;
    color: #000000;
    font-size: 1.2rem;
}
.footer a:hover 
{
    font-size: 1.2rem;
    color: transparent;
    -webkit-text-stroke: 1px #DD1212;
    -moz-text-stroke: 1px #DD1212;
}
#projects-page-footer
{
    margin: 3rem 0rem 0rem 0rem;
}

/*-----------------
   RESPONSIVNESS
-----------------*/

/*Responsive Navigation*/
@media (max-width: 1050px)
{
    #nav-links 
    {
        display: none;
    }
    #hamburger 
    {
        display: block;
        position: relative;
        z-index: 9999;
    }
    #mobile-menu 
    {
        position: fixed;
        top: 76px;
        right: 0;
        width: 150px;
        display: none;
        flex-direction: column;
        background-color: #ffffff;
        border-left: 2px solid #000000;
        border-bottom: 2px solid #000000;
        z-index: 9999;
    }
    #mobile-menu a 
    {
        padding: 1rem;
        text-decoration: none;
        color: #000000;
        font-size: 1.2rem;
        border-top: 2px solid #000000;
        text-align: right;
    }
    #mobile-menu a:hover 
    {
        color: transparent;
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
    }
    #mobile-menu.open 
    {
        display: flex;
    }
}
@media (max-width: 800px)
{
    #mobile-menu 
    {
        width: 120px;
    }
    #mobile-menu a 
    {
        font-size: 1rem;
    }
}
@media (max-width: 675px)
{
    #mobile-menu 
    {
        width: 100px;
    }
    #mobile-menu a 
    {
        padding-top: 1.25rem;
        font-size: 0.8rem;
    }
    #mobile-menu a:hover 
    {
        color: transparent;
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
}
@media (max-width: 620px)
{
    #header-title 
    {
        -webkit-text-stroke: 0.75px #000000;
        -moz-text-stroke: 0.75px #000000;
        font-size: 1.5rem;
    }
    #robert-book-design-logo img
    {
        height: 40px;
        width: auto;
    }
    #mobile-menu 
    {
        margin: 0rem 0rem 0rem 0rem;
    }
    #mobile-menu a 
    {
        padding-top: 1.2rem;
        font-size: 0.8rem;
    }
}
@media (max-width: 475px)
{
    #header-title 
    {
        font-size: 1.1rem;
    }
    #robert-book-design-logo img
    {
        height: 35px;
        width: auto;
    }
}

/*Responsive Breadcrumb Navigation*/
@media (max-width: 800px)
{
    #breadcrumb-nav a
    {
        font-size: 1rem;
    }
}
@media (max-width: 675px)
{
    #breadcrumb-nav a
    {
        font-size: 0.8rem;
    }
    #breadcrumb-nav a:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
}

/*Responsive Homepage (Hero section)*/
@media (max-width: 1800px)
{
    #hero-text h3
    {
        font-size: 1.75rem;
    }
    #hero-text h1
    {
        font-size: 6.5rem;
        margin: 5rem 0rem 0rem 0rem;
    }
    #hero-text h4
    {
        font-size: 1.5rem;
        max-width: 600px;
    }
    .home-cta
    {
        font-size: 1.25rem;
    }
    .home-hero-link
    {
        font-size: 1.25rem;
    }
    #hero-reviews
    {
        margin: 0rem 0rem 0rem 8rem;
    }
}
@media (max-width: 1650px)
{
    #hero-text h3
    {
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
        font-size: 1.5rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 2px #000000;
        -moz-text-stroke: 2px #000000;
        font-size: 5.5rem;
    }
    #hero-text h4
    {
        font-size: 1.25rem;
        max-width: 500px;
    }
    .home-cta
    {
        font-size: 1.1rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    .home-hero-link
    {
        font-size: 1.1rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    .hero-review-card
    {
        height: 30rem;
        width: 20rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.3rem;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
    }
    .hero-review-card-text a
    {
        font-size: 1.1rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateY(0);
        }
        to
        {
            transform: translateY(-99rem);
        }
    }
    #hero-reviews
    {
        margin: 0rem 0rem 0rem 7rem;
    }
}
@media (max-width: 1425px)
{
    #hero-text h3
    {
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
        font-size: 1.3rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 2px #000000;
        -moz-text-stroke: 2px #000000;
        font-size: 5rem;
    }
    #hero-text h4
    {
        font-size: 1.2rem;
        max-width: 450px;
    }
    .home-cta
    {
        font-size: 1rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    .home-hero-link
    {
        font-size: 1rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    .hero-review-card
    {
        height: 30rem;
        width: 20rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.1rem;
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
    }
    .hero-review-card-text a
    {
        font-size: 1rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    #hero-reviews
    {
        margin: 0rem 0rem 0rem 6rem;
    }
}
@media (max-width: 1300px)
{
    #hero
    {
        flex-direction: column;
        height: 90rem;
    }
    #hero-text
    {
        height: 50rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
        font-size: 2rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 2px #000000;
        -moz-text-stroke: 2px #000000;
        font-size: 7.5rem;
    }
    #hero-text h4
    {
        font-size: 1.7rem;
        max-width: 700px;
    }
    .home-cta
    {
        font-size: 1.3rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 1.3rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
    }
    #hero-reviews
    {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin: 0rem 0rem 0rem 6rem;
        margin: 0 auto;
        height: 40rem;
        width: 66rem;
    }
    #hero-review-fade-top,
    #hero-review-fade-bot
    {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        height: 100%;
        pointer-events: none;
        z-index: 10;
    }
    #hero-review-fade-top
    {
        left: 0;
        right: auto;
        background: linear-gradient(to right, #FFFFFF, #FFFFFF, transparent);
    }
    #hero-review-fade-bot
    {
        right: 0;
        left: auto;
        background: linear-gradient(to left, #FFFFFF, #FFFFFF, transparent);
    }
    #hero-review-track
    {
        flex-direction: row;
        gap: 7rem;
        height: 100%;
        animation: review-scroll 18s linear infinite;
    }
    #hero-review-track:hover
    {
        animation-play-state: paused;
    }
    .hero-review-card
    {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem 0rem 0rem 0rem;
        background-color: #FFFFFF;
        border: 2px solid #000000;
        border-radius: 25px;
        height: 35rem;
        width: 25rem;
    }
    .hero-review-card-image 
    {
        display: flex;
        flex-direction: column;
        padding: 1rem 1rem 1rem 1rem;
        margin: 0rem 0rem 0rem 0rem;
        align-items: center;
    }
    .hero-review-card-image img
    {
        display: flex;
        width: 100%;
        height: auto;
        border: 0px solid #000000;
        border-radius: 19px;
    }
    .hero-review-card-text
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        justify-content: flex-end;
        padding: 0rem 1rem 1rem 1rem;
    }
    .hero-review-card-text h3
    {
        color: #000000;
        font-size: 1.5rem;
        margin: 0rem 0rem 0rem 0rem;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
    }
    .hero-review-card-text p
    {
        color: #000000;
        font-size: 1.1rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        color: #000000;
        text-decoration: none;
        font-size: 1.25rem;
        border: 2px solid #000000;
        width: fit-content;
        height: auto;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        color: transparent;
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-96rem);
        }
    }
}
@media (max-width: 1250px)
{
    #hero
    {
        height: 90rem;
    }
    #hero-text
    {
        height: 50rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
        font-size: 1.75rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 2px #000000;
        -moz-text-stroke: 2px #000000;
        font-size: 6.5rem;
    }
    #hero-text h4
    {
        font-size: 1.5rem;
        max-width: 650px;
    }
    .home-cta
    {
        font-size: 1.25rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 1.25rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
    }
    #hero-reviews
    {
        height: 40rem;
        width: 66rem;
    }
    #hero-review-track
    {
        gap: 7rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 35rem;
        width: 25rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.5rem;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 1.1rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 1.25rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-96rem);
        }
    }
}
@media (max-width: 1100px)
{
    #hero
    {
        height: 70rem;
    }
    #hero-text
    {
        height: 40rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1.5rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 2px #000000;
        -moz-text-stroke: 2px #000000;
        font-size: 5.5rem;
    }
    #hero-text h4
    {
        font-size: 1.3rem;
        max-width: 550px;
    }
    .home-cta
    {
        font-size: 1.1rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 1.1rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    #hero-reviews
    {
        height: 30rem;
        width: 55rem;
    }
    #hero-review-track
    {
        gap: 6rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 30rem;
        width: 20rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.25rem;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 1.1rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-78rem);
        }
    }
}
@media (max-width: 950px)
{
    #hero
    {
        height: 71rem;
        width: auto;
    }
    #hero-text
    {
        align-self: center;
        justify-content: center;
        align-items: flex-start;
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem 0rem 0rem 0rem;
        height: 40rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1.25rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 2px #000000;
        -moz-text-stroke: 2px #000000;
        font-size: 4.5rem;
    }
    #hero-text h4
    {
        font-size: 1.1rem;
        max-width: 450px;
    }
    .home-cta
    {
        font-size: 1rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 1rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #hero-reviews
    {
        height: 31rem;
        width: 50rem;
    }
    #hero-review-track
    {
        gap: 5rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 30rem;
        width: 18rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.25rem;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 1.1rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-69rem);
        }
    }
}
@media (max-width: 850px)
{
    #hero-reviews
    {
        width: 45rem;
    }
}
@media (max-width: 800px)
{
    #hero
    {
        height: 65rem;
    }
    #hero-text
    {
        height: 35rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1.1rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 1.5px #000000;
        -moz-text-stroke: 1.5px #000000;
        font-size: 4rem;
    }
    #hero-text h4
    {
        font-size: 1rem;
        max-width: 400px;
    }
    .home-cta
    {
        font-size: 1rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 1rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #hero-reviews
    {
        height: 30rem;
        width: 40rem;
    }
    #hero-review-track
    {
        gap: 4rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 30rem;
        width: 18rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.2rem;
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 1.1rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-66rem);
        }
    }
}
@media (max-width: 800px)
{
    #hero
    {
        height: 65rem;
    }
    #hero-text
    {
        height: 35rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1.1rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 1.5px #000000;
        -moz-text-stroke: 1.5px #000000;
        font-size: 4rem;
    }
    #hero-text h4
    {
        font-size: 1rem;
        max-width: 400px;
    }
    .home-cta
    {
        font-size: 1rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 1rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #hero-reviews
    {
        height: 30rem;
        width: 40rem;
    }
    #hero-review-track
    {
        gap: 4rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 30rem;
        width: 18rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.2rem;
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 1.1rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-66rem);
        }
    }
}
@media (max-width: 650px)
{
    #hero
    {
        height: 65rem;
    }
    #hero-text
    {
        height: 35rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 1.5px #000000;
        -moz-text-stroke: 1.5px #000000;
        font-size: 3rem;
    }
    #hero-text h4
    {
        font-size: 0.9rem;
        max-width: 320px;
    }
    .home-cta
    {
        font-size: 0.9rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 0.9rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #hero-reviews
    {
        height: 30rem;
        width: 30rem;
    }
    #hero-review-track
    {
        gap: 3rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 29rem;
        width: 18rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.1rem;
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 0.9rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-63rem);
        }
    }
}
@media (max-width: 500px)
{
    #hero
    {
        height: 65rem;
    }
    #hero-text
    {
        height: 35rem;
        margin: 0rem 0rem 0rem 0rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1rem;
        margin: 0rem 0rem 0rem 0rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 1.5px #000000;
        -moz-text-stroke: 1.5px #000000;
        font-size: 5rem;
        margin: 2.5rem 0rem 0rem 0rem;
    }
    .hero-title span
    {
        display: block;
    }
    #hero-text h4
    {
        font-size: 0.9rem;
        max-width: 320px;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .home-cta
    {
        font-size: 0.9rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 0.9rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #hero-reviews
    {
        height: 30rem;
        width: 25rem;
    }
    #hero-review-track
    {
        gap: 3rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 29rem;
        width: 18rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.1rem;
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 0.9rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-63rem);
        }
    }
}
@media (max-width: 420px)
{
    #hero
    {
        height: 65rem;
    }
    #hero-text
    {
        height: 35rem;
        margin: 0rem 0rem 0rem 0rem;
    }
    #hero-text h3
    {
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
        font-size: 1rem;
    }
    #hero-text h1
    {
        -webkit-text-stroke: 1.5px #000000;
        -moz-text-stroke: 1.5px #000000;
        font-size: 5rem;
    }
    #hero-text h4
    {
        font-size: 0.9rem;
        max-width: 320px;
    }
    .home-cta
    {
        font-size: 0.9rem;
    }
    .home-cta:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    .home-hero-link
    {
        font-size: 0.9rem;
    }
    .home-hero-link:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #hero-reviews
    {
        height: 30rem;
        width: 22rem;
    }
    #hero-review-track
    {
        gap: 3rem;
        animation: review-scroll 18s linear infinite;
    }
    .hero-review-card
    {
        border: 2px solid #000000;
        border-radius: 25px;
        height: 29rem;
        width: 18rem;
    }
    .hero-review-card-text h3
    {
        font-size: 1.1rem;
        -webkit-text-stroke: 0.25px #000000;
        -moz-text-stroke: 0.25px #000000;
    }
    .hero-review-card-text p
    {
        font-size: 0.9rem;
        margin: 1rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a
    {
        font-size: 0.9rem;
        border: 2px solid #000000;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        margin: 1.5rem 0rem 0rem 0rem;
    }
    .hero-review-card-text a:hover
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
        border: 2px solid #DD1212;
    }
    @keyframes review-scroll
    {
        from
        {
            transform: translateX(0);
        }
        to
        {
            transform: translateX(-63rem);
        }
    }
}

/*Responsive Homepage (About section)*/
@media (max-width: 1250px)
{
    .about-content
    {
        gap: 2rem;
    }
    .about-image-block 
    {
        height: 450px;
    }
    .about-image-block img 
    {
        height: 375px;
    }
    .about-text-block 
    {
        height: 450px;
        gap: 1rem;
    }
    .about-text-block-titles h2 
    {
        font-size: 3.2rem;
    }
    .about-text-block-titles h1 
    {
        font-size: 4rem;
    }
    .about-content .about-text-block-ruler 
    {
        height: 400px;
    }
    .about-text-block-copy 
    {
        width: 325px;
    }
    .about-text-block-copy p 
    {
        font-size: 1.1rem;
    }
    #about-cta
    {
        font-size: 1.2rem;
    }
}
@media (max-width: 1075px)
{
    .about-content
    {
        gap: 1rem;
    }
    .about-image-block 
    {
        height: 400px;
    }
    .about-image-block img 
    {
        height: 325px;
    }
    .about-text-block 
    {
        height: 400px;
        gap: 1rem;
    }
    .about-text-block-titles h1 
    {
        font-size: 3.5rem;
    }
    .about-content .about-text-block-ruler 
    {
        height: 360px;
    }
    .about-text-block-copy 
    {
        width: 300px;
    }
    .about-text-block-copy p 
    {
        font-size: 1rem;
    }
    #about-cta
    {
        font-size: 1.1rem;
    }
}
@media (max-width: 950px)
{
    .about-content
    {
        display: flex;
        flex-direction: column;
        gap: 0rem;
        margin: 0rem 5rem 0rem 5rem;
        align-items: center;
        justify-content: center;
    }
    .about-image-block 
    {
        height: 550px;
    }
    .about-image-block img 
    {
        height: 475px;
    }
    .about-text-block 
    {
        height: 550px;
        gap: 1rem;
        margin-left: 0;
    }
    .about-text-block-titles h1 
    {
        font-size: 5rem;
    }
    .about-content .about-text-block-ruler 
    {
        height: 500px;
    }
    .about-text-block-copy 
    {
        width: 350px;
    }
    .about-text-block-copy p 
    {
        font-size: 1.3rem;
    }
    #about-cta
    {
        display: block;
        align-self: center;
        justify-self: center;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin: 0.5rem 0rem 0rem 0rem;
    }
}
@media (max-width: 550px)
{
    .about-image-block 
    {
        height: 440px;
    }
    .about-image-block img 
    {
        height: 375px;
    }
    .about-text-block 
    {
        height: 440px;
        gap: 1rem;
    }
    .about-text-block-titles h1 
    {
        font-size: 4rem;
    }
    .about-content .about-text-block-ruler 
    {
        height: 400px;
    }
    .about-text-block-copy 
    {
        width: 250px;
    }
    .about-text-block-copy p 
    {
        font-size: 1rem;
    }
    #about-cta
    {
        font-size: 1.1rem;
    }
}
@media (max-width: 450px)
{
    .about-image-block 
    {
        height: 380px;
    }
    .about-image-block img 
    {
        height: 325px;
    }
    .about-text-block 
    {
        height: 380px;
        gap: 0.5rem;
    }
    .about-text-block-titles h1 
    {
        font-size: 3rem;
    }
    .about-content .about-text-block-ruler 
    {
        height: 300px;
    }
    .about-text-block-copy 
    {
        width: 250px;
    }
    .about-text-block-copy p 
    {
        font-size: 0.9rem;
    }
    #about-cta
    {
        font-size: 1rem;
    }
}

/*Responsive Homepage (Featured works section)*/
@media (max-width: 1500px)
{
    .featured-works-project-card-image 
    {
        margin: 0.5rem 0.5rem 0.5rem 5.5rem;
    }
}
@media (max-width: 1350px)
{
    .featured-works-project-card-image 
    {
        margin: 0.5rem 0.5rem 0.5rem 1.5rem;
    }
}
@media (max-width: 1300px)
{
    .featured-works-project-card-text
    {
        width: 600px;
    }
}
@media (max-width: 1200px)
{
    .homepage-title
    {
        font-size: 4rem;
    }
    .featured-works-project-card
    {
        height: 400px;
    }
    .featured-works-project-card-text
    {
        width: 550px;
    }
    .featured-works-project-card-text h2
    {
        font-size: 2.3rem;
    }
    .featured-works-project-card-text p
    {
        font-size: 1.2rem;
    }
    .featured-works-project-card-text h4
    {
        font-size: 1.2rem;
    }
    .featured-works-project-card-text h3
    {
        font-size: 1rem;
    }
    .placeholder-image
    { 
        border-radius: 20px;
        height: 350px;
        width: 350px;
    }
    #featured-works-cta
    {
        font-size: 1.2rem;
    }
}
@media (max-width: 1100px)
{
    .homepage-title
    {
        padding: 0.5rem 0rem 0rem 0rem;
        font-size: 3rem;
    }
    .featured-works-project-card
    {
        margin: 2rem 0rem 0rem 0rem;
        height: 350px;
    }
    .featured-works-project-card-text
    {
        width: 500px;
    }
    .featured-works-project-card-text h2
    {
        font-size: 1.8rem;
    }
    .featured-works-project-card-text p
    {
        font-size: 1rem;
    }
    .featured-works-project-card-text h4
    {
        font-size: 1rem;
    }
    .featured-works-project-card-text h3
    {
        font-size: 0.9rem;
    }
    .placeholder-image
    {
        height: 250px;
        width: auto;
    }
    #featured-works-cta
    {
        font-size: 1rem;
    }
}
@media (max-width: 950px)
{
    #featured-works-projects
    {
        align-items: center;
        margin: 0rem 0rem 0rem 0rem;
    }
    .homepage-title
    {
        align-self: flex-start;
        font-size: 3rem;
    }
    .featured-works-project-card
    {
        flex-direction: column-reverse;
        margin: 2rem 0rem 0rem 0rem;
        width: auto;
        height: auto;
    }
    .featured-works-project-card-text
    {
        width: 600px;
    }
    .featured-works-project-card-text h2
    {
        color: #000000;
        font-size: 2.5rem;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem 0rem 1rem 0.5rem;
    }
    .featured-works-project-card-text p
    {
        color: #000000;
        font-size: 1.2rem;
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem 0rem 1.5rem 0.5rem;
    }
    .featured-works-project-card-text h4
    {
        font-size: 1.2rem;
        margin: 0rem 0rem 1.5rem 0.5rem;
    }
    .featured-works-project-card-text h3
    {
        font-size: 1.1rem;
    }
    .featured-works-project-card-image 
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0.5rem 0.5rem 1.5rem 0.5rem;
    }
    .placeholder-image
    { 
        border-radius: 25px;
        height: 600px;
        width: 600px;
    }
    #featured-works-cta
    {
        font-size: 1.2rem;
        margin: 2.5rem auto 0 auto;
    }
}
@media (max-width: 700px)
{
    .homepage-title
    {
        align-self: flex-start;
        font-size: 2.5rem;
    }
    .featured-works-project-card-text
    {
        width: 525px;
    }
    .featured-works-project-card-text h2
    {
        font-size: 1.8rem;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
    }
    .featured-works-project-card-text p
    {
        font-size: 1.2rem;
    }
    .featured-works-project-card-text h3
    {
        font-size: 1rem;
    }
    .placeholder-image
    { 
        height: 525px;
        width: 525px;
    }
}
@media (max-width: 620px)
{
    .homepage-title
    {
        align-self: flex-start;
        font-size: 2rem;
    }
    .featured-works-project-card-text
    {
        width: 400px;
    }
    .featured-works-project-card-text h2
    {
        font-size: 1.5rem;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
    }
    .featured-works-project-card-text p
    {
        font-size: 1rem;
    }
    .featured-works-project-card-text h4
    {
        font-size: 1rem;
    }
    .featured-works-project-card-text h3
    {
        font-size: 0.9rem;
    }
    .placeholder-image
    { 
        height: 400px;
        width: 400px;
    }
    #featured-works-cta
    {
        font-size: 1rem;
    }
}
@media (max-width: 500px)
{
    .featured-works-project-card
    {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
    .homepage-title
    {
        align-self: flex-start;
        font-size: 1.5rem;
    }
    .featured-works-project-card-text
    {
        width: 300px;
    }
    .featured-works-project-card-text h2
    {
        font-size: 1.2rem;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
    }
    .featured-works-project-card-text p
    {
        font-size: 0.9rem;
    }
    .featured-works-project-card-text h4
    {
        font-size: 0.9rem;
    }
    .featured-works-project-card-text h3
    {
        font-size: 0.8rem;
    }
    .placeholder-image
    { 
        height: 300px;
        width: 300px;
    }
    #featured-works-cta
    {
        font-size: 0.9rem;
    }
}

/*Responsive Homepage (Contact section)*/
@media (max-width: 1250px)
{
    .contact-content
    {
        gap: 2rem;
    }
    .contact-image-block 
    {
        height: 450px;
    }
    .contact-image-block img 
    {
        height: 375px;
    }
    .contact-text-block 
    {
        height: 450px;
        gap: 1rem;
    }
    .contact-text-block-titles h2 
    {
        font-size: 3.2rem;
    }
    .contact-text-block-titles h1 
    {
        font-size: 4rem;
    }
    .contact-content .contact-text-block-ruler 
    {
        height: 375px;
    }
    .contact-text-block-copy 
    {
        width: 375px;
    }
    .contact-text-block-copy p 
    {
        font-size: 1.1rem;
    }
    #contact-cta
    {
        font-size: 1.2rem;
    }
}
@media (max-width: 1075px)
{
    .contact-content
    {
        gap: 1rem;
    }
    .contact-image-block 
    {
        height: 400px;
    }
    .contact-image-block img 
    {
        height: 325px;
    }
    .contact-text-block 
    {
        height: 400px;
        gap: 1rem;
    }
    .contact-text-block-titles h1 
    {
        font-size: 3.5rem;
    }
    .contact-content .contact-text-block-ruler 
    {
        height: 325px;
    }
    .contact-text-block-copy 
    {
        width: 350px;
    }
    .contact-text-block-copy p 
    {
        font-size: 1rem;
    }
    #contact-cta
    {
        font-size: 1.1rem;
    }
}
@media (max-width: 950px)
{
    .contact-content
    {
        display: flex;
        flex-direction: column;
        gap: 0rem;
        margin: 0rem 5rem 0rem 5rem;
        align-items: center;
        justify-content: center;
    }
    .contact-image-block 
    {
        height: 550px;
    }
    .contact-image-block img 
    {
        height: 475px;
    }
    .contact-text-block 
    {
        height: 550px;
        gap: 1rem;
    }
    .contact-text-block-titles h1 
    {
        font-size: 5rem;
    }
    .contact-content .contact-text-block-ruler 
    {
        height: 475px;
    }
    .contact-text-block-copy 
    {
        width: 400px;
    }
    .contact-text-block-copy p 
    {
        font-size: 1.3rem;
    }
    #contact-cta
    {
        display: block;
        align-self: center;
        justify-self: center;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin: 0.5rem 0rem 0rem 0rem;
    }
}
@media (max-width: 550px)
{
    .contact-image-block 
    {
        height: 440px;
    }
    .contact-image-block img 
    {
        height: 375px;
    }
    .contact-text-block 
    {
        height: 440px;
        gap: 1rem;
    }
    .contact-text-block-titles h1 
    {
        font-size: 4rem;
    }
    .contact-content .contact-text-block-ruler 
    {
        height: 375px;
    }
    .contact-text-block-copy 
    {
        width: 310px;
    }
    .contact-text-block-copy p 
    {
        font-size: 1rem;
    }
    #contact-cta
    {
        font-size: 1.1rem;
    }
}
@media (max-width: 450px)
{
    .contact-image-block 
    {
        height: 380px;
    }
    .contact-image-block img 
    {
        height: 325px;
    }
    .contact-text-block 
    {
        height: 380px;
        gap: 0.5rem;
    }
    .contact-text-block-titles h1 
    {
        font-size: 3rem;
    }
    .contact-content .contact-text-block-ruler 
    {
        height: 275px;
    }
    .contact-text-block-copy 
    {
        width: 300px;
    }
    .contact-text-block-copy p 
    {
        font-size: 0.9rem;
    }
    #contact-cta
    {
        font-size: 1rem;
    }
}

/*Responsive Homepage (Contact section)*/
@media (max-width: 1250px)
{
    #about-text-block-ruler-two
    {
        width: 1.5px;
        height: 340px;
    }
}
@media (max-width: 1075px)
{
    #about-text-block-ruler-two
    {
        width: 2px;
        height: 300px;
    }
}
@media (max-width: 950px)
{
    #about-text-block-ruler-two
    {
        height: 420px;
    }
    #about-about
    {
        display: flex;
        flex-direction: column-reverse;
    }
}
@media (max-width: 550px)
{
    #about-text-block-ruler-two
    {
        height: 340px;
    }
}
@media (max-width: 450px)
{
    #about-text-block-ruler-two
    {
        height: 260px;
    }
}

/*Responsive Projects Page*/
@media (max-width: 1450px)
{
    .projects-page-project-card-image 
    {
        margin: 0.5rem 0.5rem 0.5rem 5.5rem;
    }
}
@media (max-width: 1280px)
{
    .projects-page-project-card-image 
    {
        margin: 0.5rem 0.5rem 0.5rem 1.5rem;
    }
}
@media (max-width: 1220px)
{
    .projects-page-project-card-text
    {
        width: 600px;
    }
}
@media (max-width: 1120px)
{
    .projects-page-section-headers
    {
        font-size: 4rem;
    }
    .projects-page-project-card
    {
        height: 400px;
    }
    .projects-page-project-card-text
    {
        width: 550px;
    }
    .projects-page-project-card-text h2
    {
        font-size: 2.3rem;
    }
    .projects-page-project-card-text p
    {
        font-size: 1.2rem;
    }
    .projects-page-project-card-text h4
    {
        font-size: 1.2rem;
    }
    .projects-page-project-card-text h3
    {
        font-size: 1rem;
    }
    .placeholder-image
    { 
        border-radius: 20px;
        height: 300px;
        width: 300px;
    }
}
@media (max-width: 1000px)
{
    .projects-page-section-headers
    {
        padding: 0.5rem 0rem 0rem 0rem;
        font-size: 3rem;
    }
    .projects-page-project-card
    {
        margin: 2rem 0rem 0rem 0rem;
        height: 350px;
    }
    .projects-page-project-card-text
    {
        width: 500px;
    }
    .projects-page-project-card-text h2
    {
        font-size: 1.8rem;
    }
    .projects-page-project-card-text p
    {
        font-size: 1rem;
    }
    .projects-page-project-card-text h4
    {
        font-size: 1rem;
    }
    .projects-page-project-card-text h3
    {
        font-size: 0.9rem;
    }
    .placeholder-image
    {
        height: 300px;
        width: 300px;
    }
}
@media (max-width: 950px)
{
    #graphic-design-projects
    {
        align-items: center;
    }
    #ui-ux-design-projects
    {
        align-items: center;
    }
    .projects-page-section-headers
    {
        align-self: flex-start;
        font-size: 3rem;
    }
    .projects-page-project-card
    {
        flex-direction: column-reverse;
        margin: 2rem 0rem 0rem 0rem;
        width: auto;
        height: auto;
    }
    .projects-page-project-card-text
    {
        width: 600px;
    }
    .projects-page-project-card-text h2
    {
        color: #000000;
        font-size: 2.5rem;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem 0rem 1rem 0.5rem;
    }
    .projects-page-project-card-text p
    {
        color: #000000;
        font-size: 1.2rem;
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem 0rem 1.5rem 0.5rem;
    }
    .projects-page-project-card-text h4
    {
        font-size: 1.2rem;
        margin: 0rem 0rem 1.5rem 0.5rem;
    }
    .projects-page-project-card-text h3
    {
        font-size: 1.1rem;
    }
    .projects-page-project-card-image 
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0.5rem 0.5rem 1.5rem 0.5rem;
    }
    .placeholder-image
    { 
        border-radius: 25px;
        height: 600px;
        width: 600px;
    }
}
@media (max-width: 700px)
{
    .projects-page-section-headers
    {
        align-self: flex-start;
        font-size: 2.5rem;
    }
    .projects-page-project-card-text
    {
        width: 525px;
    }
    .projects-page-project-card-text h2
    {
        font-size: 1.8rem;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
    }
    .projects-page-project-card-text p
    {
        font-size: 1.2rem;
    }
    .projects-page-project-card-text h4
    {
        font-size: 1.2rem;
    }
    .projects-page-project-card-text h3
    {
        font-size: 1rem;
    }
    .placeholder-image
    { 
        height: 525px;
        width: 525px;
    }
}
@media (max-width: 620px)
{
    .projects-page-section-headers
    {
        align-self: flex-start;
        font-size: 2rem;
    }
    .projects-page-project-card-text
    {
        width: 400px;
    }
    .projects-page-project-card-text h2
    {
        font-size: 1.5rem;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
    }
    .projects-page-project-card-text p
    {
        font-size: 1rem;
    }
    .projects-page-project-card-text h4
    {
        font-size: 1rem;
    }
    .projects-page-project-card-text h3
    {
        font-size: 0.9rem;
    }
    .placeholder-image
    { 
        height: 400px;
        width: 400px;
    }
}
@media (max-width: 500px)
{
    .projects-page-project-card
    {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
    .projects-page-section-headers
    {
        align-self: flex-start;
        font-size: 1.5rem;
    }
    .projects-page-project-card-text
    {
        width: 300px;
    }
    .projects-page-project-card-text h2
    {
        font-size: 1.2rem;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
    }
    .projects-page-project-card-text p
    {
        font-size: 0.9rem;
    }
    .projects-page-project-card-text h4
    {
        font-size: 0.9rem;
    }
    .projects-page-project-card-text h3
    {
        font-size: 0.8rem;
    }
    .placeholder-image
    { 
        height: 300px;
        width: 300px;
    }
}

/*Responsive Project Pages Title*/
@media (max-width: 1350px)
{
    .project-title
    {
        height: 75px;
    }
    .project-title h1
    {
        
        margin: 0.2rem 0rem 0rem 1rem;
        font-size: 4rem;
    }
    .project-title a
    {
        top: 15.2rem;
    }
}
@media (max-width: 1075px)
{
    .project-title
    {
        height: 62px;
    }
    .project-title h1
    {
        color: #000000;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
        font-size: 3rem;
        margin: 0.4rem 0rem 0rem 1rem;
    }
    .project-title a
    {
        top: 14.5rem;
    }
}
@media (max-width: 810px)
{
    .project-title
    {
        height: 58px;
    }
    .project-title h1
    {
        color: #000000;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
        font-size: 2.5rem;
        margin: 0.5rem 0rem 0rem 1rem;
    }
    .project-title a
    {
        top: 13.75rem;
        font-size: 1rem;
        padding: 0.5rem;
    }
    .project-title a:hover 
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
        border: solid 2px #DD1212;
    }
}
@media (max-width: 675px)
{
    .project-title
    {
        height: 50px;
    }
    .project-title h1
    {
        color: #000000;
        -webkit-text-stroke: 1px #000000;
        -moz-text-stroke: 1px #000000;
        font-size: 2rem;
        margin: 0.5rem 0rem 0rem 1rem;
    }
    .project-title a
    {
        top: 12.5rem;
        font-size: 0.8rem;
        padding: 0.5rem;
    }
    .project-title a:hover 
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
        border: solid 2px #DD1212;
    }
}
@media (max-width: 550px)
{
    .project-title
    {
        height: 46px;
    }
    .project-title h1
    {
        color: #000000;
        -webkit-text-stroke: 0.75px #000000;
        -moz-text-stroke: 0.75px #000000;
        font-size: 1.5rem;
        margin: 0.75rem 0rem 0rem 1rem;
    }
    .project-title a
    {
        top: 12.2rem;
    }
}
@media (max-width: 450px)
{
    .project-title
    {
        height: 44px;
    }
    .project-title h1
    {
        color: #000000;
        -webkit-text-stroke: 0.5px #000000;
        -moz-text-stroke: 0.5px #000000;
        font-size: 1.2rem;
        margin: 0.8rem 0rem 0rem 1rem;
    }
    .project-title a
    {
        top: 12rem;
    }
}

/*Responsive Portfolio Pages Pieces*/
@media (max-width: 1650px)
{
    .image-block img 
    {
        width: 800px;
    }
    .text-block-copy 
    {
        width: 350px;
    }
    .text-block-copy p 
    {
        font-size: 1.2rem;
    }
    .image-block::before 
    {
        width: 860px;
        height: calc(100% - 180px);
        left: -30px;
    }
}
@media (max-width: 1500px)
{
    .image-block img 
    {
        width: 700px;
    }
    .text-block-copy 
    {
        width: 350px;
    }
    .text-block-copy p 
    {
        font-size: 1.2rem;
    }
    .image-block::before 
    {
        width: 765px;
        height: calc(100% - 220px);
        left: -30px;
    }
}
@media (max-width: 1400px)
{
    .image-block 
    {
        height: 550px;
    }
    .image-block img 
    {
        width: 600px;
    }
    .text-block 
    {
        height: 550px;
        gap: 1rem;
    }
    .text-block-titles h2 
    {
        font-size: 4rem;
    }
    .text-block-titles h1 
    {
        font-size: 5rem;
    }
    .project-objective .text-block-ruler 
    {
        height: 425px;
    }
    .project-ideation .text-block-ruler 
    {
        height: 380px;
    }
    .project-solution .text-block-ruler 
    {
        height: 405px;
    }
    .text-block-copy 
    {
        width: 350px;
    }
    .text-block-copy p 
    {
        font-size: 1.2rem;
    }
    .image-block::before 
    {
        width: 660px;
        height: calc(100% - 240px);
        left: -30px;
    }
}
@media (max-width: 1300px)
{
    .project-objective 
    {
        gap: 2rem;
    }
    .project-ideation 
    {
        gap: 2rem;
    }
    .project-solution 
    {
        gap: 2rem;
    }
    .image-block 
    {
        height: 500px;
    }
    .image-block img 
    {
        width: 550px;
    }
    .text-block 
    {
        height: 500px;
        gap: 1rem;
    }
    .text-block-titles h2 
    {
        font-size: 3.2rem;
    }
    .text-block-titles h1 
    {
        font-size: 4rem;
    }
    .project-objective .text-block-ruler 
    {
        height: 340px;
    }
    .project-ideation .text-block-ruler 
    {
        height: 304px;
    }
    .project-solution .text-block-ruler 
    {
        height: 324px;
    }
    .text-block-copy 
    {
        width: 330px;
    }
    .text-block-copy p 
    {
        font-size: 1.1rem;
    }
    .image-block::before 
    {
        width: 610px;
        height: calc(100% - 240px);
        left: -30px;
    }
}
@media (max-width: 1200px)
{
    .image-block img 
    {
        width: 500px;
    }
    .image-block::before 
    {
        width: 560px;
        height: calc(100% - 240px);
        left: -30px;
    }
}
@media (max-width: 1150px)
{
    .project-objective 
    {
        gap: 1rem;
    }
    .project-ideation 
    {
        gap: 1rem;
    }
    .project-solution 
    {
        gap: 1rem;
    }
    .image-block 
    {
        height: 500px;
    }
    .image-block img 
    {
        width: 450px;
    }
    .text-block 
    {
        height: 500px;
        gap: 1rem;
    }
    .text-block-titles h2 
    {
        font-size: 2.4rem;
    }
    .text-block-titles h1 
    {
        font-size: 3rem;
    }
    .project-objective .text-block-ruler 
    {
        height: 255px;
    }
    .project-ideation .text-block-ruler 
    {
        height: 228px;
    }
    .project-solution .text-block-ruler 
    {
        height: 243px;
    }
    .text-block-copy 
    {
        width: 300px;
    }
    .text-block-copy p 
    {
        font-size: 0.9rem;
    }
    .image-block::before 
    {
        width: 490px;
        height: calc(100% - 260px);
        left: -20px;
    }
}
@media (max-width: 1030px)
{
    .project-objective 
    {
        margin: 6rem 2rem 0rem 2rem;
    }
    .project-ideation 
    {
        margin: 0rem 2rem 0rem 2rem;
    }
    .project-solution 
    {
        margin: 0rem 2rem 2rem 2rem;
    }
    .image-block 
    {
        height: 400px;
    }
    .text-block 
    {
        height: 400px;
    }
    .image-block::before 
    {
        width: 490px;
        height: calc(100% - 180px);
        left: -18px;
    }
}
@media (max-width: 950px)
{
    .project-objective
    {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
        margin: 8rem 4rem 4rem 4rem;
    }
    .project-ideation
    {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
        margin: 4rem 4rem 4rem 4rem;
    }
    .project-solution
    {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
        margin: 4rem 4rem 4rem 4rem;
    }
    .image-block
    {
        justify-content: center;
        height: 600px;
    }
    .image-block img 
    {
        width: 600px;
    }
    .text-block
    {
        justify-content: center;
        height: 600px;
    }
    .text-block-titles h2 
    {
        font-size: 3rem;
    }
    .text-block-titles h1 
    {
        font-size: 3.5rem;
    }
    .project-objective .text-block-ruler 
    {
        height: 300px;
    }
    .project-ideation .text-block-ruler 
    {
        height: 266px;
    }
    .project-solution .text-block-ruler 
    {
        height: 284px;
    }
    .text-block-copy 
    {
        width: 350px;
    }
    .text-block-copy p 
    {
        font-size: 1rem;
    }
    .image-block::before 
    {
        width: 640px;
        height: calc(100% + 40px);
        left: -20px;
    }
}
@media (max-width: 650px)
{
    .image-block img 
    {
        width: 400px;
    }
    .text-block-titles h2 
    {
        font-size: 2.6rem;
        -webkit-text-stroke: 1.5px #DD1212;
        -moz-text-stroke: 1.5px #DD1212;
    }
    .text-block-titles h1 
    {
        font-size: 3rem;
    }
    .project-objective .text-block-ruler 
    {
        height: 260px;
    }
    .project-ideation .text-block-ruler 
    {
        height: 230px;
    }
    .project-solution .text-block-ruler 
    {
        height: 250px;
    }
    .text-block-copy 
    {
        width: 300px;
    }
    .text-block-copy p 
    {
        font-size: 0.9rem;
    }
    
    .image-block::before 
    {
        width: 460px;
        height: calc(100% + 40px);
        left: -30px;
    }
}
@media (max-width: 475px)
{
    .image-block img 
    {
        width: 350px;
    }
    .text-block-titles h2 
    {
        font-size: 2.2rem;
    }
    .text-block-titles h1 
    {
        font-size: 2.5rem;
    }
    .project-objective .text-block-ruler 
    {
        height: 225px;
    }
    .project-ideation .text-block-ruler 
    {
        height: 200px;
    }
    .project-solution .text-block-ruler 
    {
        height: 215px;
    }
    .text-block-copy 
    {
        width: 250px;
    }
    .text-block-copy p 
    {
        font-size: 0.8rem;
    }
    .image-block::before 
    {
        width: 380px;
        height: calc(100% + 20px);
        left: -15px;
    }
}

/*Responsive Contact Page*/
@media (max-width: 850px)
{
    #contact-page
    {
        height: auto;
    }
    #contact-sections 
    {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    #contact-info 
    {
        display: flex;
        flex-direction: row;
        flex: 0 0 160px;
        gap: 3rem;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }
    #contact-divider 
    {
        width: 100%;
        height: 0px;
    }
}
@media (max-width: 660px)
{
    #contact-sections 
    {
        gap: 1rem;
    }
    #contact-info 
    {
        flex: 0 0 160px;
        gap: 3rem;
    }
    .contact-item img 
    {
        width: 40px;
    }
    .contact-item h2 
    {
        font-size: 1.2rem;
    }
    .contact-item a 
    {
        font-size: 1rem;
    }
    .contact-item a:hover 
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    #contact-form 
    {
        gap: 2rem;
    }
    #contact-form form 
    {
        gap: 1.5rem;
    }
    #contact-form label 
    {
        font-size: 1.5rem;
    }
    #contact-form input::placeholder,
    #contact-form textarea::placeholder 
    {
        font-size: 1.2rem;
    }
    #contact-form input,
    #contact-form textarea 
    {
        font-size: 1.2rem;
    }
    #contact-form textarea 
    {
        min-height: 250px;
    }
    #contact-form button 
    {
        padding: 0.5rem;
        font-size: 1.2rem;
    }
    #contact-form button:hover 
    {
        -webkit-text-stroke: 1px #DD1212;
        -moz-text-stroke: 1px #DD1212;
    }
}
@media (max-width: 575px)
{
    #contact-sections 
    {
        gap: 0.5rem;
    }
    #contact-info 
    {
        flex: 0 0 160px;
        gap: 2.5rem;
    }
    .contact-item img 
    {
        width: 30px;
    }
    .contact-item h2 
    {
        font-size: 1.1rem;
    }
    .contact-item a 
    {
        font-size: 0.9rem;
    }
    .contact-item a:hover 
    {
        -webkit-text-stroke: 0.5px #DD1212;
        -moz-text-stroke: 0.5px #DD1212;
    }
    #contact-form 
    {
        gap: 2rem;
    }
    #contact-form form 
    {
        gap: 1.5rem;
    }
    #contact-form label 
    {
        font-size: 1.2rem;
    }
    #contact-form input::placeholder,
    #contact-form textarea::placeholder 
    {
        font-size: 1.1rem;
    }
    #contact-form input,
    #contact-form textarea 
    {
        font-size: 1.1rem;
    }
    #contact-form textarea 
    {
        min-height: 250px;
    }
    #contact-form button 
    {
        padding: 0.5rem;
        font-size: 1.1rem;
    }
    #contact-form button:hover 
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
}
@media (max-width: 515px)
{
    #contact-sections 
    {
        gap: 1.5rem;
    }
    #contact-info 
    {
        display: flex;
        flex-direction: column;
        flex: 0 0 260px;
        gap: 3rem;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }
    .contact-item img 
    {
        width: 40px;
    }
    .contact-item h2 
    {
        font-size: 1.2rem;
    }
    .contact-item a 
    {
        font-size: 1.1rem;
    }
    .contact-item a:hover 
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
    #contact-form 
    {
        gap: 2rem;
    }
    #contact-form form 
    {
        gap: 1.5rem;
    }
    #contact-form label 
    {
        font-size: 1.2rem;
    }
    #contact-form input::placeholder,
    #contact-form textarea::placeholder 
    {
        font-size: 1.1rem;
    }
    #contact-form input,
    #contact-form textarea 
    {
        font-size: 1.1rem;
    }
    #contact-form textarea 
    {
        min-height: 250px;
    }
    #contact-form button 
    {
        padding: 0.5rem;
        font-size: 1.1rem;
    }
    #contact-form button:hover 
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
}

/*Responsive Footer*/
@media (max-width: 800px)
{
    .footer h2
    {
        font-size: 1rem;
    }
    .footer a
    {
        font-size: 1rem;
    }
    .footer a:hover
    {
        font-size: 1rem;
    }
}
@media (max-width: 675px)
{
    .footer h2
    {
        font-size: 0.8rem;
    }
    .footer a
    {
        font-size: 0.8rem;
    }
    .footer a:hover
    {
        font-size: 0.8rem;
    }
    .footer a:hover
    {
        -webkit-text-stroke: 0.75px #DD1212;
        -moz-text-stroke: 0.75px #DD1212;
    }
}
@media (max-width: 550px)
{
    .footer 
    {
        flex-direction: column;
        height: auto;
        align-items: center;
    }
}