@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");

/* ==== VARIABLES ==== */
:root {
    /*  Colors  */
    --first-color: #272A3A;
    --first-color-light:  #8A8EAA;
    --first-color-lighten: rgba(248,248, 252);

    /*  Font & Tipography   */
    --body-font:'Ubuntu', sans-serif;
    --normal-font-size: 1rem;
    --smaller-font-size: .813em;
}

/* ==== BASE ==== */
html{
  box-sizing: border-box;
  font-size: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.mb--10 {
  margin-bottom: -10px;
}

body{
  margin: 0;
  padding: 0;
  font-family: var(--body-font);   
  overflow-y: auto; 
  overflow-x: auto;
  background-image: linear-gradient(to bottom, rgba(248,248, 252,0.6) 0%,rgba(248,248, 252, 0.6) 100%), url('img/logo_03.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  overflow-x: hidden;
}

.main {
  margin-top: 50px;
} 

h1{
  margin: 0;
}

h4{
  margin: 0;
  margin-bottom: -5px;
  margin-left: 10px;
  margin-top: 5px;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
}
  
.row {
  --bs-gutter-x: 10.5rem!important;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: 10%;
  margin-left: 10%;
}

  /*===== DRAG and DROP =====*/
.drop{
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.drop_container{
  row-gap: 1rem;
  padding: 0rem 5.1rem 0rem 5.1rem;
 /* box-shadow: 4px 4px 16px #E1E1E1;*/
}

.drop_card, .drop_data{
  display: flex;
  align-items: center;
}

.drop_card{
  height: 55px;
  justify-content: space-between;
  padding: .75rem 1.25rem 1.25rem .75rem;
  background-color: var(--first-color-lighten)!important; 
  box-shadow: 4px 4px 16px #E1E1E1, -2px -2px 16px #FFF!important;
  border-radius: 2.5rem;
  transition: 0.3s ease-out;
  position: relative; 
}

.drop_card a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* z-index: 10; */
}

.drop_card:hover {
  background: #F8C471!important;
  color: white;
  transform: scale(1.05);
}
.drop_img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 1rem;
  margin-top: 8px;
}
.drop_img2{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 1rem;
  margin-top: 8px;
}

.drop_name{
  font-size: var(--normal-font-size);
  color: var(--first-color);
  font-weight: 500;
  margin-top: 13px;
  margin-bottom: unset;
}

.drop_description, .drop_ref{
  font-size: var(--smaller-font-size);
  color: var(--first-color-light);
}
.drop_ref {
  margin-top: 20px;
  font-size: .75em;
}
.drop_social{
  margin: 0 .375rem;
  color: var(--first-color-light);
  transition: .4s;
}

.drop_social:hover{
  color: var(--first-color);
}
  
@media only screen and (max-width: 600px){
  .drop_container {
    padding: 0.2rem;
  }

  .div_4mobile {
    line-height: 0.9;
  }
  /* .drop_data {
    line-height: 0.99;
  } */

  /* :root{
    --smaller-font-size: .78em;
  } */
  
}