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

:root {
  --radius: 4px;
  --padding: 20px;
  --minus: -20px;
  --column: 300px;
}

@media (max-width: 500px) {
  :root {
    --padding: 10px;
    --minus: -10px;
  }
}
@media (max-width: 400px) {
  :root {
    --column: 200px;
  }
}

body {
  width: 100vw;
  height: 100%;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Gill Sans", sans-serif;
  font-size: 16px;
  background-color: hsl(175deg 77% 15%);
}

.container {
  max-width: 1400px;
  width: 100%;
  padding: 0 20px;
  margin: 30px auto;
}

label {
  display: block;
  margin-bottom: 20px;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  padding: 20px;
  background-color: hsl(175deg 77% 85%);
  color: hsl(175deg 77% 25%);
  border: none;
  min-height: 50px;
}

input:focus,
textarea:focus {
  outline-color: hsl(175deg 77% 35%);
}

h2 {
  margin-bottom: 10px;
  padding: 0 var(--padding);
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column), 1fr));
  gap: calc(10px + (50 - 10) * ((100vw - 320px) / (1920 - 320)));
  align-items: baseline;
  /*
  calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
  */
}

.calc-clamp {
  grid-column: 1/3;
}
.calc-wapper {
  display: grid;
  grid-template-columns: 30% 70%;
}
.calc-clamp-r {
  padding: 0 50px;
}

.col,
.block,
input,
textarea,
.copy,
.result {
  border-radius: var(--radius);
}

.col {
  background-color: hsl(175deg 77% 25%);
  padding: 30px var(--padding);
  color: #ffffff;
}
.block {
  border: 1px solid hsl(175deg 77% 30%);
  padding: var(--padding) var(--padding) 0;
}
.block:not(:last-child) {
  margin-bottom: 10px;
}

.btn {
  background-color: hsl(175deg 77% 15%);
  color: hsl(175deg 77% 30%);
  font-family: inherit;
  font-size: inherit;
  padding: 10px 25px;
  border: none;
  cursor: pointer;
}

p {
  color: hsl(175deg 77% 35%);
  margin-bottom: 10px;
}
.result {
  background-color: hsl(175deg 77% 20%);
  padding: 15px var(--padding) var(--padding);
  margin: 10px var(--minus) 0 var(--minus);
}
a,
.copyright {
  color: hsl(175deg 77% 35%);
}
a:hover {
  text-decoration: none;
}

.myid {
  margin: var(--padding) 0 0 0;
}

code {
  display: block;
  font-size: 0.8rem;
  color: hsl(175deg 77% 35%);
  margin-bottom: 10px;
}

ol,
ul,
ol.result,
ul.result {
  padding: 0 20px 0 33px;
  line-height: 2;
}

.copyright {
  margin-top: 30px;
  display: block;
}