/*  ===== 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 consistency.  
          https://www.npmjs.com/package/modern-normalize
        */

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

@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@100&family=Orbitron&family=Roboto+Mono&family=Tilt+Prism&display=swap');

/*   ----- Variables  -----  */
:root {
  --accent: rgb(239, 208, 184);
  --dark: rgb(33, 55, 82);
  --medium: rgb(102, 184, 252);
  --light: rgba(195, 221, 255, 0.738);
}


/*  ----- Viewport ----- elements inherited by all remaining elements ----- */
body {
  /* Can alternatively define in html {} or :root {} */
  background-attachment: fixed;
  background-color: var(--dark);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Roboto Mono', monospace;

 
  margin: 2%;
  color: white;


  max-width: 100%;
}
header h1{
  text-align: end;
  font-family: 'Tilt Prism', cursive;
  font-size: 500%;
  letter-spacing: 10px;
  max-height: 100px;
  color: var(--light);
  margin: 2px 0;

}
/*  ----- nav-page layout blocks -----  */
header {

}
img{
  max-width:500px;
  display:block;
  padding:10px;
  margin: auto;
}
main {
  background-color: var(--light);
  width: 100%;
  padding: 10px 0;
}
.card {
  width: 25%;
  border-radius: 10%;
  background-color: rgba(115, 115, 181, 0.335);
 margin:2%;
  padding: 2%;
  font-size:80%;
  justify-content: center;
  text-align: center;


}
.card img {
  width: 200px;
  max-height: 200px;
  margin: 0 auto;
  border-radius: 50%;
}

section {
}
 article {


  border: 2px solid var(--dark);
  padding: 2%;
  width:60%;
  margin: auto;
 
}
article p{
  font-size: 110%;
}
.post-meta{
  align-self: left;
}
#topic1 {
}
#topic2 {
}
div {
}
aside {
}
footer {
  color: var(--light);
  background-color: var(--dark);

  border: 2px solid var(--light);
  padding: 15px;
  text-align: end;
}

/* ----- Anchors ----- Text links */
a {
}
a:link {
  color:var(--medium)
}
a:hover {
}
a:active {
}
a:visited {
  color:var(--light)
}

/*  ----- Navigation ----- Override text links for navigation only.  */
nav {
  font-family: 'Orbitron', sans-serif;
  width:50%;
  
}
nav a {
  text-decoration: none;

  background-color: var(--light);
  padding:10px;

  margin: 10px 0;
}
nav a:link, nav a:visited{
  color:var(--dark);
}
nav a:active {
  background: var(--light);
}
nav a:hover {
  opacity: 0.5;
}
.nav-page {
  background: var(--light);
  width: 100%;
  overflow: auto;
  text-align: center;
}
.nav-page a {
  font-size: 150%;
  float: left;
  color: var(--light);
  width: 33.3%;
}
.nav-article {
  position: fixed;
  bottom: 130px;
  float: left;
  width: 23%;
  text-align: end;
}
.nav-article a {
  background-color: var(--light);
  font-size: 110%;
  padding: 2%;
  display: block;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
}
h1 {
  font-size: 300%;
}
h2{
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  letter-spacing: 0.3cap;
}
.post-link, .post-link:visited{
  color:white;
  font-size: 150%;
}

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 {
}
caption {
}
thead {
}
tbody {
}
tfoot {
}
tr {
}
tr:nth-child(even) {
}
th {
}
td {
}
td:nth-child(1) {
}
colgroup {
}
data {
}
datalist {
}

/*  ----- Form ----- */
form {
}
fieldset {
}
legend {
}
label {
}
button {
}
input {
}
output {
}
meter {
}
progress {
}
select {
}
optgroup {
}
option {
}
textarea {
}

/* ----- Media ----- */

svg {
}
picture {
}
source {
}
iframe {
}
video {
}
audio {
}
embed {
}
object {
}

/*  ----- Classes for alignment, positioning, widths, grids, embellishments, and animation -----  */

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}


.floatright {
}
.floatleft {
}
.center-middle {
}

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

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

@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 {
}