:root {
--primary-color: #FFF;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
min-height: 100vh;
}

body {
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}

a {
text-decoration: none;
color: var(--primary-color);
}

.content {
z-index: 10;
font-weight: 300;
font-size: 36px;
line-height: 1.2;
margin-bottom: 15px;
top: -5px;
}

.content h1 {
color: white;
text-shadow: #2d2d2d 2px 2px;
}

.desktop-header {
color: black;
font-size: 50px;
}

.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: black;
border: 1px #fff solid;
border-radius: 5px;
margin-top: 25px;
opacity: 0.7;
}

.btn:hover {
transform: scale(0.98);
}

#showcase-front-stoop {
top: -40px;
}

.social a {
margin: 0 5px;
}

#follow-us .follow-us {
padding-left: 40px;
padding-right: 40px;
text-align: center;
}

#follow-us h1 {
color: black;
}

.photos {
padding: 50px 0 20px 0;
}

/* Largest Header */
@media (max-width: 866px) {
.content h1 {
    font-size: 48px;
}
}

/* Start of Desktop Experience Range (width >= 768px) */
@media (min-width: 768px) {

.main-text {
    padding: 0 25%;
    font-size: 20px;
}

.showcase {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;

    /*flex-direction allows us to use these, and will center it to the main (Y) and the cross axis (X)*/
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    top: -20px;
}

#intro-text, #vibe-text {
    padding-left: 25vw;
    padding-right: 25vw;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--primary-color), url('https://space-ny3-simplysuite-prod-001.nyc3.cdn.digitaloceanspaces.com/common/s3-video-placeholder.png') no-repeat center center/cover;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;

    /*  This will move the video along the X/Y axis, and will stop the top/left attributes above
        from putting the top-left corner of the video into the center of the viewport */
    transform: translate(-50%, -50%);
}

/* Use :after sudo-selector (as opposed to a div) to describe the overlay
This is used mostly for overlays, but you can also insert content (Like the word "hello") after the video container*/
.video-container:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
}

/* Start of Mobile Experience Range (width <= 767px) */
@media (max-width: 767px) {

#intro-text, #vibe-text {
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 20px;
    padding-top: 0px;
    top: -40px;
    text-align: left;
    background: #f9f1f1;
}

#intro-text p, #vibe-text p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: auto;
}

#intro-text h2, #vibe-text h2 {
    margin: 10px 0;
    color: var(--primary-color);
}

.content h1 {
    color: black;
    text-shadow: none;
}

.showcase {
    position: relative;
    width: 100vw; /* Note that this is different than the desktop experience*/
    display: flex;
    flex-direction: column;

    /*flex-direction allows us to use these, and will center it to the main (Y) and the cross axis (X)*/
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0px;
    top: -20px;
}

.mobile-experience {
    position: relative;
}

.video-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: var(--primary-color), url('https://space-ny3-simplysuite-prod-001.nyc3.cdn.digitaloceanspaces.com/common/s3-video-placeholder.png') no-repeat center center/cover;
}

.video-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}
}

/* Smallest Header */
@media (max-width: 598px) {
.content h1 {
    font-size: 25px;
}
}

/* Smallest Header */
@media (max-width: 343px) {
.content h1 {
    font-size: 20px;
}
}