/* CSS files add styling rules to your content */

body {
  font-family: "Indie Flower";
  margin: 2em;
  background: black;
}

h1 {
  font-style: italic;
  color: white;
   max-width: 70%;
}

h2 {
  font-style: italic;
  color: white;
   max-width: 70%;
}

button {
  font-family: "Indie Flower";
  color: blue;
  background: darkgrey;
}

input {
   font-style: italic;
  font-family: "Indie Flower";
  color: black;
  font-size: 20px;
    width: 300px;
  height: 30px;
  border: 3px solid cyan;
}

label {
  font-style: italic;
  color: white;
  font-size: 20px
}

h3 {
  font-style: italic;
  color: white;
  font-size: 12px;
   max-width: 70%;
}

p {
  font-style: italic;
  color: white; 
  max-width: 70%;
}

p.error {
  font-style: italic;
  color: red; 
}

a {
  font-style: italic;
  color: cyan; 
  text-decoration: none;
}

a:hover {
 text-decoration: underline; 
}

.square img {
  position: relative;
  
    bottom: -10%;
}

.square {
  width: 500px;
  height: 500px;
  background-color: grey;
}

.sidenav {
  height: 100%;
  width: 10vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 100%;
  color: #818181;
  display: block;
}

.C h {
  color: RED;
}

.News {
  background-color: grey;
  width: 50vw;
  padding: 15px;
}

.News h {
  color: white;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.options button {
  color: cyan;
  background-color: rgba(0, 0, 20, 200);
  font-family: "Indie Flower";
}



.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  background: grey;
}

.price {
  color: lightgrey;
  font-size: 22px;
  text-align: center;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: darkgrey;
  position: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}
 .Friend button {
       color: black;
  background-color: white;
  font-family: "Indie Flower";
   left: 100%;
  padding: 3px;
   outline: 0;
    }

 .Friend p {
       color: white;
  font-family: "Indie Flower";
  padding: 3px;
   margin-right: 40%;
    }

.card button:hover {
  opacity: 0.7;
}

 .Friends{
        max-height: 75vh;
        max-width: 90%;
        background-color: Black;
        overflow-y:scroll;
    }

 .Friend {
        height: 50px;
        width: 75%;
        background-color: grey;
    }

.FriendElement {
      display: inline-block;
}

.demo {
  width: 800px;
  height: 450px;
  z-index: 0;
}

.StoreEmbed {
  float: right;
 width: 90vw;
  height: 100%;
}