* {
    margin: 1px;
    padding: 1px;
}

header {
    color: #586565;
    text-align: left; 
    text-shadow: 3px 2px 10px #99ffff, 3px 6px 18px #ddccff;
    font-family: 'Roboto', sans-serif;
 }

h1 {
    font-size: 18px;
    letter-spacing: 2px;
    color: #586565;
    text-shadow : 3px 2px 10px #99ffff, 3px 6px 18px #ddccff;
    font-family: 'Roboto', sans-serif;
    word-spacing: normal;
    margin: 5px 80px 5px 80px;
}

p {
    top: 50%;
    left: 50%;
    color: #39403E;
    text-align: left;
    text-shadow : 3px 2px 10px #99ffff, 3px 6px 18px #ddccff;
    font-family: 'Roboto', sans-serif;
    margin: 5px 80px 5px 80px;
    max-width: 65%;
}

h2 {
    width: 100%; 
    text-align: center; 
    color: #6a1f08;
    text-shadow : 6px 4px 18px #87CEEB, 6px 12px 32px #1E90FF;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    letter-spacing: 5px;
    border-bottom: 1px solid #000; 
    line-height: 0.1em;
    margin: 10px 0 20px;
} 

h2 span { 
    background:#708090; 
    padding:0 10px; 
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

.slide-container {
    height: auto;
    width: auto;
    overflow: auto;
    white-space: nowrap;
    margin: 5px 80px 5px 80px;
   }

.slide-container img {
    width: auto;
    max-height: 400px;
    height: 80%;
}

body {
     background-color: #cbddf1;
} 

@media (max-width: 768px) {
    h1 {
        font-size: 1.1rem;
    }

    p {
        font-size: 0.8rem;
    }

    body {
        display: block;
        }
        
    .container .row .col-sm-6 {
        display: block;
    }

    .row {
        flex-direction: column;
    }
}