body {
  /*background-color: black;*/
  background: black  url(https://smoothee.neocities.org/images/night.png) no-repeat fixed top left;
  background-size: auto;
  color: white;
  font-family: helvetica;
  font-size: 14px;
  margin-bottom: 0;
}

/*page banner/navigation*/
#banner {
  position: fixed;
  margin-left: -8px;
  top: 0;
  padding: 10px;
  padding-bottom: 10px;
  background-color: black;
  border-bottom: 10px groove gray;
  width: 100%;
  box-sizing: border-box;
}
#banner nav a {
  margin: 20px;
  font-style: italic;
  font-weight: normal;
  color: gray;
  letter-spacing: -0.05em;
}
#banner nav a:hover {
  color:green;
}

/*everything fitting inside lonn minsize room*/
#centralarticle {
  width: 950px;
  height: 587px;
  box-sizing: border-box;
  padding: 50px 80px;
  margin: 90px auto;
  margin-bottom: 200px;
  background: white url(https://smoothee.neocities.org/images/lonn.png) no-repeat scroll;
  background-size: 100%;
}

.lonngraybg {
  background-color: #323232;
}

/*title at top of page styling*/
#pagetitle {
  margin: 3% 0;
  letter-spacing: -0.07em;
}
#pagetitle h1, #pagetitle h2 {
  margin: 0 0;
}
#pagetitle h1 {
  font-style: italic;
  font-weight: bold;
  font-size: 30px
}
#pagetitle h2 {
  font-style: italic;
  font-weight: normal;
  color: gray;
  font-size: 17px
}

/*links*/
a {
  color: gray
}
a:hover {
  color:green;
}

/*figures*/
#rightfig {
  float: right;
  margin-right: 20%;
  width: 300px;
}
#rightfig img {
  width: 300px;
  padding: 3%;
  background-color: black;
}
#rightfig figcaption {
  padding: 3%;
  background-color: black;
  font-size: 10px;
}

/*portal*/
.portal {
  background: white no-repeat fixed;
  background-origin: padding-box;
  background-clip: padding-box;
  background-size: cover;
  width: 300px;
  height: 200px;
  margin-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.portal h1 {
  color: white;
  letter-spacing: -0.07em;
  font-style: italic;
  font-weight: bold;
}
.portal.left {
  float: left;
  margin-left: 300px;
}
.portal.right {
  float: right;
  margin-right: 300px;
}
.portalspace {
  height: 180px;
}

.portal.left.mauve {
  background-image: url(https://smoothee.neocities.org/images/mauve.png);
  background-position: left 50px top -68px
} 
.portal.right.ridge {
  background-image: url(https://smoothee.neocities.org/images/ridge.png);
  background-position: left 600px top 0
} 
.portal.left.geodesic {
  background-image: url(https://smoothee.neocities.org/images/geodesic.png);
  background-position: left -700px top -100px
} 
.portal.right.theweight {
  background-image: url(https://smoothee.neocities.org/images/theweight.png);
  background-position: left 100px top 0
}