/* Tablet */
@media only screen and (max-width: 768px) {
 .container {
 width: 95%;
 padding: 60px 20px;
 }
 
 .about {
 padding: 40px 30px;
 }
 
 .experience-with-lang {
 width: 90%;
 flex-wrap: wrap;
 gap: 15px;
 justify-content: center;
 }
 
 .projects {
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 20px;
 }
}
/* Mobile devices */
@media only screen and (max-width: 600px) {
 nav {
 padding: 0 1rem;
 flex-wrap: wrap;
 justify-content: center;
 gap: 1rem;
 }
 
 .logo {
 order: 1;
 width: 100%;
 text-align: center;
 margin-bottom: 1rem;
 }
 
 .navbar {
 order: 2;
 gap: 0.5rem;
 flex-wrap: wrap;
 justify-content: center;
 }
 
 .navbar div {
 padding: 0.75rem 1rem;
 }
 
 .navbar a {
 font-size: 14px;
 }
 
 .container {
 width: 100%;
 padding: 40px 15px;
 }
 
 .about {
 padding: 30px 20px;
 margin-bottom: 30px;
 margin-top: 30px;
 }
 
 .about-text {
 padding: 0 10px;
 }
 
 .about-btn {
 flex-direction: column;
 align-items: center;
 gap: 1rem;
 }
 
 .btn-primary,
 .btn-secondary {
 width: 100%;
 max-width: 250px;
 }
 
 .experience-with {
 padding: 30px 20px;
 margin-bottom: 30px;
 }
 
 .experience-with-lang {
 width: 100%;
 flex-wrap: wrap;
 gap: 15px;
 justify-content: center;
 }
 
 .experience-with-lang div {
 padding: 12px;
 }
 
 .projects {
 grid-template-columns: 1fr;
 gap: 20px;
 margin: 40px 0;
 padding: 0 10px;
 }
 
 .project-item .img {
 height: 180px;
 }
 
 .projects-title {
 padding: 20px;
 }
 
 .primary-heading {
 font-size: 32px;
 margin-bottom: 30px;
 }
 
 footer {
 margin-top: 60px;
 }
 
 footer h2 {
 font-size: 24px;
 padding-top: 3vh;
 }
 
 footer p {
 font-size: 14px;
 padding: 0 2vh 2vh;
 }
 
 .social-links {
 flex-wrap: wrap;
 gap: 10px;
 padding-bottom: 30px;
 }
 
 .social-links img {
 margin: 5px;
 padding: 10px;
 }
}</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://26-pm.github.io/myWebsite/responsive.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://26-pm.github.io/myWebsite/responsive.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>