*{
    margin: 0;
    padding: 0;
}
body{
    font-family: "Space Grotesk", sans-serif;
}
.br{
    border:1px solid #ddd;
    border-radius: 20px;
}
:root{
    --primary-color:#1062FE;
    --green-cololr:#069A65;
    --yellow-color:#e08d20;
    --gray-color:#080F2C;
    --neutral-color:#475569;
    
}

.btn-primary{
    background: blueviolet;
    border: none;
}
.btn-primary:hover{
    background: blueviolet;
    border: none;
}
.btn-outline-primary{
    border-color: blueviolet;
    color: blueviolet;
}
.btn-outline-primary:hover{
    border-color: blueviolet;
    background: blueviolet;
    color: #fff;
}
.btn-info{
    background: #1062FE;
    border: none;
    color: #fff;
    text-transform: uppercase;
}
.btn-info:hover{
    background: #1062FE;
    color: #fff;
}
.title{
  color: blueviolet;
  background:#E7E6FA; 
  font-weight: bold;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 5px;
  overflow: hidden;
  width: 15%;
  margin-bottom: 10px;
}
.btn-black{
    background: #080F2C;
    color: #fff;
}
.btn-outline-warning {
    color: blueviolet;
    border-color: blueviolet;
    background: #fff;
    z-index: 9999;
}
.btn-outline-warning:hover{
    color: blueviolet;
    border-color: blueviolet;
    background: #fff;
    z-index: 9999;
}
.btn-black:hover{
    background: #080F2C;
    color: #fff;
}
.btn-link{
    background: blueviolet;
    border-radius: 50%;
    padding: 10px;
    border: none;
    width: 40px;
    height: 40px;
    color: #fff;
}
.btn-link:hover{
    background: blueviolet;
    color: #fff;
}

.ribbon{
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 9999;
}

.ribbon::before, .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 0px solid blueviolet;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 6px 0;
    background-color: blueviolet;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center;
    left: -25px;
    top: 30px;
    transform: rotate(45deg);
}