/* variable */
:root {
  /* Font Colors */
  --font-color: #46505C; /* #4a5565; */
  --font-color-header: #39414A; /* #24292F; */
  /* --font-color-accent: #00C8C8F0; */
  /* --font-color-accent-gradient: linear-gradient(90deg, rgba(0,255,200,1) 0%, rgba(0,200,255,1) 100%); */
  --font-color-accent: rgba(255, 100, 180, 1.0);
  --font-color-accent-gradient: linear-gradient(115deg, rgba(255, 100, 180, 1.0) 0%, rgba(120, 190, 255, 0.95) 100%);
  --font-color-footer: var(--font-color);
  /* Background Colors */
  --background-color: /* Soft Pastel Dream */
    linear-gradient(135deg, #F8BBD9 0%, #FDD5B4 25%, #FFF2CC 50%, #E1F5FE 75%, #BBDEFB 100%);
  --background-color: /* Pastel Wave */
    linear-gradient(120deg, #d5c5ff 0%, #a7f3d0 50%, #f0f0f0 100%);
  --background-color: /* Blue Corner Glow */
    radial-gradient(circle 600px at 0% 200px, #bfdbfe, transparent),
    radial-gradient(circle 600px at 100% 200px, #bfdbfe, transparent);
  --background-color: /* Pink Corner Dream */
    radial-gradient(circle 600px at 0% 200px, #fce7f3, transparent),
    radial-gradient(circle 600px at 100% 200px, #fce7f3, transparent);
  --background-color: /* Dreamy Sky Pink Glow */
    radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%);
  --background-color: /* Dual Gradient Overlay (Top) */
    linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px),
    radial-gradient(circle 500px at 0% 20%, rgba(139,92,246,0.3), transparent),
    radial-gradient(circle 500px at 100% 0%, rgba(59,130,246,0.3), transparent);
    /* background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%; */
  --background-color: /* Aurora Dream Diagonal Flow, https://patterncraft.reactbd.com/ */
    radial-gradient(ellipse 80% 60% at 5% 40%, rgba(175, 109, 255, 0.48), transparent 67%),
    radial-gradient(ellipse 70% 60% at 45% 45%, rgba(255, 100, 180, 0.41), transparent 67%),
    radial-gradient(ellipse 62% 52% at 83% 76%, rgba(255, 235, 170, 0.44), transparent 63%),
    radial-gradient(ellipse 60% 48% at 75% 20%, rgba(120, 190, 255, 0.36), transparent 66%),
    linear-gradient(45deg, #f7eaff 0%, #fde2ea 100%);
  --background-input-url: rgba(255, 255, 255, 0.7);
  --background-input-color: rgba(255, 255, 255, 0.7);
  --background-qrcode-container: rgba(255, 255, 255, 0.7);
  --background-download-button: var(--font-color-header);
  /* QR Code Colors */
  --qr-color-1: #24292E; /* #222222 ; */
  --qr-color-2: #0064C8; /* #1E63B5 ; */
  --qr-color-3: #00C864; /* #2F8F4E ; */
  --qr-color-4: #E06D15; /* #F28C2B ; */
  --qr-color-5: #BC1C5F; /* #D64545 ; */
  /* QR Code Sizes */
  --qr-size: 120px;
}

/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap');
body, h2, h3, h4, h5, h6, input, button, textarea {
  color: var(--font-color);
  font-size: 15px;
  line-height: 1.6em;
	font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

pre, code, input, textarea, button{
  font-size: 15px;
  line-height: 1.2em;
}

section a {
  color: var(--font-color-accent);
}

/* basis */
html{
  height: -webkit-fill-available;
}

body {
  background: var(--background-color);
  margin: 0;
  /* padding-top: 64px; */
  padding-left: calc((100vw - 800px) / 2);
  padding-right: calc((100vw - 800px) / 2);
  padding-bottom: 64px;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: -webkit-fill-available;
	overflow-x: hidden;
  position: relative;
}

/* header */

header {
  color: var(--font-color-header);
  /* background: #FFFFFFF0; */
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* position: fixed;
	top: 0;
  left: 0;
  z-index: 999; */
  width: 100%;
  height: 64px;
  line-height: 20px;
  padding-top: 18px;
  /* padding-left: calc((100vw - 800px) / 2);
  padding-right: calc((100vw - 800px) / 2); */
  padding-bottom: 14px;
  box-sizing: border-box;
  /* margin-top: -64px; */
}

header .logo {
  color: var(--font-color-header);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo img {
  width: 28px;
  height: 28px;
  padding-right: 3px;
}

header .logo h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
}

header .logo h1 span {
  padding-left: 5px;
  line-height: 2em;
  color: var(--font-color-accent);
  background: var(--font-color-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header .menu,
header .menu img {
  width: 28px;
  height: 28px;
  transition: 0.2s;
}

header a.menu:hover,
header .menu img:hover {
  opacity: 0.8;
  transition: 0.2s;
}

/* main */

main {
  z-index: 2;
  position: relative;
  min-height: calc(100vh - 128px);
  /* display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; */
}

/* footer */

footer{
  z-index: 2;
  position: relative;
  color: var(--font-color-footer);
	display: flex;
	align-items: center;
  justify-content: center;
  height: 64px;
  margin-bottom: -64px;
  box-sizing: border-box;
}

/* main */

.section--url {
  width: 100%;
  max-width: 800px;
  padding-top: 35px;
  padding-bottom: 35px;
}

.section--qrcode {
  width: 100%;
  padding-bottom: 25px;
}

.section--description {
  color: var(--font-color);
  max-width: 800px;
  text-align: justify;
}

.section--url h2,
.section--qrcode h2,
.section--description h2 {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section--url p,
.section--qrcode p,
.section--description p {
  text-align: justify;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.6em;
}

/* section--url */

.url-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  height: 40px;
}

.url-container label {
  height: 100%;
  width: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background: url('data:image/svg+xml;utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'20px\' viewBox=\'0 -960 960 960\' width=\'20px\' fill=\'%234a5565\'%3E%3Cpath d=\'M432-288H288q-79.68 0-135.84-56.23Q96-400.45 96-480.23 96-560 152.16-616q56.16-56 135.84-56h144v72H288q-50 0-85 35t-35 85q0 50 35 85t85 35h144v72Zm-96-156v-72h288v72H336Zm192 156v-72h144q50 0 85-35t35-85q0-50-35-85t-85-35H528v-72h144q79.68 0 135.84 56.23 56.16 56.22 56.16 136Q864-400 807.84-344 751.68-288 672-288H528Z\'/%3E%3C/svg%3E');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
}

.url-container input {
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  line-height: 30px;
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
  outline: none;
  background: transparent;
  position: relative;
  display: inline-block;
  color: var(--font-color);
  transition: 0.2s;
}

.url-container:hover label,
.url-container:focus label,
.url-container:active label,
.url-container:has(input:hover) label,
.url-container:has(input:focus) label,
.url-container:has(input:active) label {
  width: 24px;
  margin-left: 8px;
  margin-right: 8px;
  transition: 0.2s;
}

.url-container:hover input,
.url-container:focus input,
.url-container:active input,
input:hover,
input:focus,
input:active {
  font-size: 13px;
  color: var(--font-color-header);
  transition: 0.2s;
}

/* section--qrcode */

.color-container-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

.color-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  height: 30px;
  width: calc(var(--qr-size) + 20px);
}

.color-container label {
  height: 100%;
  width: 21px;
  margin-left: 10px;
  margin-right: 10px;
  background: url("data:image/svg+xml;utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%234a5565'%3E%3Cpath d='M216-216h51l375-375-51-51-375 375v51Zm-72 72v-153l498-498q11-11 23.84-16 12.83-5 27-5 14.16 0 27.16 5t24 16l51 51q11 11 16 24t5 26.54q0 14.45-5.02 27.54T795-642L297-144H144Zm600-549-51-51 51 51Zm-127.95 76.95L591-642l51 51-25.95-25.05Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
}

.color-container input {
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  padding-right: 34px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  background: transparent;
  position: relative;
  display: inline-block;
  color: var(--font-color);
  transition: 0.2s;
}

.color-container:hover label,
.color-container:focus label,
.color-container:active label,
.color-container:has(input:hover) label,
.color-container:has(input:focus) label,
.color-container:has(input:active) label {
  width: 24px;
  margin-left: 8px;
  margin-right: 8px;
  transition: 0.2s;
}

.color-container:hover input,
.color-container:focus input,
.color-container:active input,
.color-container input:hover,
.color-container input:focus,
.color-container input:active {
  font-size: 13px;
  color: var(--font-color-header);
  transition: 0.2s;
}

.color-container-group-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.qrcode-container-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px;
}

.qrcode-container {
  width: var(--qr-size);
  /* height: 200px; */
  background: #FFFFFFF0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 8px;
  transition: 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.qrcode-container .qrcode {
  width: 100%;
  height: 100%;
}

.qrcode-container .buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}

button.download {
  height: 21px;
  width: calc(50% - 4px);
  border-radius: 6px;
  box-sizing: border-box;
  background: var(--background-download-button);
  font-size: 10px;
  color: #FFFFFF;
  opacity: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  position: relative;
}

button.download:hover {
  /* opacity: 1; */
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
  opacity: 0.8;
  transition: 0.2s;  
}

.icon-download {
  color: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  padding-right: 13px;
}

.icon-download:before {
  width: 20px;
  height: 12px;
  display: inline-block;
  content: "";
  background-image: url('data:image/svg+xml;utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M480-336%20288-528l51-51%20105%20105v-342h72v342l105-105%2051%2051-192%20192ZM263.72-192Q234-192%20213-213.15T192-264v-72h72v72h432v-72h72v72q0%2029.7-21.16%2050.85Q725.68-192%20695.96-192H263.72Z%22%2F%3E%3C%2Fsvg%3E');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  padding-left: 3px;
}



/* section--description */



/* media query */

@media screen and (max-width:840px) {
  body {
    /* padding-top: 60px;
    padding-bottom: 60px; */
    padding-left: 20px;
    padding-right: 20px;
  }
  header {
    height: 60px;
    padding-top: 16px;
    /* padding-left: 20px;
    padding-right: 20px; */
  }
  footer {
    height: 60px;
    margin-bottom: -60px;
  }
  main {
    min-height: calc(100vh - 120px);
  }
  .section--url {
    padding-bottom: 30px;
  }
  .section--qrcode {
  }
  .section--description {
    /* padding-bottom: 10px; */
  }
  .color-container-group-list {
    flex-direction: column;
    gap: 20px;
  }
  .qrcode-container-group {
    flex-direction: row;
  }
}