/*  ===== MOBILE styles (reside at the top and are inherited by all devices) ===== */
/*  ===== See tablet, desktop, and print @media queries at the bottom. */


/*   ----- Imports  -----  */
          /* Add fonts from the app's server 
@font-face {                
  font-family: 'FontName';
  src: url('FontName.woff2') format('woff2');
} 
          */                           

          /* ...or hosted services like Google Fonts 
@import url(//fonts.googleapis.com/css?family=Font+Name);
          */

		/*  @import '../node_modules/modern-normalize/modern-normalize.css'; */
          /* npm install modern-normalize 
            Resets elements for browser consistancy.  
            http://nicolasgallagher.com/about-normalize-css/ 
          */

          /* Component-specific stylesheets, if any 
@import "component1.css";   
          */

/*   ----- Variables  -----  */
:root {
  --custom-color-name:;
  --custom-embellishment-name:;
}

/*  ----- Viewport ----- elements inherited by all remaining elements ----- */
body {       /* Can alternatively define in html {} or :root {} */
  color:#497383;
  background-color:#1c2b31;
  font-family:;
  font-size:;
  margin:;
  padding:;
}
html {
  background-color: #1c2b31;
}

/* ----- Anchors ----- Text links */
a {}
a:link {}
a:hover {}
a:active {}
a:visited {}

/*  ----- Navigation ----- Override text links for navigation only.  */
nav {}
nav a {}

/*  ----- Page layout blocks -----  */
header {}
main {}
section {}
  article {}
    #topic1 {}
    #topic2 {}
    #gallery1 {}
    #gallery2 {}
div {}
aside {}
footer {}

/*  -----  Typography  ----- */
p {}
br {}
ol, ul, dl {}
li {}
dt {}
dd {}

h1, h2, h3, h4, h5, h6 {
  color: rgb(255, 241, 231);
} /* Define consistant font family.*/
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

abbr {}
acronym {}
address {}
blockquote {}
  q {}
  cite {}
em {}
hr {}
mark {}
s {}
span {}
strong {}
sub {}
sup {}
time {}

/*  ----- Coding or instructional typography ----- */
pre {}
code {}
kbd {}
samp {}
var {}
del {} 
ins {}

/*  ----- Table ----- */
/* table {border-collapse: collapse}
caption {background-color: orange;  
    border: 1px solid gray;  
    color: white;
    font-weight: bold;
    padding: 1% 0;}
thead {}
tbody {text-align: center;}
tfoot {}
tr {}
  tr:nth-child(even) {}
tr td {border-bottom: 1px solid orange;}
th {}
td {}
  td:nth-child(1) {}
colgroup {}
data {}
datalist {} */


/*  ----- Form ----- */
form {}
fieldset {}
  legend {}
label {}
  button {}
  input {}
  output {}
  meter {}
  progress {}
  .select,
  select {
    width: 100%;
  }
    optgroup {}
    option {}
  textarea {}

/* ----- Media ----- */
figure {}
  figcaption {}
img {}
svg {}
picture {}
  source {}
iframe {}
video {}
audio {}
embed {}
object {}


/*  ----- Classes for alignment, positioning, widths, grids, embellishments, and animation -----  */
.floatright {}
.floatleft {}
.center-middle {}

.ten {}
.twenty {}
.thirty {}
.forty {}
.fifty {}
.sixty {}
.seventy {}
.eighty {}

.radius {}
.circle {}
.boxshadow {}
.tshadow {} 
.gradient {}
.shape {}

/*  ----- Select by ID -----  */
#box_main {
  background-color: #2e4852;
  color: rgb(255, 241, 231);
}
#box_main h1 {
  color: rgb(255, 241, 231);
}
#box_main h2 {
  color: rgb(255, 241, 231);
}
#box_main h3 {
  color: rgb(255, 241, 231);
}
#box_main h4 {
  color: rgb(255, 241, 231);
}
#page_title {
  color: rgb(255, 241, 231);
}
.navbar {
background-color: #1c2b31;
}

.dropdown-content {
  background-color: #1c2b31;
}

@keyframes App-logo {}

/*   ===== TABLET  media query overrides mobile styles ===== */
@media all and (min-width: 600px) {}

/*   ===== DESKTOP  media query overrides mobile and tablet styles ===== */
@media all and (min-width: 1080px) {}

/*   ===== PRINT  media query overrides previous styles =====  */
@media print {}