/* //styling for mobile first */
/* import similar items */
@import url("./base.css");


h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 100;
    font-size: 2.5rem;
    text-align: center;
}

h3{
    margin-top: 1.2rem;
    margin-bottom: 1rem;
    font-size: 1.7rem;
}


select option:focus-within{
    background-color:black;
}



/* when it is in focus */
select option:active{
    color:var(--brand-color) ;
}

option{
    color: black;
}
.item .item--text{
    margin-top: 1.9rem;
    margin-bottom: .9rem;
}

.item .item--subtext{
    margin: 0;
    margin-bottom: .8rem;
    color: var(--white-50);
    font-size: 1.2rem;
}

.flex-container{
    display: flex;
    flex-direction: column;
    padding: 3rem;
}

.flex-container #chyPointsQuantity{
    display: none;
}


.flex-container .header{
    align-self: center;
}


input[type="number" i] {
    width: 100%;
}

.input--box{
    width: 100%;
    height: 3.8rem;
    border: 0 solid var(--brand-color);
    /* border: 2px solid red; */
    font-size: .5;
    color:var(--white-50);
    padding-left: 1rem;
}



.input--box, .btn button{
    border-radius: .6rem;
}

#chy-point{
    /* border: 1px solid red; */
}

.btn{
    margin-top: 4rem;
    margin-bottom: 1rem;
    /* border: 1px solid red; */
    /* width: 1rem; */
}

.btn button{
    /* border: 1px solid red; */
    width: 100%;
    height: 3.8rem;
    background-color: var(--brand-color);
    color: var(--white-100);
    font-weight: bold;
    border: 0px;
}

#footer p{
    margin:0;
}




/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}