.skills-page{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.skills-page-title{
  margin-top: 100px;
  font-family: Arial;
  font-weight: 800;
  font-size: 74px;
  background: linear-gradient(
    90deg,
    rgb(32, 227, 255),   
    rgb(107, 232, 200) 35%,  
    rgb(207, 226, 122) 65%, 
    rgb(255, 212, 0)    
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 40px;
}

.title-button-container{
  display: flex;
  flex-direction: row;
}

.expand-button{
  position: absolute;
  top: 120px;
  border: 3px solid white;
  color: white;
  background-color: black;
  cursor: pointer;
  border-radius: 12px;
  transition: 
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.expand-button:hover {
  color: rgb(150,150,150);
  border-color: rgb(150,150,150);
}

.expand-button:active {
  background-color: white;
  color: black;
  border-color: white;
}

.content-container {
  display: flex;
  align-items: center;
  justify-content: end;
  position: relative;
}

.skills-category{
  margin-bottom: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.glow-text:hover{
  text-shadow: 
      0 0 10px white, 
      0 0 30px rgb(157,229 ,161),
      0 0 60px rgb(157,229 ,161) 
}

.skills-categories-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.skills-container,
.tools-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial;
}



.skills-grid-col-title,
.tools-grid-col-title{
  margin-bottom: 20px;
}

.hidden{
  display:none;
}

@media (min-width: 1114px){
  .turn-grid{
    width: 1000px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid white;
    border-radius: 5px;
    padding: 50px;
    align-items:start;
  }

  .skills-category{
    font-size: 48px;
  }

  .skill,
  .tool{
    font-size: 22px;
    font-family: Arial;
    margin-bottom: 8px;
  }
  .expand-button{
    right: 100px;
    padding: 20px 40px;
    border: 3px solid white;
    font-size: 30px;
    font-weight: 700;
  }
}

@media (min-width: 750px) and (max-width:1113.9px){
.turn-grid{
    width: 700px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid white;
    border-radius: 5px;
    padding: 15px;
    align-items:start;
  }

  .skills-category{
    font-size: 30px;
  }

  .skill,
  .tool{
    font-size: 16px;
    font-family: Arial;
    margin-bottom: 6px;
  }

  .expand-button{
    right: 10px;
    padding: 20px 5px;
    border: 3px solid white;
    font-size: 20px;
    font-weight: 700;
  }
}

@media (max-width: 749.99px){
  .turn-grid{
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;

    display:flex;
    flex-direction: column;
    border: 1px solid white;
    border-radius: 5px;
    padding: 10px;
  }
  .skills-page-title{
    font-size: 56px;
    margin-bottom: 70px;
  }

  .skills-category{
    font-size: 32px;
  }

  .skill,
  .tool{
    font-size: 22px;
    font-family: Arial;
    margin-bottom: 8px;
  }
  
  .skills-grid-col-title,
  .tools-grid-col-title{
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    text-align: center;
    background-color: rgb(50,50,50);
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 15px;
  }

  .skills-container{
    margin-bottom: 20px;
  }
  .skill-title {
    font-size: 40px;
    margin-bottom: 20px;
  }

  .expand-button{
    left: 50%;
    transform: translateX(-50%);
    top: 200px;
    padding: 5px 5px;
    border: 1px solid white;
    font-size: 22px;
    font-weight: 700;
  }
}



.skill-title {
  align-self: center;
}