:root {
	--section-bg: whitesmoke;
	--card-bg: #d7cab5;
	--btn-bg: #b2dbff;
}

skills-module {
	display: grid;
	grid-template-columns: 1fr;

	min-width: 0;
	
	padding: 2rem 0 ;

	text-wrap: balance;

	@media (width >= 1100px){
		grid-template-columns: repeat(3, 1fr);
	}

	skills-header {
		display: grid;
		grid-column: span 2;
		margin-bottom: 1rem;

		display: flex;
		flex-direction: column;

		h2 {
			font-weight: 600;
			margin-bottom: .5rem;
		}

		p {
			max-width: 55ch;
			font-weight: 700;
		}

		.attention-voice {
			font-size: 1.125rem;
			font-weight: 400;
		}
	}

	skills-list {
		display: block;

		ul {

			li {

				details {
					font-size: 1.125rem;
					line-height: 1.2;
				}

				details > summary {
    				list-style: none;
				}

				details summary::-webkit-details-marker {
  					display:none;
				}

				summary::after {
				    content: "+";
				    font-size: 1rem;

			      	transition: transform 0.3s ease;
				}
				
				details[open] {
					transition: transform 0.3s ease;
					margin-bottom: 2rem;
				}

				details[open] summary::after {
				    content: "-";
				    transform: rotate(180deg);
				}

				summary {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					cursor: pointer;

					font-size: .875rem;
					font-weight: 700;
					text-transform: uppercase;
				}

				details ul {
					margin-top: .25rem;
				}
			}

				hr {
					padding: 0;
					margin-bottom: .5rem;
					border: .5px solid black;
				}
			}
		}

	}
}