body {
  height: 100%;
  width: 100%;
  font-family: 'Lora', serif;
  color: rgb(19, 18, 28);
  overflow-x: hidden;
  max-width: 100%;
}

.buy-button {
  border-radius: 10px;
  border-width: 0px;
  padding: 8px 15px;
  background-color: #000;
  color: aliceblue;
}

.buy-button:active {     
    background-color:#62ABEB;    
}

.clink:hover, .clink:visited, .clink:link, .clink:active
{
    text-decoration:underline;
}
.clink{ color: #62ABEB; } 

.fade-out {
  animation: fadeOut ease 0.6s;
  opacity:0;
  z-index: -1;
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
.bigImg{
  opacity: 0;
  z-index: -1;
}

.review-star{
  width:26px;
  line-height: 0.3%;
}

.review-author {
  line-height: 0.3%;
}

.review-text {
  line-height: 0.3%;
}

.robuxsquare {
  position:absolute;
  top: 680px;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 450px;
  max-width: 550px;
  width:100%;
  background-color: #d00f1c;
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
}
.articletitle {
    padding-top: 3%;
    padding-left: 2%;
}
.productItem {
  white-space: nowrap;
}

.articleImage {
  float:right; 
  max-width:393px; 
  width:100%; 
  padding-top:3.5%; 
  padding-right:3.5%;
}
.articletext {
    padding-left: 2%;
    width: 60%;
    word-wrap: break-word;
}
#overclick {
  position: fixed;
  display: none;
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0);
  z-index: 50; 
}
.fade-in {
  animation: fadeIn ease 0.6s;
  opacity:1;
  z-index: 5;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}
a { color: inherit; } 
.navbaritem{
  color: #ffffff;
  padding-left: 4%;
  font-size: 15px;
}
.productElem:hover {
    cursor: pointer;
}
.navbaritemright{
  color: #ffffff;
  padding-right: 4%;
  float:right;
  font-size: 15px;
}

.navbaritemmiddle{
  color: #ffffff;
  padding-right: 4%;
  padding-left: 4%;
  float:middle;
  font-size: 15px;
}
.navbarsquare {
  height: 35px;
  width: 100%;
  background-color: #000000;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons {
  display: flex;
  flex-direction: column;
}
.waa {
  width:999px
}
.productframe {
  width:250px; 
  height:200px;
  border-radius: 10%;
  border-width: 0px;
}

.textOutline {
  color: white;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

.btn {
  overflow: hidden;
  text-decoration: none;
  padding: 20px 50px;
  font-size: 1.25rem;
  position: relative;
  margin: 32px;
}

.d_field {
  position:absolute; 
  width: 25%; 
  height: 4%; 
  font-size: 15px;
}

.c-button {
  color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 0 0 rgba(143, 64, 248, 0.5), 0 0 0 0 rgba(39, 200, 255, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c-button::after {
  content: "";
  width: 400px;
  height: 400px;
  position: absolute;
  top: -90px;
  left: -100px;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #b11ee6 0%,
    #ff70e5 50%,
    #ff0088 100%
  );
  z-index: -1;
  transition: transform 0.5s ease;
}

.c-button:hover::after {
  transform: rotate(150deg);
}

  .dropbtn {
    background-color: rgba(0,0,0,0);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  @media screen and (max-width: 631px) {
  .navbaritem, .navbaritemmiddle, .navbaritemright{display: none;}
}
@media screen and (min-width: 632px) {
  .dropdown, .dropbtn, .dropdown-content {display: none;}
}
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}