@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1rem;
  font-family: Roboto;
  color:var(--blue800);
}

:root{
  --red: hsl(4, 100%, 67%); 
  --blue800: hsl(234, 29%, 20%);
  --blue700: hsl(235, 18%, 26%);
  --grey: hsl(0, 0%,58%);
  --white: hsl(0, 0%, 100%); 
}
html{
  font-size: 16px;
}
.hidden{
  display:none;
}
#top-image{
  width:100vw;
}
.title-container{
  padding: 1.56rem;
  display: flex;
  flex-direction: column;
  gap: 1.56rem;
}
.heading{
  font-size: 2.25rem;
  font-weight: 700;
}
ul{
  display: flex;
  flex-direction: column;
  gap: 1.56rem;
}
li{
  padding-right: 1.56rem;
  line-height: 1.56rem;
  list-style: none;
  position:relative;
  padding-left:1.875rem;
  display:grid;
}
li::before{
  position:absolute;
  content: "";
  background: url("icon-list.svg") ;
  height: 1.25rem;
  width: 1.25rem;
  background-size:contain ;
}
.li1::before{
  top:6%;
}
.li2::before{
  top:8%;
}
.email-label{
  margin-bottom:0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.email-input{
  padding: 1rem 0;
  padding-left: 1rem;
  border-radius: .5rem;
  border:0.0625rem solid var(--grey);
  margin-bottom: 1.5rem;
  font-family: inherit;
  font-size: 1rem;
}
.error-message{
  position:absolute;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  top:0px;
  right:0px;
  display:none;
}
.error-display{
  display:inline;
}
.error-message-input{
  border:0.0625rem solid var(--red);
  background: rgba(255, 85, 85, 0.2) ;
  color: var(--red);
}
form{
  display:grid;
  position:relative;
}
.submit{
  background: var(--blue700);
  font-weight: 700;
  font-family: inherit;
  border:none;
  color: var(--white);
  padding: 1rem 0;
  border-radius: .5rem;
}
.email-input,.submit:hover{
  cursor: pointer;
}
.submit:hover{
  background: var(--red);
  box-shadow: 0.35rem 0.35rem 1.5rem rgba(255, 85, 85, 0.5) ;
}

@media (min-width:450px){
  html{
    font-size:18px;
  }
}
@media (min-width:550px){
  html{
    font-size:20px;
  }
}
@media (min-width:650px) and (max-width:767px){
  html{
    font-size:22px;
  }
}
@media (min-width:768px){
  html{
    font-size:16px;
  }
  main{
    max-width:900px;
    background: var(--white);
    border-radius: 1.5rem;
    display:grid;
    grid-template-columns: 1fr 1fr;
    overflow:hidden;
    grid-template-areas:"text img" ;
    align-items: center;
  }
  #top-image{
    grid-area: img;
    width:100%;
    display:inherit;
    height: 100%;
  
    padding: 1.2rem;
    border-radius: 2rem;
  }
  body{
    background: var(--blue800);
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .title-container{
    grid-area: text;
    padding: 0 3rem;
    
  }
  li{
    padding-right: 0px;
  }
}