/* ============================================================================================== 
SED Innovations
https://sed.am
https://mkrtchyan.ga
================================================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Added for consistent sizing */
}

body {
    background-color: #2a2a2a; /* Set background color for the entire page */
    color: #e0e0e0; /* Light gray text color for better visibility */
    font-family: Arial, sans-serif;
}

/* Header styles */
header {
    background-color: rgba(33, 33, 33, 0.9);
    color: #ffffff;
    display: block;
    font: 14px/1.3 Arial, sans-serif;
    height: 50px;
    position: relative;
    z-index: 5;
}

header h2 {
    font-size: 22px;
    margin: 0 auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
    color: #ffffff; /* Ensuring text is visible on header background */
}

header a, header a:visited {
    text-decoration: none;
    color: #fcfcfc; /* Light color for links */
}

/* Keyframes for animations */
@keyframes move-twink-back {
    from {background-position: 0 0;}
    to {background-position: -10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position: 0 0;}
    to {background-position: -10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position: 0 0;}
    to {background-position: -10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position: 0 0;}
    to {background-position: -10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position: 0 0;}
    to {background-position: 10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position: 0 0;}
    to {background-position: 10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position: 0 0;}
    to {background-position: 10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position: 10000px 0;}
}

/* Background layers */
.stars, .twinkling, .clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.stars {
    background: #2a2a2a url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
    z-index: 0;
}

.twinkling {
    background: transparent url(img/twinkling_gray.png) repeat top center;
    z-index: 1;
    -moz-animation: move-twink-back 200s linear infinite;
    -ms-animation: move-twink-back 200s linear infinite;
    -o-animation: move-twink-back 200s linear infinite;
    -webkit-animation: move-twink-back 200s linear infinite;
    animation: move-twink-back 200s linear infinite;
}

/* Additional text styles */
h1, h2, h3, h4, h5, h6 {
    color: #e0e0e0; /* Ensuring headers are visible */
}

p, li, span, a {
    color: #e0e0e0; /* Ensuring other text elements are visible */
}

/* Button styles */
button, .send-button-icon {
    color: #ffffff; /* Text color for buttons */
}

/* Additional styles for suggestions section */
.suggestions-header {
    color: #ffffff; /* Text color for suggestions header */
}

.grid-item {
    color: #ffffff; /* Text color for grid items */
}

.quote-notice, .quote-wrapper, .quote, .email {
    color: #e0e0e0; /* Ensuring visibility of text in quotes and notices */
}