some cosmetics fix ;D

assets/css/main.css

@@ -7,21 +7,28 @@ body {
   margin: 0px;
   height: 100%;
 }
-main {
+
+main, textarea, textfield {
   font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
+}
+
+main { 
   margin: 0.75rem;
   height: 100%;
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
 }
+
 .main-page {
   max-width: 2300px;
   margin: 0 auto;
 }
+
 hr {
   margin: 2rem 0px;
 }
+
 nav {
   z-index: 4;
   position: -webkit-sticky;
@@ -39,21 +46,25 @@ nav {
   box-shadow: 0px 0px 12px 0.1px #d0d0d0;
   display: grid;
   grid-template-columns: auto 1fr auto;
+
   ul {
     padding-left: 15px;
     list-style-type: none;
     margin: 0px;
     align-content: center;
+
     li {
       display: inline-block;
       padding-right: 4px;
       vertical-align: middle;
+
       p {
         padding-top: 0.4rem;
         vertical-align: middle;
         margin: 0.5rem 1rem;
       }
     }
+
     img {
       margin-top: 0.25rem;
       height: 1.5rem;
@@ -61,6 +72,7 @@ nav {
       padding-right: 0.3rem;
     }
   }
+
   a {
     color: black;
     text-decoration: none;
@@ -72,19 +84,23 @@ nav {
     -ms-user-select: none;
     user-select: none;
   }
+
   .vertical-line {
     width: 0.1rem;
     background-color: black;
     height: 100%;
   }
+
   .social {
     font-size: 2.5rem;
     padding-bottom: 0.4rem;
     transition: 0.3s;
   }
+
   .social:hover {
     opacity: 50%;
   }
+
   .dropdown {
     margin: 0.75rem;
     position: absolute;
@@ -120,6 +136,7 @@ nav {
 .menu {
   padding-top: 0.4rem;
   padding-bottom: 0.8rem;
+
   p {
     background-size: 0% 0.2em;
     background-image: linear-gradient(#000, #000);
@@ -128,6 +145,7 @@ nav {
     background-repeat: no-repeat;
     transition: 0.3s ease-in-out;
   }
+
   p:hover,
   .currentpage {
     opacity: 60%;
@@ -147,6 +165,7 @@ nav {
   background-color: #f5f5f5;
   border-radius: 12px;
   transition: 0.2s ease-in-out;
+
   span {
     transition: 0.2s ease-in-out;
     box-sizing: border-box;
@@ -154,12 +173,14 @@ nav {
     background-color: #000;
     border-radius: 2px;
   }
+
   #hamburger {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0%;
     left: 0%;
+
     span {
       width: 70%;
       height: 5%;
@@ -168,16 +189,20 @@ nav {
       position: relative;
       margin: 12% 0;
     }
+
     span:nth-child(1) {
       transition-delay: 0.2s;
     }
+
     span:nth-child(2) {
       transition-delay: 0.3s;
     }
+
     span:nth-child(3) {
       transition-delay: 0.4s;
     }
   }
+
   #cross {
     position: absolute;
     height: 100%;
@@ -190,11 +215,13 @@ nav {
       height: 0%;
       width: 5%;
       position: absolute;
-      right: 46%; /*a / */
+      right: 46%;
+      /*a / */
       top: 10%;
       transform: translate(-50%);
       transition-delay: 0s;
     }
+
     span:nth-child(2) {
       width: 0%;
       height: 5%;
@@ -215,21 +242,26 @@ nav {
     span {
       width: 0%;
     }
+
     span:nth-child(1) {
       transition-delay: 0s;
     }
+
     span:nth-child(2) {
       transition-delay: 0.1s;
     }
+
     span:nth-child(3) {
       transition-delay: 0.2s;
     }
   }
+
   #cross {
     span:nth-child(1) {
       height: 80%;
       transition-delay: 0.3s;
     }
+
     span:nth-child(2) {
       width: 80%;
       transition-delay: 0.3s;
@@ -242,6 +274,7 @@ nav {
   overflow: auto;
   max-height: 70vh;
 }
+
 /*---- main ----*/
 .container {
   position: relative;
@@ -250,6 +283,7 @@ nav {
   margin: auto;
   margin-top: 1rem;
 }
+
 .carousel {
   z-index: 1;
   width: 100%;
@@ -259,6 +293,7 @@ nav {
   position: relative;
   overflow: hidden;
 }
+
 .slider-bg {
   height: 100%;
   width: 100%;
@@ -279,6 +314,7 @@ nav {
   border-radius: 0.5rem;
   transform: scale(1.1);
 }
+
 .slider section {
   overflow: hidden;
   z-index: 1;
@@ -293,6 +329,7 @@ nav {
   border-radius: 0.5rem;
   font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
     --apple-system;
+
   div {
     color: #fff;
     position: relative;
@@ -303,27 +340,33 @@ nav {
     grid-template-rows: 3.5fr 1fr 1fr 5rem;
     grid-template-columns: 1fr auto 1fr;
   }
+
   h1 {
     font-size: 2rem;
     grid-row-start: 2;
     grid-row-end: 3;
   }
+
   p {
     font-size: 1.25rem;
     grid-row-start: 3;
     grid-row-end: 4;
   }
+
   p,
   h1 {
     width: 60vw;
     text-align: center;
-    grid-column-start: 2; /*|•|*/
+    grid-column-start: 2;
+    /*|•|*/
     grid-column-end: 3;
   }
 }
+
 .slider:hover {
   cursor: pointer;
 }
+
 .prev,
 .next {
   background-color: rgba(0, 0, 0, 0.3);
@@ -346,12 +389,15 @@ nav {
   -ms-user-select: none;
   user-select: none;
 }
+
 .next {
   right: 1rem;
 }
+
 .prev {
   left: 1rem;
 }
+
 .pgctrl {
   font-family: sans-serif, --apple-system;
   z-index: 1;
@@ -379,6 +425,7 @@ nav {
   -ms-user-select: none;
   user-select: none;
 }
+
 .control {
   text-align: center;
 }
@@ -393,6 +440,7 @@ nav {
   grid-template-rows: repeat(auto-fill, 23rem);
   grid-template-columns: repeat(auto-fill, 23rem);
   grid-gap: 1rem;
+
   .card {
     transition: 0.75s;
     color: black;
@@ -400,6 +448,7 @@ nav {
     height: 23rem;
     border-radius: 7px;
     text-decoration: none;
+
     div {
       z-index: 1;
       position: inherit;
@@ -409,12 +458,15 @@ nav {
       border-radius: 7px;
       transition: 0.5s;
     }
+
     h2 {
       font-size: 1.9rem;
     }
+
     p {
       font-size: 1.2rem;
     }
+
     h2,
     p {
       color: white;
@@ -424,6 +476,7 @@ nav {
       opacity: 0;
       transition: 0.5s;
     }
+
     .bg-img {
       /*       background: url(/assets/img/t404_null-logo.png); */
       background-size: cover;
@@ -432,11 +485,13 @@ nav {
       width: 23rem;
     }
   }
+
   .card:hover {
     .bg-img {
       filter: blur(5px) brightness(50%);
       -webkit-filter: blur(5px) brightness(50%);
     }
+
     h2,
     p {
       filter: none;
@@ -453,6 +508,7 @@ nav {
   grid-template-rows: repeat(auto-fill, 30rem);
   grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
   grid-gap: 1rem;
+
   .card {
     transition: 0.75s;
     color: black;
@@ -460,6 +516,7 @@ nav {
     height: 30rem;
     border-radius: 7px;
     text-decoration: none;
+
     div {
       z-index: 1;
       position: inherit;
@@ -469,12 +526,15 @@ nav {
       border-radius: 7px;
       transition: 0.5s;
     }
+
     h2 {
       font-size: 1.9rem;
     }
+
     p {
       font-size: 1.1rem;
     }
+
     h2,
     p {
       /*       color: black; */
@@ -484,6 +544,7 @@ nav {
       opacity: 0;
       transition: 0.5s;
     }
+
     .bg-img {
       /*       background: url(/assets/img/t404_null-logo.png); */
       background-size: cover;
@@ -493,6 +554,7 @@ nav {
       width: 30rem;
     }
   }
+
   .card:hover {
     .bg-img {
       filter: brightness(40%);
@@ -500,6 +562,7 @@ nav {
       width: 8vw;
       border-radius: 7px 0px 0px 7px;
     }
+
     h2,
     p {
       padding: 0.3rem 5vw 0.3rem 10vw;
@@ -515,6 +578,7 @@ nav {
   grid-gap: 1rem;
   justify-content: center;
   padding: 0;
+
   li {
     border-radius: 7px;
     background-color: #ddd;
@@ -526,6 +590,7 @@ nav {
   font-size: 3rem;
   margin-top: 3vw;
   margin-bottom: 7vw;
+
   a {
     text-decoration: none;
     color: black;
@@ -536,6 +601,7 @@ nav {
     background-repeat: no-repeat;
     transition: 0.3s ease-in-out;
   }
+
   a:hover {
     opacity: 70%;
     background-size: 100% 0.2em;
@@ -547,10 +613,12 @@ nav {
   font-size: 2.25rem;
   font-weight: 500;
 }
+
 @font-face {
   font-family: "NerdFontsSymbols Nerd Font";
   src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
 }
+
 .nf-icons {
   font-family: "NerdFontsSymbols Nerd Font";
 }
@@ -564,9 +632,11 @@ nav {
   padding: 5vw 5vw;
   border-radius: 10px;
   border: 1px solid #ddd;
+
   strong {
     color: #fff;
   }
+
   .text-box {
     max-width: 1250px;
     margin: 25% auto;
@@ -576,6 +646,7 @@ nav {
     padding: 2rem;
     border-radius: 7px;
     font-size: 1.2rem;
+
     a {
       text-decoration: none;
       color: #fff;
@@ -586,6 +657,7 @@ nav {
       background-repeat: no-repeat;
       transition: 0.3s ease-in-out;
     }
+
     a:hover {
       color: #ccc;
       background-size: 100% 0.2em;
@@ -598,9 +670,11 @@ nav {
   text-decoration: none;
   list-style-type: none;
   font-size: 1.4rem;
+
   li {
     padding: 1rem;
   }
+
   a {
     text-decoration: none;
     color: #46f;
@@ -611,21 +685,103 @@ nav {
     background-repeat: no-repeat;
     transition: 0.3s ease-in-out;
   }
+
   a:hover {
     opacity: 70%;
     background-size: 100% 0.2em;
   }
+
   .title {
     font-size: 1.6rem;
   }
 }
+
 .subdiv {
   padding: 1rem;
 }
+
 .long-br {
   display: block;
   height: 2rem;
 }
+
+
+.contact-email {
+
+  .inputbox {
+    outline: none;
+    height: 3rem;
+    width: 100%;
+    display: block;
+    background: #EFEFEF;
+    color: black;
+    border: 0px solid #505050;
+    border-radius: 5px;
+    transition: 0.3s;
+    margin-top: 0.5rem;
+  }
+
+  :not(textarea) {
+    text-align: center;
+  }
+
+  .inputbox:hover {
+    background: #DEDEDE;
+  }
+
+  .inputbox:focus {
+    background: #CECECE;
+  }
+
+  button {
+    width: 100%;
+    height: 3rem;
+    border-radius: 5px;
+    text-align: center;
+  }
+
+  .formbutton {
+    background: #272727;
+    color: #fff;
+    border: 0px;
+    transition-duration: 300ms;
+    cursor: pointer;
+  }
+
+  .formbutton:hover {
+    background: #727272;
+  }
+
+  .form {
+    border-radius: 5px;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    padding: 4rem 2.5rem;
+    width: 65%;
+    background: #FDFDFD;
+    box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
+  }
+
+  .error_box {
+    background: #FFEEEE;
+    border-radius: 5px;
+
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 1rem 1rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+textarea, textfield {
+  padding: 5px;
+  font-size: 0.95rem;
+}
+
+
 @media screen and (width >=1180px) and (width<=1690px) {
   /*if(width<1620px&&width>=1125px)*/
 
@@ -635,6 +791,7 @@ nav {
         position: relative;
         width: 17.5rem;
         padding: 0rem 0rem;
+
         a {
           transition: 0.2s;
           display: flex;
@@ -642,33 +799,40 @@ nav {
           border-radius: 7px;
           margin: 0.3rem 0;
         }
+
         a:hover {
           background-color: #ddd;
         }
+
         strong {
           margin-left: auto;
           margin-right: auto;
           align-content: center;
         }
+
         p {
           margin: 0.5rem 0;
         }
       }
+
       .dropdown-menu {
         display: none;
       }
     }
+
     .menu,
     .dropdown-open.dropdown,
     .dropdown-open.dropdown-social {
       opacity: 1;
       display: initial;
     }
+
     .social,
     .dropdown-open.dropdown-menu {
       opacity: 0;
       display: none;
     }
+
     .burger {
       display: block;
     }
@@ -680,11 +844,13 @@ nav {
 
   nav {
     font-size: 1.4rem;
+
     ul {
       img {
         height: 2.5rem;
       }
     }
+
     .social {
       font-size: 2rem;
     }
@@ -693,19 +859,24 @@ nav {
       height: 100px;
       width: 100px;
     }
+
     .dropdown {
+
       .dropdown-social,
       .dropdown-menu {
         position: relative;
       }
+
       .dropdown-menu {
         width: 18rem;
         padding: 0rem 0rem;
       }
+
       .dropdown-social {
         display: flex;
         flex-wrap: wrap;
       }
+
       .dropdown-menu p,
       .dropdown-social a {
         transition: 0.2s;
@@ -713,6 +884,7 @@ nav {
         border-radius: 7px;
         margin: 0.3rem 0;
       }
+
       .dropdown-menu p:hover {
         background-color: #ddd;
       }
@@ -720,29 +892,35 @@ nav {
       .dropdown-social a:hover {
         opacity: 50%;
       }
+
       hr {
         margin: 0.75rem 0rem;
         padding: 1rem;
         border: 1px solid #aaa;
       }
     }
+
     .social-name {
       display: none;
     }
+
     .social,
     .menu-item {
       display: none;
     }
+
     .dropdown-open {
       transition: 0.3s;
       opacity: 1;
       display: initial;
+
       .dropdown,
       .dropdown-social,
       .downdown-menu {
         display: initial;
       }
     }
+
     .burger {
       display: block;
     }

contacts/index.html

@@ -200,6 +200,12 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         <li>
           <strong class="title" style="color:#555"><b class="nf-icons icons">&#xf42f;</b> Email</strong>
           <p class="desc">
+            <a href="mailto:info@t404null.com" class="text-info">info@t404null.com</a>
+            <br />
+            <a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
+            <br />
+            <a href="mailto:t404.null@t404null.com" class="text-info">t404.null@t404null.com</a>
+            <br /><br />Or:<br />
             <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
             <br />
             <a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
@@ -221,6 +227,9 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </li>
       </ul>
       <hr />
+      <h1 class="topic">
+        (Or) Contact me here
+      </h1>
       <div class="contact-email">
         <form method="POST" class="form">
                 <label for="name">Subject:</label>

song_usage_terms/index.html

@@ -205,7 +205,7 @@
           <strong class="title">1.) In the case if you want to use my song(s) / track(s) as a corporation / a company material</strong>
           <br /> If you wish to use my song as a corporation / a company material, no matter how you use it, please contact me and get confirmation at one of the following email address(es): <br />
           <a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
-            <br /><br />
+            <div class="long-br"></div>
             Or:
             <br />
             <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
@@ -220,7 +220,7 @@
             <strong class="title">1.1.) In the case if you want to use my song(s) / track(s) as an educational institution or a volunteer organization / a company for volunteer</strong>
             <br /> You are allowed use my songs as well as individuals. <br /> If you can, it would be (very) helpful for me if you could confirm it once in the following email adress(es): <br />
             <a href="mailto:info@t404null.com" class="text-info">info@t404null.com</a>
-            <br /><br />
+            <div class="long-br"></div>
             Or:
             <br />
             <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
@@ -265,7 +265,7 @@
             <strong class="title">3.2.) If you want to distribute the music as an official chart / official music for a rhythm game (in short, if you're a developer/offical charter/owner of that game) or if you want to use my song/track as a BGM that is included for a program / a game or its directory</strong>
             <br /> Please contact me at one of the following email address(es): <br />
             <a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
-            <br /><br />
+            <div class="long-br"></div>
             Or:
             <br />
             <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
@@ -281,7 +281,7 @@
             <strong class="title">3.3.) If you want to repost my song</strong>
             <br /> Please contact me at one of the following email address(es): <br />
             <a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
-            <br /><br />
+            <div class="long-br"></div>
             Or:
             <br />
             <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
@@ -296,7 +296,7 @@
           <strong class="title">4.) Other Uses</strong>
           <br /> Please contact me at one of the following email address(es): <br />
           <a href="mailto:info@t404null.com" class="text-info">info@t404null.com</a>
-          <br /><br />
+          <div class="long-br"></div>
           Or:
           <br />
           <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>