body {
    font-family: 'Robto-Regular', sans-serif;
    background-color: hsl(0, 0%, 98%);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}
main {
    margin: auto;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.container, .list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.container {
    padding: 0 1rem;
    width: 80%;  
    justify-content: center;
    gap: 1.5rem;
}
.list {
    margin: 0;
    padding: 0;
    gap: 20px;
    list-style-type: none;
    color: hsl(234, 29%, 20%);
}
.list li {
    display: flex;
    align-items: center;
}
.image2 {
    display: none;
}
.list li img {
    margin-right: 10px;
    font-size: 32px;
}
.form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#email {
    border: none;
    outline: none;
    padding: 15px;
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 5px;
    font-size: 16px;
}
label {
    color: hsl(234, 29%, 20%);
    font-weight: 700;
    font-size: 12px;
}
input[type="submit"] {
    background-color: hsl(234, 29%, 20%);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: hsl(4, 100%, 67%);
}
.error-message {
    margin: 0;
    color: red;
    font-size: 12px;
    position: relative;
    left: 12rem;
    top: -95px;
    display: block;
}
.error-border {
  border: 2px solid hsl(4, 100%, 67%) !important;
}

#message-container {
    flex-direction: column;
    gap: 10px;
    background-color: hsl(0, 0%, 98%);
    border-radius: 10px;
    margin: 2rem auto;
    padding: 40px;
}
.invisible {
    display: none;
}
#message-container h1 {
    color: hsl(234, 29%, 20%);
    font-size: 32px;
    width: 50%;
    margin-bottom: 20px;
}
#message-container p {
    width: 100%;
    color: hsl(234, 29%, 20%);
    font-size: 16px;
}
.dismiss {
    margin-top: 8rem;
    background-color: hsl(234, 29%, 20%);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}


@media screen and (min-width: 640px) {
    body {
        background-color: hsl(234, 29%, 20%);
    }
    main {
        min-width: 600px;
        width: 50%;
        height: 70vh;
        background-color: white;
        flex-direction: row-reverse;
        gap: 12px;
        border-radius: 15px;
        margin: 5rem auto;
        padding: 10px;
    }
    .image {
       display: none;
    }
    .image2 {
        display: block;
    }
    .list {
        gap: 10px;
    }
    .container {
        width: 300px;
        font-size: 13px;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
    }
    .form {
        gap: 10px;
        width: 300px;
    }
    #email,
    input[type="submit"] {
        padding: 10px;
        font-size: 12px;
   }
   #message-container {
    flex-direction: column;
    height: 50vh;
    width: 22%;
    gap: 10px;
    background-color: hsl(0, 0%, 98%);
    border-radius: 10px;
    margin: 6rem auto;
    padding: 30px;
    }

    #message-container h1 {
    color: hsl(234, 29%, 20%);
    font-size: 22px;
    }
    .dismiss {
    margin: 0;
    background-color: hsl(234, 29%, 20%);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}
    .error-message {
    top: -68px;
}

}