@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
h1,h2,h3,h4,h5,h6,p{
    margin: 0;
}
:root
{
    box-sizing: border-box;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #E1E8ED;
    --small-margin:8px;
    --primary-color:#4B5563;
  
    --secondary-color:#E5E7EB;
    --button-text:#F9FAFB;

    --tertiary-light:#3730A3;
    --tertiary-dark:#312E81;
   
   

}

    
body
{
    max-width: 960px;
    margin:0 auto;
    background-color: white;
    padding:5px;
   
}
.docs
{
    background-color: black;
    width:150px;
    padding:5px;
    text-align: center;
    border-radius: 8px;
    margin:0 auto;
    margin-bottom: 20px;;
    display: block;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;

}

.element__heading
{
    text-align: center;
    margin:0;
    height:50px;
}
.element__paragraph
{
    margin:0;
    padding:20px;
}
.element__subheading
{
    font-weight: 500;
    padding:10px;
}
.element:after
{
    content:"";
    display:block;
    margin: 10px 2px;
    width:95%;
    border:3px solid #E1E8ED;
    background-color: #E1E8ED;
}
.avatar
{
    display:flex;
    padding:5px;
    border: .5px solid #E1E8ED;
    border-radius: .5rem;
    flex-wrap: wrap;
    margin-bottom: 5px;
    
   
}
.avatar__profile
{
    height:50px;
    border-radius: 50%;
    margin-right:var(--small-margin);
    margin-bottom: var(--small-margin);
    min-width:50px;
    
}
.avatar--withuser
{
    
    width:fit-content;
    margin-left: 5px;
    align-items: center;
}
.avatar__user
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.avatar--withstate
{
    height:60px;
}
.avatar__state--online
{
    height:15px;
    width:15px;
    border:2.5px solid white;
    border-radius: 50%;
    background-color: green;
    position: relative;
    bottom:25px;
    left:30px;
}
.avatar__state--offline
{
    height:15px;
    width:15px;
    border:2.5px solid white;
    border-radius: 50%;
    background-color: red;
    position: relative;
    bottom:25px;
    left:30px;
}

.alert
{
  
    padding:10px;
    border: .5px solid #E1E8ED;
    border-radius: .5rem;
    margin-bottom: 5px;
}
.alert__success--small
{
    background-color: #A7F3D0;
   padding: 5px;
   display: flex;
   align-items: center;
   height:fit-content;
   position: relative;
   
   
}
.alert__success--sc
{
   
   padding:10px;;
  
  

}

.alert__success--heading
{
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
   
}
.cross-button
{
    border-radius: 5px;
    height:fit-content;
    width:fit-content;
    padding:1px 8px 2px 8px;
    position: absolute;
    right:5px;
    top:3px;
    cursor: pointer;
}
.cross-button:hover{
    border: 1px solid #34D399;
    background-color: #34D399;
    
}

.alert__success--large{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #A7F3D0;
    padding: 5px;
    height:minmax(200px,auto);
}
.alert__success--lc
{ 
 padding:10px;
}

.primary-btn
{
    background-color: var(--primary-color);
    color:var(--button-text);
    border:1px solid var(--primary-color);
    padding:5px 8px;
    width:fit-content;
    font-size: 1.2rem;
    border-radius: 4px;
    
}

.secondary-btn
{
    background-color: var(--secondary-color);
    color:var(--primary-color);
    border:1px solid var(--secondary-color);
    padding:5px 8px;
    width:fit-content;
    font-size: 1.2rem;
    border-radius: 4px;
   

}
.link-btn
{
    background-color: var(--tertiary-dark);
    color:var(--button-text);
    border:1px solid var(--secondary-color);
    padding:5px 8px;
    width:fit-content;
    font-size: 1.2rem;
    border-radius: 4px;
    cursor:pointer;

}

.icon-btn-text {
    background-color: var(--tertiary-light); 
    border: none; 
    color: white; 
    padding: 12px 16px; 
    font-size: 16px; 
    cursor: pointer; 
  }
  .icon-btn-text:hover
  {
      background-color: var(--tertiary-dark);
  }
  .icon-btn
  {
      background-color: #A5B4FC;
      border: none;
        padding:5px 10px;

  }
  .icon-btn:hover
  {
      background-color: #4F46E5;
  }

