@font-face {
    font-size:10px;
    font-family: "inconsolata";
    src: 
        url("fonts/Inconsolata-Bold.ttf") format("ttf");
}

*{
    font-family: 'inconsolata', mnospace !important;
    font-weight: 700 !important; 
    color: #E7E7E7;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}


.section {
    height: 100vh;
    display: inline-block;
    box-sizing: border-box;
    padding: 2rem;
    background-color: #171857;
    font-size: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;            
}

.bg-tech{
    background-image: url('../img/bg/bg-tech.png');
    background-repeat: repeat;
    background-size: auto 200px;
    animation: rainRight 10s linear infinite;
}
@keyframes rainRight {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 456px 200px;
    }
  }/*456*/
  @keyframes rainLeft {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -100px 100px;
      }
    }

.grass-1{
    background-image: url('../img/bg/grass-1.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: auto 40px;
}

.grass-2{
    background-image: url('../img/bg/grass-2.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: auto 40px;
}

.grass-3{
    background-image: url('../img/bg/grass-3.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: auto 40px;
}

.grass-4{
    background-image: url('../img/bg/grass-4.png');
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: auto 40px;
}

@media (max-width: 768px) {
    .section {
        padding-bottom: 2rem;
    }
    .column{
        padding-bottom: 3rem!important;
    }
}

.column{
    width: 420px;
    height: 100%;
    padding: 1rem;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    display: flex !important;
}
.column p{
    white-space: normal;
}
.experience-task{
    white-space: normal;
    font-size: 1rem;
}

/* .intro{
    color: #E7E7E7;
} */

.separator{
    height: 1px;
    background-color: #E7E7E7;
    border: none;
    width: 80%;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
}

.better-experience{
    font-size: .6rem;
}

.stack-list{
    width: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.stack-item{
    
    max-width: 4.5rem;
    align-self: start;
    display: flex;
    justify-content: center;
    overflow: hidden;
}