@font-face {
    font-family: BrutalMilk;
    src: url("/font/BrutalMilkNo3-Regular.otf") format("opentype");
}

@font-face {
  font-family: BrutalMilk;
  src: url("/font/BrutalMilkNo3-Bold.otf") format("opentype");
  font-weight: bold;
}

body {
    font-family: Helvetica;
    background-color: #2E1A47;
}

.txcpearlregular {
    font-family: "TXC Pearl Reg";
    font-style: normal;
    font-weight: normal;
}

h1.txcpearl {
    font-family: "TXC Pearl Reg";
    font-style: normal;
}

div.brutal-milk {
    font-family: BrutalMilk;
}

.navbar {
    background-color: #6C3BA6;
}

a.nav-link {
    color: #ffffff;
}

a.nav-link:hover {
    color: #CBA9FF;
}

a.navbar-brand {
    color: #ffffff;
}

a.navbar-brand:hover {
    color: #CBA9FF;
}

div.rounded-light {
    border-radius: 32px;
    background-color: #FFEDD5;
}

div.gradient {
    background: linear-gradient(180deg,rgba(46, 26, 71, 1) 25%, rgba(0, 114, 229, 1) 100%);
}

div.vitenis {
  position: absolute;
  left: -100px;
  width: calc(100% + 100px);
  height: 151px;
  background-image: url("/img/vitenis_loop.png");
  background-repeat: repeat-x;
}

div.vitenis2 {
  position: absolute;
  left: -350px;
  width: calc(100% + 350px);
  height: 151px;
  background-image: url("/img/vitenis_loop.png");
  background-repeat: repeat-x;
}

div.vitenis_space {
    height: 151px;
}

div.davanu-karte {
    aspect-ratio : 2 / 1;
    width: 100%;
    background-color: #FD9A2B;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: BrutalMilk;
    font-weight: bold;
    font-size: 100px;
}

div.davanu-karte-small {
    aspect-ratio : 2 / 1;
    width: 100%;
    background-color: #FD9A2B;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: BrutalMilk;
    font-weight: bold;
    font-size: 30px;
} 

.davanu-karte-title {
    font-size: 32px;
}

.kopa-value {
    color: #D93030;
}

.kopa-title {
    font-weight: bold;
    font-family: BrutalMilk;
}

.davanu-karte-bottom {
    align-items: flex-end;
}

div.black-button-center {
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    font-family: BrutalMilk;
    font-weight: bold;
}

div.black-button-center a {
    background: #000000;
    border-radius: 32px;
    color: white;
    display: inline-block;
    padding: 10px 25px;
    transition: all 0.25s ease-out;
    -webkit-font-smoothing: antialiased;
    text-wrap: nowrap;
}

div.black-button-center a:hover {
    background-color: #FD9A2B;
    text-decoration: none;
}

div.black-button {
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: right;
    font-family: BrutalMilk;
    font-weight: bold;
}

div.black-button a {
    background: #000000;
    border-radius: 32px;
    color: white;
    display: inline-block;
    padding: 10px 25px;
    transition: all 0.25s ease-out;
    -webkit-font-smoothing: antialiased;
    text-wrap: nowrap;
}

div.black-button a:hover {
    background-color: #FD9A2B;
    text-decoration: none;
}

div.black-link {
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;
    font-family: BrutalMilk;
    font-weight: bold;
}

div.black-link a {
    color: #000000;
    display: inline-block;
    padding: 10px;
    transition: all 0.25s ease-out;
    -webkit-font-smoothing: antialiased;
    text-wrap: nowrap;
}

h1.brutal-milk {
    font-size: 3.0rem;
    font-family: BrutalMilk;
    font-weight: bold;
}

h2.brutal-milk {
    font-size: 2.0rem;
    font-family: BrutalMilk;
    font-weight: bold;
}

div.counter-button {
    height: 52px;
    align-content: center;
    text-align: center;
    border-radius: 26px;
    border: solid 3px;
    border-color: #000000;
    display: inline-block;
    
}

div.counter-button a {
    color: #000000;
    text-decoration: none;
}

div.counter-button a.minus {
    padding-right: 30px;
    padding-left: 10px;
}

div.counter-button a.plus {
    padding-left: 30px;
    padding-right: 10px;
}

div.counter-button a:hover {
    text-decoration: none;
}

input.field {
    width: 100%;
    height: 52px;
    margin: 0 auto;
    border: none; /* <-- This thing here */
    border:solid 3px #000;
    border-radius: 26px;
    padding: 0px 13px;
}

@media (min-width: 576px) {
    
    h1.brutal-milk {
        font-size: 3.5rem;
        font-family: BrutalMilk;
        font-weight: bold;
    }

    h2.brutal-milk {
        font-size: 2rem;
        font-family: BrutalMilk;
        font-weight: bold;
    }
    
    div.davanu-karte {
        
    }
    
    div.davanu-karte-small {
        
    } 
}

@media (min-width: 768px) {
    div.davanu-karte {
        font-size: 50px;
    }
    div.davanu-karte-small {
        
    } 
}

@media (min-width: 992px) {
    div.davanu-karte {
        font-size: 60px;
    }
    div.davanu-karte-small {
        
    } 
}

@media (min-width: 1200px) {
    
}