/* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* Layout Styling */
    header {
      background-color: #9b003f;
      color: white;
      text-align: center;
      padding: 1rem;
    }

    main {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem;
    }

    aside {
      background-color: #f4f4f4;
      padding: 1rem;
      flex: 1 1 25%;
      min-width: 200px;
    }

    section {
      flex: 1 1 70%;
	margin: 1rem;
      padding: 1rem;
      background-color: #e8f5e9;
      min-width: 300px;
    }

    footer {
      background-color: #333;
      color: white;
      # text-align: center;
      padding: 1rem;
      margin-top: 1rem;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      main {
        flex-direction: column;
      }

      aside, section {
        flex: 1 1 100%;
      }
    }


	.also-english {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	 span[lang]::before {
		content: "(";	
	}
	 span[lang]::after {
		content: ")";	
	}
	}

    .script-lang {
    	margin-left: 0.5rem;
    	margin-right: 0.5rem;
    }

    .explain {
    	margin-left: 0.7rem;
    	margin-right: 0.7rem;
	color: yellow;
    }

H3::after {
	content: ":";
}
H3 {
	top-margin: 1rem;
}
a[href^="http"]:after,
a[href^="//"]:after {
  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
}

a {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
code {
	color: green;	
}
code::before {
	content: "---スクリプトの例:";
}
code::after {
	content: "---";
}
/*
Key Features:
Flexbox Layout: The main element uses flexbox for a responsive layout.
Responsive Design: Media queries ensure the layout adapts to smaller screens.
Styling: Each section has distinct colors and padding for clarity.

Feel free to adjust colors, padding, or layout proportions to suit your design preferences!
*/