@use postcss-nested;

.gradient--0 {
  --gradient-start: #6DE195;
  --gradient-start-text: '#6DE195';
  --gradient-end: #C4E759;
  --gradient-end-text: '#C4E759';
}

.gradient--1 {
  --gradient-start: #41C7AF;
  --gradient-start-text: '#41C7AF';
  --gradient-end: #54E38E;
  --gradient-end-text: '#54E38E';
}

.gradient--2 {
  --gradient-start: #99E5A2;
  --gradient-start-text: '#99E5A2';
  --gradient-end: #D4FC78;
  --gradient-end-text: '#D4FC78';
}

.gradient--3 {
  --gradient-start: #ABC7FF;
  --gradient-start-text: '#ABC7FF';
  --gradient-end: #C1E3FF;
  --gradient-end-text: '#C1E3FF';
}

.gradient--4 {
  --gradient-start: #6CACFF;
  --gradient-start-text: '#6CACFF';
  --gradient-end: #8DEBFF;
  --gradient-end-text: '#8DEBFF';
}

.gradient--5 {
  --gradient-start: #5583EE;
  --gradient-start-text: '#5583EE';
  --gradient-end: #41D8DD;
  --gradient-end-text: '#41D8DD';
}

.gradient--6 {
  --gradient-start: #A16BFE;
  --gradient-start-text: '#A16BFE';
  --gradient-end: #DEB0DF;
  --gradient-end-text: '#DEB0DF';
}

.gradient--7 {
  --gradient-start: #735EF1;
  --gradient-start-text: '#735EF1';
  --gradient-end: #F6C097;
  --gradient-end-text: '#F6C097';
}

.gradient--8 {
  --gradient-start: #F78FAD;
  --gradient-start-text: '#F78FAD';
  --gradient-end: #FDEB82;
  --gradient-end-text: '#FDEB82';
}

.gradient--9 {
  --gradient-start: #FF9294;
  --gradient-start-text: '#FF9294';
  --gradient-end:  #D8BFFF ;
  --gradient-end-text: ' #D8BFFF';
}

.gradient--10 {
  --gradient-start: #A540AE;
  --gradient-start-text: '#A540AE';
  --gradient-end: #DD3B82;
  --gradient-end-text: '#DD3B82';
}

.gradient--11 {
  --gradient-start: #9F357D;
  --gradient-start-text: '#9F357D';
  --gradient-end: #7176FF;
  --gradient-end-text: '#7176FF';
}

.gradient--12 {
  --gradient-start: #FDB6FF;
  --gradient-start-text: '#FDB6FF';
  --gradient-end: #71FFDD;
  --gradient-end-text: '#71FFDD';
}

.gradient--13 {
  --gradient-start: #121317;
  --gradient-start-text: '#121317';
  --gradient-end: #323B42;
  --gradient-end-text: '#323B42';
}

.gradient--14 {
  --gradient-start: #FDB6FF;
  --gradient-start-text: '#FDB6FF';
  --gradient-end: #71FFDD;
  --gradient-end-text: '#71FFDD';
}

.gradient--15{
    background-color: linear-gradient(84.34deg, #FDB6FF 0%, #71FFDD 97.54%);
}


/*ul {*/
/*  margin-top: 30px;*/
/*  display: grid;*/
/*  grid-template-columns: repeat(var(--columns), 1fr);*/
/*  grid-auto-rows: 350px;*/
/*  font-family: Geneva, Tahoma, Verdana, sans-serif;*/
/*  color: #999;*/
/*  font-size: 12px;*/
/*}*/

/*li {*/
/*  position: relative;*/
/*  text-align: center;*/
/*}*/

.gradient {
  display: inline-block;
  height: 250px;
  width: 80%;
  min-width: 240px;
  background: linear-gradient(33deg, var(--gradient-start), var(--gradient-end));
  border-radius: 20px;
  box-shadow: 0 5px 10px #0002;
  position: relative;
}

.start-color, .end-color {
  padding: 10px 0 0 10px;
  &:before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 999px;
    display: inline-block;
  }
  &:after {
    padding: 0 10px;
    vertical-align: 2px;
    border-radius: 999px;
    display: inline-block;
  }
}

.end-color {
  &:before { background-color: var(--gradient-start); }
  &:after { content: var(--gradient-start-text); }
}

.start-color {
  &:before { background-color: var(--gradient-end); }
  &:after { content: var(--gradient-end-text); }
}

.gradient-title--1{
    color: #60DA9C;
}
.gradient-title--2{
    color: #A6E875;
}
.gradient-title--3{
    color: #9FD2CB;
}
.gradient-title--4{
    color: #89CBAF;
}
.gradient-title--5{
    color: #51B1E3;
}
.gradient-title--6{
    color: #C1B3FB;
}
.gradient-title--7{
    color: #B08CC7;
}
.gradient-title--8{
    color: #FBBA87;
}
.gradient-title--9{
    color: #ECA8C9;
}
.gradient-title--10{
    color: #BE3E9B;
}
.gradient-title--11{
    color: #8955BC;
}
.gradient-title--12{
    color: #30E9C7;
}
.gradient-border--1{
    border-color: #60DA9C;
}
.gradient-border--2{
    border-color: #A6E875;
}
.gradient-border--3{
    border-color: #9FD2CB;
}
.gradient-border--4{
    border-color: #89CBAF;
}
.gradient-border--5{
    border-color: #51B1E3;
}
.gradient-border--6{
    border-color: #C1B3FB;
}
.gradient-border--7{
    border-color: #B08CC7;
}
.gradient-border--8{
    border-color: #FBBA87;
}
.gradient-border--9{
    border-color: #ECA8C9;
}
.gradient-border--10{
    border-color: #BE3E9B;
}
.gradient-border--11{
    border-color: #8955BC;
}
.gradient-border--12{
    border-color: #30E9C7;
}
/*
body {
  background-color: #ECEFFC;
}
*/
/*
@media screen and (min-width: 1750px) { :root { --columns: 8; } }
@media screen and (max-width: 1750px) { :root { --columns: 7; } }
@media screen and (max-width: 1500px) { :root { --columns: 6; } }
@media screen and (max-width: 1250px) { :root { --columns: 5; } }
@media screen and (max-width: 1000px) { :root { --columns: 4; } }
@media screen and (max-width: 750px) { :root { --columns: 6; } }
@media screen and (max-width: 625px) { :root { --columns: 5; } }
@media screen and (max-width: 500px) { :root { --columns: 4; } }
@media screen and (max-width: 375px) { :root { --columns: 3; } }
@media screen and (max-width: 250px) { :root { --columns: 2; } }

@media screen and (max-width: 750px) {
  ul {
    margin-top: 15px;
    grid-auto-rows: 190px;
    font-size: 10px;
  }
  .gradient {
    height: 125px;
  }
  .start-color, .end-color {
    padding: 7px 0 0 10px;
  }
}
*/