body {
    background-image: url("img/stormynight.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: darkslategrey;
}
/* body { 
    font-family: sans-serif;
    /* background:url("img/james_star.jpg");
    background-image:url("img/james_star.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color:rgb(151, 151, 151);  
  } */
  
/* .hero {
    background-image:url("img/james_star.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color:rgb(151, 151, 151);
} */

nav {
    padding: 1em;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    background-color: black;
    /* text-shadow: 2px 2px 5px rgb(250, 163, 163); */
    text-align: center;
    /* background-image:url("img/james_star.jpg"); */
    background-repeat: no-repeat;

}

.navbar-item {
    padding: 1em;    
}

h1 {
    /* background-color: rgb(44, 129, 207); */
    align-self: flex-start;
    /* text-shadow:rgb(44, 2, 2); */
    text-shadow: 2px 2px 5px rgb(29, 1, 1);
    background-color: rgb(250, 237, 163);
    border-radius: 50%;
    padding: 1em;
    text-align: left;
    width: 20%;
    color: darkred;
}

#content_section {
    display: none;
    border-radius: 35%;

}

.post {
    display: none;
}

.label {
    display: show;
}

.entry {
    display: none;
    color: lightslategrey;
    width: 90%;
    background-color: bisque;
    width: fit-content;
    background-size: cover;


}   

p {
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 35%;
    width: fit-content;

}

p.vent {
    background-color: rgb(46, 49, 53);
    padding: 0.75em;
    width: fit-content;
    border-radius: 10% 2em;
    color: silver;
    border: rgb(23, 24, 24) solid 0.2em;

}

h2 {
    text-align: center;
}

.formatted_post {
    border: rgb(23, 24, 24) 40%;
    white-space: pre-wrap;
    border-radius: 35%;
    color: rgb(46, 49, 53); 
}

button {
    background-color: rgb(46, 49, 53);
    border: rgb(23, 24, 24) solid 0.15em;
    color: silver;
    font-style: italic;
    margin: 1em;
    padding: 1em;
}

.created {
    text-align: center;
}

#content_section {
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10%;
    padding: 3em;
}

/* 
.dropdown {
    color: silver;
} */

/*general stying for page*/ 
* { box-sizing: border-box; }


/*styling for Scene*/
.scene {
  width: 200px;
  height: 200px;
  margin: 20px;
  perspective:600px;
  float: right;
}

.rollBtn{
  background:black;
  color:white;
  border: .2em solid lightgrey;
  margin:auto 0;
  font-size:1.5em;
  margin-top:1em;
  width:200px;

}

/*styling for 3D Cube*/
.cube {
  width:200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
  
}

/*styling for 3D Cube transforms / animations on face select (on roll)*/
.cube.show-1  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-2  { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-3  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-4   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-5   { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-6 { transform: translateZ(-100px) rotateX(  90deg); }

/* universal style for cube faces  */
.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 4px solid white;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
  border-radius: 50%;

}

/* individual styling for each numbers face  */
.cube__face--1  { background: black;  opacity: 0.75;}
.cube__face--3  { background: black;   opacity: 0.75; }
.cube__face--2  {  background: black;   opacity: 0.75; }
.cube__face--4  {  background: black;   opacity: 0.75; }
.cube__face--5   {  background: black;   opacity: 0.75; }
.cube__face--6 {  background: black;  opacity: 0.75; }

.cube__face--1  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--2   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--3  { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--4   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--5   { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--6 { transform: rotateX(-90deg) translateZ(100px); }

label { 
    margin-right: 10px;
    /* float: right; */
}

input {
    /* background-color: rgb(144, 127, 244); */
    background-color: rgb(250, 163, 163);
    border:rgb(23, 24, 24) solid .15em;
    margin: 1em;
    /* float: right; */

}

textarea {
    /* background-color: rgb(144, 127, 244); */
    background-color: rgb(250, 163, 163);
    border:rgb(23, 24, 24) solid .15em;
    margin: 1em;
}

/* .dropdown-content {
    background-color: rgb(144, 127, 243);
    background-image: inherit;
<<<<<<< Updated upstream
} */
/* ======= */
/* } */

/* #positive {
    background: url("img/spyglass.jpeg");
    background-position: center;
    background-repeat: no-repeat;
} */

th {
    font-style: italic;
    text-decoration: underline;
}
.table-responsive {
    /* font: bold; */
    background-color: lightsteelblue;
    color: black;
}

.text-right {
    background-color: lightsteelblue;
}

.pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
    height: 5em;
}

.pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
}

.text-right {
    color: black;
    width: 70%;
    width: fit-content;
    border-radius: 0%;
    border: .25em solid grey;
    border-style: dotted;
}

btn {
    color: darkgreen;
}

.table-responsive {
    width: 70%;
    border: .25em solid grey;
}

#create {
    /* float: right; */
    margin-bottom: 5em;
    background-color: #6aa6ed;
}

input {
    background-color: #6aa6ed;
}

#mic_btn {
    border-radius: 100%;
    background-color: #6aa6ed;
}


#mic {
    border-radius: 46%;
}


.div-container {
    display: grid;
    text-align: center;
    padding: 20px 0;
    font-size: 15px;
    align-content: space-evenly;
    /* grid-template-rows: auto; */
    grid-template-columns: auto auto auto auto;
}

#textbox {
    width: 60%;
    background-color: darkgrey;
    border: white dashed .5em;
}