.text-pink{
    color:rgb(248, 69, 203);
}

.bg-pink{
    background-color: rgb(248, 69, 203);
}

.border-pink{
    border-color: rgb(248, 69, 203);
    border: solid, 5px;
}

.apresentacao{
    font-family: 'Press Start 2P', cursive;
}

.titulos{
    font-family: 'Press Start 2P', cursive;
}

/* The animation code
@keyframes example {
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
  }
  
  /* The element to apply the animation to */
  .titulos {
    color: red;
    animation-name: example;
    animation-duration: 30s;
    overflow-y: 45;
  } */


    * {

      box-sizing: border-box;
    }

    /* .text {
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      font-size: 5rem;
      color: #fff;
      border: 3px solid #fff;
      padding: 2rem 4rem;
    } */

    .gradient {
      display: flex;
      align-items: center;
      justify-content: center;
      height:fit-content;
      width: auto;

      /* Colors generated on: https://colorhunt.co/palette/179481 */
      background: linear-gradient(45deg, black, rgb(168, 1, 126), black, rgb(168, 1, 126));
      background-size:300% 300%;
      animation: colors 20s ease-in-out infinite;
    }

    @keyframes colors {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* @media (max-width: 600px) {
      .text {
        font-size: 1.5rem;
        padding: 1rem 2rem;
      } */
    

.coluna{

    max-height: 100vh;
    position:fixed;
}
  

li{
    list-style: none;
}

hr{
    height: 5px;
    background-color: rgb(248, 69, 203);
}



/* Styling the h2 tag by giving color,
letter spacing, font-size etc.*/
.progress-bar-container h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #eee;
  letter-spacing: 1px;
  font-size: 20px;
}

/* Styling the border and box
effect of the progress bar*/
.progress-bar {

  height: 5px;
  margin-top: 10px;
  border: 1px solid green;
  border-radius: 5px;
  box-shadow: 0 0 10px white;
}

/* Stylingthe background color of each
animation and border radius */
.percentage {
  display: block;
  height: 100%;
  background-color: rgb(0, 255, 0);
  border-radius: 5px;
  animation: progress 1500ms ease-in 1;
}

/* Assigning width of each languages*/
.bootstrap {
  width: 70%;
}

.java {
  width: 10%;
}

.nodejs {
  width: 55%;
}

.html {
  width: 100%;
}

.css {
  width: 70%;
}

.javascript {
  width: 20%;
}

/* Animating the progress bar by
initially starting from 0*/
@keyframes progress {
  from {
      width: 0;
  }
}

nav{
  height: 10vh;
  position: fixed;
  border-bottom: solid rgba(255, 255, 255, 0.514) 1px;
  
}

img{
  border: solid 1px white;
}

.inicio{
  min-height: 100vh;
}

.typing-animation{
  animation: blinkCursor 500ms infinite normal, typing 4s steps(40) 1s normal both;
}

@keyframes typing{
  from{
      width: 0;
  }
  to{
      width: 13.6em;
  }
}

.line{
  border-right: 2px solid rgba(225, 225, 225, 0.75);
  color: rgba(225, 225, 225);
  font-family: 'Special Elite', monospace;
  font-size:1.6em;
  text-align: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
}
@keyframes blinkCursor{
  from{
      border-right-color: rgba(255, 255, 255, .75)
  }
  to{
      border-right-color: transparent;
  }
}

#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 999;
font-size: 18px;
border: none;
outline: none;
cursor: pointer;
padding: 15px;
border-radius: 4px;
opacity: 0.5;
color: white;
}
#myBtn:hover {
opacity: 1;
color:rgb(0, 255, 13);
}

button{
    text-decoration: none;
}

.bg-green{
  background-color: rgb(0, 255, 13);
}

.color-green{
  color: rgb(0, 255, 13);
}

.container-1{
  margin-top: 10vh;
}

.portfolio{
  font-size: 2em;
  font-family: 'Saira Semi Condensed', sans-serif;
  letter-spacing: 0.4em;
}


.webdesenvolvedora{
  font-size: 1em;
  font-family: 'PT Serif', serif;
}

.foto{
  border-right: #eee solid 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}

#sobremim, #resumo, #habilidades, #trabalhos, #contatos, #qualificações{
  font-size: 2em;
  font-family: 'PT Serif', serif;
}

.btnbaixar{
  color: rgb(0, 255, 13);
  text-decoration: none;
}

.btnpowermind{
  color: rgb(0, 255, 13);
  text-decoration: none;
}

.powermind{
  font-size: 2em;
  font-family: 'PT Serif', serif;
  color:rgb(0, 255, 13)
}

.text-justify{
  text-align: justify;
}

/* Telas menores que 320px */
@media (min-width: 0) and (max-width: 320px){
  #icones{
    display: none;
  }
  #bases1{
    display: none;
  }
  #bases2{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:center;
  }
  .line{
    font-size: 1em;
  }
}

/* Telas entre 321px e 480px */
@media(min-width: 321px) and (max-width:480px){
    #icones{
      display: none;
    }
    #bases1{
      display: none;
    }
    #bases2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }
}

/* Telas entre 481px e 768px */
@media(min-width:481px) and (max-width:769px){
  #icones{
    display: none;
  }
  #bases1{
    display: none;
  }
  #bases2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
}

/* Telas entre 769px e 1024px */
@media(min-width:769px) and (max-width:1024px){
    #bases1{
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: center;
    }
    #bases2{
      display: none;
    }
}

/* Telas entre 1025px e 1200px */
@media(min-width:1025px) and (max-width:1200px){
  #bases1{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
  }
  #bases2{
    display: none;
  }
}

/* Telas acima de 1200px */
@media(min-width:1201px){
   #bases1{
    display: none;
   }
   #bases2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}