html{
    scroll-behavior: smooth;
    
}
body{
    margin:0;
    padding: 2rem 1rem;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    background: #2C2C2C;
    color:#D6D3D3;


}

.container{
    min-width: 320px;
    max-width:1920px;
}
h1, h2, h3, p{
    margin:0; 
}
img{
    max-width: 100%;
    width: 100%;
    height:100%;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}

.periodic-table-wrapper{
    display: flex;
    align-items: flex-end;
    gap:0.2rem;
}
.element {
    width: 70px;
    color: white;
    
    border-radius: 0.5rem;
    border: 0.1rem solid black;
    text-align: center;
    margin-bottom: 0.2rem;
  }
  .atomic-prop-wrapper {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    padding:1px 1.5px 0 1.5px;
    
  }
  .element-name {
    font-size: 0.75rem;
  }
  .element-label{
    font-size: 1.8rem;
  }
  .bottom-line{
    height: 0.6rem;
    width: 100%;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
  }
  
  .group-number{
   text-align: center;
   margin-bottom: 0.4rem;

  }
.lanthanides {
  display: flex;
  gap:0.2rem;
  margin-left: 153.2px;
  margin-top: 5rem;
}
.actinides{
  display: flex;
  gap:0.2rem;
  margin-left: 153.2px;
}
.actinid-metals .bottom-line{
background: linear-gradient(#fdf1cb, #b01041);
}
  /**********Boje**********/
  .non-metals .bottom-line {
    
    background-image: linear-gradient(90deg, #0061FF, #60EFFF);
  
  }
  .alkali-metals .bottom-line {

    background-image: linear-gradient(90deg, #ff6600, #fdc304);

  }
  .alkaline-earth-metals .bottom-line {

    background-image: linear-gradient(90deg, #75fa08, #18b803);

  }
  .transition-metals .bottom-line {

    background-image: linear-gradient(90deg, #07eb53, #07d9f5);

  }
  .lanthanoid-metals .bottom-line {

    background-image: linear-gradient(90deg, #A06CD5, #6247AA);

  }

  .actinid-metals .bottom-line {

    background-image: linear-gradient(90deg, #6e0404, #3d045e);

  }
  .unknown-properties .bottom-line {
    background-image: linear-gradient(90deg, #808080, 	#5A5A5A);
  }
  
  .metalloids .bottom-line {
    background-image: linear-gradient(90deg, #964B00, #9c6f44);
  }
  
  .post-transition-metals .bottom-line {
    background-image: linear-gradient(90deg, #0A5A52, #384918);
  }
  .noble-gases .bottom-line{
    background-image: linear-gradient(90deg, #d90429, #ff8fa3);
  }
  .hero-section{
    height:60vh;
  }
  .actinide-metals .bottom-line{
    background-image: linear-gradient(90deg, #fdf1cb, #b01041);
  }


.button-section-wrapper{
    padding: 1rem ;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.625rem;
    
}
.button{
    padding: 0.5625rem 0.9375rem;
    border-radius: 50px;
    border: none;
    background: #D6D3D3;
    color:#707070;
   
    
}
.section-wrapper{
    padding: 1.875rem 6.25rem;
}
/*first template*/
.hero-section-wrapper{
    height: 100%;
    display: flex;
    position: relative;
}
.color-background{
    width: 50%;
    
    height: auto;
    border-radius: 0 30vh 30vh 0 ;
    background-color: rgba(57, 60, 65, 0.8);
    
    
    position: absolute;
            top: 0%;
            left: 0%;
            bottom: 0%;
            
           
            z-index: 2;
            display:flex;
            justify-content: center;
            align-items: center;
            text-align: center;
}
.img-wrapper{
    width: 100%;
    position: absolute;
    left:auto;
    top:0%;
    right: 0%;
    bottom:0%;
    
}
.periodic-table-container .element-label{
    font-size: 6.25rem;
}
h2{
  margin-bottom: 0.635rem;
}
.section-text-block{
  margin-bottom: 0.3125rem;   
}
/*MEDIA QUERIESSSSSSSSSSS*/
@media (max-width:768px){
    .hero-section{
        height:50vh;
        
    }
    .button-section-wrapper{
        padding: 0.5rem ;
        gap:0.3125rem;
        
    }
    .button{
        padding: 0.5625rem;
        border-radius: 50px;
        font-size: 0.75rem;
        
    }
    .section-wrapper{
        padding: 1.875rem 2.5rem;
    }


}
.group-16 .atomic-prop-wrapper {
  flex-direction: row-reverse;
}
.group-17 .atomic-prop-wrapper {
  flex-direction: row-reverse;
}