.badge
{
    width:fit-content;
    padding:0 5px 3px;
    background-color: var(--primary-color);
    color:var(--secondary-color);
    font-size: .8rem;

}
.badge-discount
{
    padding:10px 20px;
    background-color: red;
    background: linear-gradient(to right, #B91C1C, #EF4444);
    background-color: -moz-linear-gradient(left,0% #B91C1C,100% #EF4444);
    font-size: 1.5rem;
    width:fit-content;
    text-transform: uppercase;
    border-radius: 20px 0 20px 0 ;
    color: var(--secondary-color);

}
.badge-hotoffer
{
    padding:6px 20px;
    background-color:black;
    font-size: 1.5rem;
    width:max-content;
    /* height:50px; */
    box-sizing: border-box;
    text-transform: uppercase;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    color: var(--secondary-color);
    display: inline-block;
    

}

.badge-hotoffer span:nth-child(1)
{
    color:rgb(197, 35, 35)

}


  .cards
  {
      display: flex;
      flex-wrap: wrap;
  }

  .card
  {
        width:250px;
      flex-basis:210px;
      margin-left:20px;
      margin-bottom: 20px;

  }

  .card__img
  {
      width:100%;
      display: block;
  }
  .card__information
  {
      padding:0 5px;
     margin-top: var(--small-margin);
    
  }
  .card__description
  {
      font-size: .85rem;
      font-weight: 400;
   
  }

  .card__price-marked
  {
    font-size: .85rem;
    font-weight: 300;
    text-decoration: line-through;
   

  }
  .card__price-discount
  {
      color:red;
  }
.card--overlay
{
    width:250px;
    position: relative;
}
  .card__text-overlay
  {
      position: absolute;
      width:180px;
      padding:10px;
      left:20px;
      top:100px;
      font-weight: 600;
      font-size: 1.2rem;
      line-height: 1.1rem;
      color:var(--secondary-color);

  }

  .card--text
  {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      border:1px solid var(--primary-color);
      text-align: center;
      padding:20px;
      min-height:200px;
     
      
  }
  .card--text p
  {
      flex-grow: 1;
  }
  .card--text button
  {
      margin-top:var(--small-margin)
  }
.position-relative
{
    position: relative;
}
.position-absolute
{
    position: absolute;
    left:0px;
    top:40px;
}


  .card--shadow
  {
      box-shadow:  0 4px 8px 2px rgba(0, 0, 0, 0.2);
  }

  .image-responsive
  {
      width:100%;
     max-width: 400px;
   
    /* height: auto; */
    display: block;
    margin:0 auto;
  }
  .image-responsive--round
  {
    border-radius: 50%;
   
    height: 400px;
    /* max-width:500px; */
  }
 .container
 {
     padding:20px;
     background-color: var(--secondary-color);
     border-radius: 10px;
 }
 .container--center
 {
     width:600px;
     margin:auto;
 }
 .navigation
 {
     width:100%;
     box-sizing: border-box;
     margin:0;
     padding:10px;
     background-color:var(--tertiary-light);
     ;
     
 }
 .navigation ul
 {
     display:flex;
     justify-content: flex-end;
     align-items: center;
     margin: 0;

 }
 .navigation li
 {
     list-style-type: none;
     padding:10px;
     margin-right:10px;
}
 .navigation li:first-child
 {
    margin-right: auto;
 }
 .navigation li a
 {
     text-decoration: none;
     color:var(--secondary-color);
     font-size: 1.2rem;
}
.navigation li a:active
{
    color: red;
}
.navigation li a::after
{
    content:"";
    display: block;
    height:.3rem;
    background-color:var(--secondary-color);
    width:0%;
    margin-top: 5px;
    transition: all ease-in-out 250ms;

}

.navigation li a:hover::after
{
 
    width:100%;
}

.signup
{
    margin:0 auto;
    width:16rem;
    padding:2rem;
    border: 1px solid black;
}
.signup h1
{
    text-align: center;
    margin-bottom: .8rem;
}
.signup p
{
    margin-bottom: .8rem;
    font-size: 1rem;

}
.signup div
{
    display: flex;
    flex-direction: column;
    margin-bottom: .8rem;
}
.signup input
{
    border: 0px solid var(--primary-color);
    padding:1rem;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary-color);
}
.signup input:hover
{
    border:1px solid var(--primary-color);
    background-color: white;

}
.signup label
{
    margin-bottom: .2rem;
    font-weight: 500;
}
.signup button
{
    width:16rem;
    padding-top:1rem;
    padding-bottom: 1rem;
    border-radius: 1rem;
    cursor: pointer;
}
.signup button:hover
{
    background-color: var(--secondary-color);
    color:var(--primary-color);
    border: none;
}

.grid--three
{
    display: grid;
    height: 50vh;
    grid-template-columns: .25fr 1fr;
    margin-top:20px;
    grid-gap:10px;
    grid-template-areas: "box1 box2"
                         "box3 box3";
                        

}
.boxthree--1
{
    background-color: red;
    grid-area: box1;
   
}
.boxthree--2
{
    background-color: yellow;
    grid-area: box2;
}
.boxthree--3
{
    background-color: #34D399;
    grid-area: box3;
}
.grid--five
{
    display: grid;
    margin-top:20px;
    height:60vh;
    grid-template-columns: .25fr .8fr .8fr;
    grid-auto-rows:.2fr .6fr .6fr ;
    grid-gap:10px;
    grid-template-areas: "box1 box1 box1"
                          "box2 box3 box4"
                          "box2 box5 box5";
}
.boxfive--1
{
    background-color: red;
    grid-area: box1;
}
.boxfive--2
{
    background-color: red;
    grid-area: box2;

}
.boxfive--3
{
    background-color: red;
    grid-area: box3;
}
.boxfive--4
{
    background-color: red;
    grid-area: box4;
}
.boxfive--5
{
    background-color: red;
    grid-area: box5;
}
.snackbar
{
    border-radius: 5px;
    width:300px;
    height:50px;
    background-color: var(--primary-color);
    padding: 5px;
    color:var(--secondary-color);
    margin: 0 auto;
    text-align: center;
}
.text--xs
{
    font-size: 0.75rem;
    line-height: 1rem;
}
.text--sm
{
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text--nm
{
    font-size: 1rem;
    line-height: 1.5rem;
}
.text--lg
{
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text--xlg
{
    font-size: 1.5rem;
    line-height: 1.75rem;
}
.heading--xsm
{
    font-size: 1.5rem;
    line-height: 1.25em;
    font-family: 'Arimo', sans-serif ;
}
.heading--sm
{
    font-size:1.75rem;
    line-height: 1.25em;
    font-family: 'Arimo', sans-serif ;
}
.heading--nm
{
    font-size: 2rem;
    line-height: 1.25em;
    font-family: 'Arimo', sans-serif ;
}
.heading--lg
{
    font-size: 2.5rem;
    line-height: 1.25em;
    font-family: 'Arimo', sans-serif ;
}
.heading--xlg
{
    font-size: 3rem;
    line-height: 1.25em;
    font-family: 'Arimo', sans-serif ;
}
.heading--xxlg
{
    font-size: 4rem;
    line-height: 1.25em;
    font-family: 'Arimo', sans-serif ;
}
.text-center
{
    text-align: center;
}
.stacked li
{
    display: flex;
    list-style-type: none;
    padding:10px;
    margin-bottom:var(--small-margin);
    border:1px solid var(--primary-color);
    border-radius: 5px;
    background-color: var(--secondary-color);
    justify-content: space-between;
    align-items: center;
}
.stacked
{
    display: flex;
    flex-direction: column;
    padding:10px;


}

  @media only screen and (max-width: 560px) {
      body {
          max-width: 500px;
      };
      .card
      {
          box-sizing: border-box;
          margin: 0;
          margin-bottom: 10px;
          margin-right: 2px;
         
          /* width:130px; */
      }
    
}