*,*::before, *::after {
  box-sizing: border-box;
}

image {
  width: 100%;
}

:root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 15px;

--dark-100: #4B5563;
--dark-400: hsl(215, 22%, 21%);
--dark-500: #252525;
--dark-700: #0e1627;
--dark-900: #000000;

--green-tint-100: #A7F3D0;
--green-tint-300: #6EE7B7;
--green-tint-400: #34D399;
--green-tint-700: #059669;
--green-tint-900: #047857;


--light-100: #F9FAFB;
--light-300: #D1D5DB;
--light-400: #9CA3AF;
--light-700: #6B7280;
--light-900: #4B5563;
}

html {
margin: 0;
padding: 0;

}

a {
 cursor: pointer;
}

button {
cursor: pointer;
}

.light-title {
color: #F9FAFB;

}

.back {
cursor: pointer;
}

.green-title {
  color: var(--green-tint-400);

}


.heading {
  display: flex;
  background-color: var(--dark-900);
  width: 100%;
  padding: 0;
  margin: 0;
  /* content: ""; */
  max-width: 700px
}

.inset {
  
  margin: 2em auto;
padding: 1em;
  background-color: var(--dark-700);
  /* text-align: center; */
  max-width: 600px;
  display: block;
  line-height: 1rem;
}

.inset p {
  color: var(--light-300);

}

.inset label 
{
  color: var(--light-100);
  margin-top: 1rem;
  grid-area: 1 / 3 / 2 / 4 ;
  text-align: center;
}

.heading button {
min-height: 2.4em;
  padding: 0.8em;
  border-radius: 8px;
  width: 10em;
  padding: .5em;
  margin: 1em;
  border: none;
  outline: none;
  font-size: 14px;
}

.button-area {

  display: grid;
  grid-template-columns: 2;
  grid-template-rows: 5;
}

.form {
background-color: var(--green-tint-100);
width: 8rem;
margin: 0 0 0 1rem;
height: 2rem;
/* text-align: center; */
padding: .5rem;
border-radius: 5px;
color: var(--dark-900);
align-self: center;

}

.back {
 background-color: rgba(90, 84, 91, 0.959);
    font-size: 14px;
    border-radius: 10px;
    margin: 3px;
    height: 2rem;
    width: 5rem;
    color: #fff;
    padding: 0.5rem;
    text-align: center;
}



.button1 {
/* margin-top: 1rem; */
  background-color: var(--green-tint-700);
  color: var(--light-100);
  margin-top: 3rem;
  cursor: pointer;
  grid-area: 2 / 1 / 3 / 2 ;

}

.button2 {

color: var(--green-tint-300);
background-color: var(--dark-400);
cursor: pointer;
}
#password1 {
  grid-area: 4 / 1 / 5 / 2 ;

}

#password2 {

  grid-area: 4 / 3 / 5 / 4 ;
}

#password-length {

  grid-area: 2 / 3 / 3 / 4 ;
}

#copy-button-1 {
  grid-area: 5 / 1 / 6 / 2 ;
  background-color: var(--green-tint-100);
  color: var(--dark-100);
}

#copy-button-2 {
  grid-area: 5 / 3 / 6 / 4 ;
  background-color: var(--green-tint-100);
  color: var(--dark-100);
}

.button1:focus-visible, 
.button1:hover, 
.button2:focus-visible, 
.button2:hover 
{
opacity: 70%;
border: visible;
outline: visible;
background-color: #000;
color: var(--green-tint-100);

}

#copy-button-1:focus-visible, 
#copy-button-1:hover, 
#copy-button-2:focus-visible, 
#copy-button-2:hover, 
.form:focus-visible,
.form:hover
{
opacity: 80%;
border: visible;
background-color: #fff;
font-weight: 700;

}