@import "./avatar.css";

/* ------------right bar card-------- */

.aside{
    width: 16%
}
.card{
    font-size: 0.7rem;
}
/* -----------buttons list----------- */

.btn-list{
    padding: 1rem;
  margin-top: -1.5rem;
    font-size: 1.2rem;
}

.btn-list>li{
    margin: 0.5rem;
}
/* ----------basic buttons css---------- */
.button-box{
    border: 1px solid var(--primary-color);
    width: 70%;
   margin-top: -0.5rem;
    padding: 1rem;
    border-radius: 0.3rem;
}

.primary-btn{
border: 1px solid blueviolet;
border-radius:0.2rem ;
padding: 0.5rem;
margin: 0.5rem;
color: white;
background-color: blueviolet;
height: 2rem;
cursor: pointer;
}

.primary-btn:hover{
   color: var(--secondary-color);
   background-color: var(--background-color);
    }

.secondary-btn{
    border: 1px solid var(--primary-color);
    border-radius: 0.2rem;
    padding: 0.5rem;
    margin: 0.5rem;
    color: black;
    cursor: pointer;
}

.secondary-btn:hover{
    color: blueviolet;
    ;
     }

     .text-btn{
        border: 0px solid var(--primary-color);
        border-radius: 0.2rem;
        padding: 0.5rem;
        margin: 0.5rem;
        color: blueviolet;
        cursor: pointer;
     }
 
     .text-btn:hover{
        color: black;
     }

     .disabled-btn{
        border: 1px solid grey;
        background-color: grey;
        border-radius: 0.2rem;
        padding: 0.5rem;
        margin: 0.5rem;
        color: var(--secondary-color);
        cursor: pointer;
     }

     .outlined-btn{
        border: 2px solid black;
        background-color: hotpink;
        border-radius: 0.2rem;
        padding: 0.5rem;
        margin: 0.5rem;
        color: var(--secondary-color);
        cursor: pointer;
     }

     .outlined-btn:hover{
        color: red;
     }

     .dashed-btn{
        border: 3px solid black;
        background-color: white;
        border-radius: 0.4rem;
        border-style: dashed;
        padding: 0.5rem;
        margin: 0.5rem;
        color: var(--secondary-color);
        cursor: pointer;
     }

     .dashed-btn:hover{
        background-color: grey;
     }
/* ----------coloured buttons----------- */
     .color-btn{
        border: 1px solid var(--primary-color);
        width: 70%;
       margin-top: -1rem;
        padding: 1rem;
        border-radius: 0.3rem;
     }

     .green-btn{
        border: 1px solid lightgreen;
        background-color: lightgreen;
        border-radius: 0.4rem;
       
        padding: 0.5rem;
        margin: 0.5rem;
        color: var(--background-color);
        cursor: pointer;
     }

     .error-btn{
        border: 4px solid red;
        background-color: var(--background-color);
        border-radius: 0.4rem;
       border-style: dashed;
        padding: 0.5rem;
        margin: 0.5rem;
        color: red;
        cursor: pointer;
     }

     .warning-btn{
        border: 0px solid black;
        background-color: yellow;
        border-radius: 0.4rem;
        padding: 0.6rem;
        margin: 0.5rem;
        color: black;
        cursor: pointer;
     }

     .success-btn{
        border: 0px solid black;
        background-color: blue;
        border-radius: 0.4rem;
        padding: 0.6rem;
        margin: 0.5rem;
        color: var(--background-color);
        cursor: pointer;
     }
/* ----------sized buttons css---------- */
     .large-btn{
        border: 1px solid var(--secondary-color);
        border-radius: 0.5rem;
        padding: 0.7rem;
        margin: 0.5rem;
        height: 3rem;
     width: 35%;
     background-color: burlywood;
     cursor: pointer;
     }

     .medium-btn{
       background-color: yellowgreen;
       color: var(--background-color);
       padding: 0.5rem;
       border-radius: 0.4rem;
       margin: 0.5rem;
       border: solid yellowgreen;
       width: 25%;
       cursor: pointer;
     }

     .small-btn{
        background-color: orange;
        border: solid orange;
        padding: 0.3rem;
        width: 20%;
        margin: 0.5rem;
border-radius: 0.3rem;
cursor: pointer;
     }

     .large-btn-2{
        border: 1px solid burlywood;
        border-radius: 0.5rem;
        padding: 0.7rem;
        margin: 0.5rem;
        height: 3rem;
     width: 35%;
   color: burlywood;
     cursor: pointer;
     }

     .medium-btn-2{
    
        color: yellowgreen;
        padding: 0.5rem;
        border-radius: 0.4rem;
        margin: 0.5rem;
        border: 0.3px solid yellowgreen;
        width: 25%;
        cursor: pointer;
      }

      .small-btn-2{
       color: orange;
        border: 0.2px solid orange;
        padding: 0.3rem;
        width: 20%;
        margin: 0.5rem;
border-radius: 0.3rem;
cursor: pointer;
     }

     /* ------link button----------- */

     .button-link{
        margin-top: -1rem;
        border: 1px solid var(--primary-color);
        padding: 0.5rem;
        border-radius: 0.5rem;
        text-align: center;
     }

     .btn-link{
        text-align: center;
        text-decoration: none;
        border: 0px solid var(--primary-color) ;
        border-radius: 0.5rem;
        padding: 1rem;
        font-size: 1.5rem;
     }

     .button-link:hover{
      background-color: var(--primary-color);
     }

     /* -----------icons button------- */
     .icon-container{
        text-align: center;
       
        border: 1px solid var(--primary-color) ;
        border-radius: 0.5rem;
        padding: 0.5rem;
        
     }

     .icon-btn{
        background-color: black;
        color: var(--background-color);
        padding: 0.5rem;
        border-radius: 0.4rem;
        margin: 0.2rem;
        border: solid black;
        width: 15%;
        margin-bottom: rem;
        cursor: pointer;
     }

     .icon-container>span{
        font-size: 3rem;
     }
/* -----------floating img button--------- */
     .img-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--primary-color);
      padding-top:  1rem;
      width: 100%;
     }

     .btn-img{
        position: relative;
        border: 1px solid var(--secondary-color);
        padding: 0.8rem;
        color: white;
        background-color: var(--secondary-color);
        width: 25%;
        cursor: pointer;
        border-radius: 0.5rem;
        bottom: 60px;
        right: 200px;
        margin: auto;
     }

     .btn-img:hover{
    background-color: var(--primary-color);
   }

     .img{
        position: relative;
        color: white;
        width: 80%;
        border-radius: 1.5rem;
        top: 10px;
        right: 10px;
        margin-bottom: auto; 
     }

     /* -------------for mobiles------------ */
     @media only screen and (max-width: 800px){
      .btn-img{
         position: relative;
         border: 1px solid var(--secondary-color);
         padding: 0.8rem;
         color: white;
         background-color: var(--secondary-color);
         width: 25%;
         cursor: pointer;
         border-radius: 0.5rem;
         bottom: 60px;
         right: 100px;
         margin: auto;
        
      }
     }
   
     footer{
        position: relative;
        top: 160rem;
     }