@import url("colors.css");
@font-face {
  font-family: Comfortaa;
  src: url(../fonts/Comfortaa/Comfortaa.ttf);
}

body{
  /* background-image:linear-gradient(to right, var(--color1), var(--color2)); */
  /* background: var(--color1); */
  /* background-image: linear-gradient(to right,var(--color1), "yellow" ) ; */
  background-image: linear-gradient(to right, var(--color1), var(--color1a));
  color:var(--color3);
  font-family: 'Comfortaa', cursive;"

}
*{
  /* border:1px solid var(--color5); */
}
.title{
  color: var(--color1);
}
.clickMe {
  animation-name: clickMe;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes clickMe {
  0%   {height:50px; width:100%}
  50%  {height:55px;width:92%}
  100% {height:50px;width:100%}
}

#instruction1{
  animation-name: ins2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes ins2 {
  0%   {margin-left:50px}
  0%   {margin-right:20px}
  50%  {margin-right:0px}
  100% {margin-right:0px}
}

#instruction2{
  /* background: red; */
  animation-name: ins1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes ins1 {
  0%   {font-size:110%}
  0%   {font-size:90%}
  50%  {font-size:100%}
  100% {margin-right:0px}
}
.form{
  color:var(--color3);
  background: var(--color2);
  padding:24px;
  border-radius: 8px;
  box-shadow: 0px 0px 8px 0px royalblue;
}
#priceToday{
  font-weight:bold;
  color:yellow;
}
.verify_p, .verify_pN, .verify_0661, .verify_pCB{
  border:1px solid white;
  border-radius: 24px;
  padding:24px;
  margin: 4px;
}
.btn-secondary{
  background: var(--color5);
  color:var(--color2)
  border:1px solid var(--color3)
}

strike{
  color:gray;
  font-size: 80%;
}

#robotDirect{
  padding:25px;
  border-radius: 24px 0px 24px 0px;

}


.sec1{
  padding:24px;
  padding-top:70px;
  padding-bottom:70px;
  background:#0a1520;
  border-radius:8px;
  box-shadow:1px 1px 8px 1px black;

}

.sec2{
  padding:24px;
  padding-top:70px;
  padding-bottom:70px;
  border-radius:8px;
  box-shadow:1px 1px 8px 1px black;

}
.sec3{
  padding:24px;
  padding-top:70px;
  padding-bottom:70px;
  border-radius:8px;
  background: var(--color2);
  /* box-shadow:1px 1px 8px 1px black; */

}
.btn-primary{
  /* background:#0a1520; */
  background:var(--color2);
  color:var(--white);
  border:1px solid var(--color3);
  box-shadow:0px 0px 8px 0px black;
}
.btn-primary:hover{
  background:var(--color2);
  border:1px solid var(--color1);

}
.btn-primary::after{
  background:var(--color2);
  border:1px solid var(--color1);

}

.pad12{
  paddding:12px;
  margin:12px;
}
.sec31{
  background: yellow;
}
.sectionDark{
  background: var(--color2);
  padding:12px;
}
.messageBox{
  background:
}
.ads1{
  background: var(--color2);
}
/* body paramaters */

/* font sizes */

/* h1,h2,h3,h4,h5{padding:8px;} */


/* root colors */

#tabkleTitle{
  padding:8px;
}

.w100{
  width:100%;
}

/* colors of tables  */
td{
  boder:1px solid black;
  padding:8px;
  color:white;
}

/* text color for links */
.link{
  color:royalblue;
  text-decoration:underline;
}
/* same as link but need to check it's use */
.alreadyPaid{color:royalblue;text-decoration:underline;}


/* font coloring for testing and production */
.rFont{color:red;}
.yFont{color:yellow;}
.gFont{color:  limegreen;}
.orange{color:orange;}
.y{background: yellow;}
.g{background: green;}
.b{background:black;color:white;}

/* colors the section  */
.section1{
  background-image: linear-gradient(to right, var(--colorb), #850a0f);
  color:white;
}
/* color of section */
.section2{
  background: #1e1e1d;
  color:white;
}



#songInfo{
  padding-top: 25px;
  /* box-shadow: 2px 2px 2px 2px #1d1e1e; */
}
.artwork{
  width:88px;
}
.d{
  display:none;
}

#menuDiv{
  box-shadow: 2px 2px 2px 2px black;
  margin-bottom:20px;
}




#artistDiv{
  padding:16px;
}



.panel{

  /* border: 1px solid #d2d2d2; */
  /* border-radius: 8px; */
  padding:8px;

}


.br{
  border:1px solid red;
}
.y{
 background: yellow;
 color:black;
}
.long{
  width:100%;

}
.fill{
  background: yellow;
  border:1px solid red;
}

#instructions{
  padding:25px;
  box-shadow: 2px 2px 2px 2px #1d1e1e;
  border-bottom:1px solid #d2d2d2;
  /* border-left:2px solid #d2d2d2; */

}
#mainMenu{
  padding:16px;
}
/*  custom edit for game image in gameSale();*/
.nextGameConvo{
  margin-bottom: 70px;
}
.btn{
  border-radius: 12px;

}
.btn-primary{
  background: var(--color1);
  border:4px solid var(--color4);
}
img{

  border-radius: 12px;
}
.borderRed{
  border: 1px solid red;
}
.borderYellow{
  border: 1px solid yellow;
}

.borderBlue{
  border: 1px solid Blue;
}

.pad25{
  padding:25px;
}
.advertisement{
  color: darkgray;
}

.div1{
  background:var(--color2);
  border-radius:50px;
}
.contentBox{
  background: var(--color2);
  padding:25px;
  border-radius:25px;
}