html {
    background-color: gray;
    color: whitesmoke;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-attachment: fixed;
}
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;
}
h2{
    margin-top: 30px;
    text-align: center;
}

header h2{
    font-size: 22px;
    margin: 0 auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
}
header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}







/* Header-bar grid */
.header-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 25px 25px 25px 25px;
}

.header-name{
    text-align: center;
    grid-row-start: 3;
    grid-column-start: 2;
}

.header-links{
    grid-row-start:2;
    grid-column-start:3;

    text-align: center;
    font-weight: bold;
}




/* main-body grid */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px 100px;
}

.content {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
}

.responsive {
    width: 70%;
    height: auto;
}

.right {
    grid-column-start: 3;

}



/* PRETTY TWINKLE STARS */

@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;}
}

.stars, .twinkling {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000  repeat top center;
  background-image: url(https://www.script-tutorials.com/demos/360/images/stars.png);
  background-repeat: repeat-y;
  background-attachment: fixed;
  z-index:-2;
}

.twinkling{
  background:transparent url(https://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  
  z-index:-1;

  -moz-animation:move-twink-back 300s 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 500s linear infinite;
}