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

:root {
    --Blue-800: hsl(234, 29%, 20%);
    --Blue-700: hsl(235, 18%, 26%);
    --Grey: hsl(0, 0%,58%);
    --White: hsl(0, 0%, 100%);
}

body {
    display: block;
    justify-items: center;
    align-content: center;
    min-height: 100vh;
    font-family: "Roboto", sans-serif;
    background-color: var(--Blue-700);
}


/* Main form loadout */


#container {
    visibility: visible;
    position: relative;
    top: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--White);
    border-radius: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.inner-container {
    display: flex;
    align-content: center;
    margin: 1rem;
}

.separate-for-content {
    display: grid;
    margin: 2rem;
}

.header {
    font-size: 2rem;
    font-weight: bold;
    color: var(--Blue-800);
}

.ad {
    font-size: 0.8rem;
    color: var(--Blue-700);
    font-weight: 500;
}

.pros {
    display: flex;
    font-weight: 600;
}

ul {
    margin-left: 1.6rem;
    list-style-image: url(assets/images/icon-list.svg);
    color: var(--Blue-700);
}

li {
    padding-left: 1rem;
    font-size: 0.8rem;
    
}

.pros-span {
    height: 2rem;
}

span {
    display: inline-block;
    vertical-align: middle;
}

.input-submit {
    display: grid;
    gap: 1rem;
}

.input-holder {
    display: grid;
    gap: 0.01rem;
}

.e-mail {
    display: flex;
    column-gap: 10rem;
    font-size: 0.7rem;
    color: var(--Blue-700);
    font-weight: 600;
}

#wrong-input {
    color: red;
}

.hidden-message {
    visibility: hidden;
}


.input {
    padding-left: 1rem;
    height: 2.3rem;
    border-radius: 0.3rem;
    border: 0.1rem solid var(--Grey);
}

.submit {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    height: 2.3rem;
    background-color: var(--Blue-800);
    color: var(--White);
    border-radius: 0.3rem;
    cursor: pointer;
    user-select: none;
    
}

.submit:hover {
    background-image: linear-gradient(to right, #FF512F 0%,#FF512F  30%, #F09819  70% );
}

.image {
    width: 18rem;
}


/* Subscription confirmed form */


#container-sub {
    margin: 0 auto;
    visibility: hidden;
    display: flex;
    position: relative;
    top: -18rem;
    justify-items: center;
    align-content: center;
    width: 30rem;
    background-color: var(--White);
    border-radius: 2.5rem;
}

.inner-container-sub {
    margin: 3rem;
    display: grid;
    gap: 1rem;
}

.image-sub {
    width: 2.5rem;
}

.header-sub {
    font-size: 3rem;
    font-weight: 600;
    color: var(--Blue-800);
}

.paragraph-sub {
    font-size: 0.9rem;
    color: var(--Blue-800);
    font-weight: 500;
}

#correct-email {
    display: inline-block;
    height: 1.3rem;
    font-size: 0.9rem;
}

#back-to-form {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    height: 2.5rem;
    background-color: var(--Blue-800);
    color: var(--White);
    border-radius: 0.3rem;
    cursor: pointer;
    user-select: none;
}

#back-to-form:hover {
    background-image: linear-gradient(to right, #FF512F 0%,#FF512F  30%, #F09819  70% )
}

@media screen and (max-width:75rem) {
    body {
        min-height: 200vh;
    }

    #container {
        display: flex;
        justify-self: center;
        margin: 0 auto;
        position: unset;
        width: 30rem;
        height: 40rem;
        overflow: hidden;
    }

    .inner-container {
        display: block;
    }

    .separate-for-content {
        position: relative;
        top: 20rem;
        gap: 1rem;
    }

    .image {
        width: 100%;
    }

    .mobile {
        display: flex;
        justify-self: center;
        width: 30.5rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        position: relative;
        top: -25rem;
    }
}

@media screen and (max-width: 30rem) {
    body {
        min-height: unset;
        height: 100%;
    }

    #container {
        height: 100%;
    }
    
}