:root {
 --background-color: #fff;
 --text-color: #6e45ff;
 --link-color:black;
 --link-weight:bold;
 --link-shadow:1px 1px #a8a8a8;
 --link-hover-color:#6e45ff;
 --link-hover-bg:#deffd1;
 --selection-color:#ffcdef;
 --h1-color: white;
 --h1-background:linear-gradient(90deg, rgba(110,69,255,1) 35%, rgba(255,255,255,0) 77%);
 --h1-mobile: linear-gradient(90deg, rgba(110,69,255,1) 57%, rgba(255,255,255,0) 100%);
 --nav-border-image:linear-gradient(180deg, rgba(255,255,255,0) 1%, rgba(110,69,255,1) 5%, rgba(110,69,255,1) 57%, rgba(255,255,255,0) 100%) 1;
  --transition-duration: .1s /* Declare transition duration */
}

[data-theme="dark"] {
     --background-color: #1e171f;
 --text-color: #ddd;
 --link-color:#995fff;
 --link-weight:bold;
 --link-shadow:none;
 --link-hover-color:#ddd;
 --link-hover-bg:#5310ff;
 --selection-color:#5310ff;
 --h1-color: white;
 --h1-background:linear-gradient(90deg, rgba(83,16,255,1) 35%, rgba(83,16,255,0) 77%);
 --h1-mobile: linear-gradient(90deg, rgba(110,69,255,1) 57%, rgba(255,255,255,0) 100%);
 --nav-border-image:linear-gradient(180deg, rgba(255,255,255,0) 1%, rgba(110,69,255,1) 5%, rgba(110,69,255,1) 57%, rgba(255,255,255,0) 100%) 1;
}

body {
  background-color: var(--background-color);
   -webkit-transition: background var(--transition-duration) ease-in-out;
 transition: background var(--transition-duration) ease-in-out;
  color: var(--text-color);
  font-family: "ＭＳ Ｐゴシック", serif;
  margin: 0 auto;
  width: 800px;
  font-size:14px;
  letter-spacing:1px;
}
::selection {
  background: var(--selection-color);
}
a{
  color: var(--link-color);
  font-weight:var(--link-weight);
      text-shadow:var(--link-shadow);
}
a:hover{
  background:var(--link-hover-bg);
  color:var(--link-hover-color);
}
img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
h1{
  font-size:16px;
  font-style: italic;
  text-transform: uppercase;
  font-family: "Times New Roman";
  background: var(--h1-background);
  color: var(--h1-color);
  padding: 1px;
  padding-left:5px;
  padding-bottom:2px; 
  letter-spacing:1px;
  margin:0;
}
h2{
  font-size:14px;
    border:none;
    border-bottom:1px dotted #6e45ff;
  margin-right:10px;
  font-weight:bold;
  text-transform: uppercase;
}
h3{
  margin:0;
  font-size:14px;
}
ul{
  padding:5px;
}
header{
  padding-top:20px;
  margin:15px;
  text-align:center;
}
header img{
  max-width:100%;
}
.container{
  width:100%;
  display: flex;
}
main{
  width:100%;
}
main div{
  padding:15px;
}
.item{
  padding:5px;
  display:inline-block;
   margin: 0 auto;
   overflow-wrap: break-word;
}
.icon{
  padding:5px;
}
nav{
   border-left:1px solid #6e45ff;
  width:225px;
  border-image: var(--nav-border-image);
}
nav div{
  padding-left:25px;
}
section{
  padding-top:15px;
}
footer{
 font-style: italic;
 font-size:10px;
 font-family: "Times New Roman"
 margin-bottom:20px;
  border-top:1px solid #6e45ff;
  padding:15px;
  text-align:center;
margin:15px;
}
.center{
  margin: 0px auto;
  text-align:center;
}

/*header, footer, nav, main{
  border:1px solid red;
}*/

    @media screen and (max-aspect-ratio:16/9) {
      body, hr{
width:95%;
        margin:5px auto;
      }
      h1{
        background: var(--h1-mobile);
      }
.container{
  display:block;
}
nav{
width:100%;
  border-image:none;
  border:none;
  border-top:1px solid #6e45ff;
margin:0 auto;
}
      nav div{
        display:flex;
      }
      
      section:nth-child(2){
        padding-left:25px;
      }
 
      footer{
        margin:15px auto;
      }
      img{
        max-width:100%;
      }
      
      /*header, footer, nav, main{
  border:1px solid red;
}*/
}