@font-face {
	font-family: 'Roboto';
	src: url('/projects/frontendMentor/newsletter-sign-up-with-success-message-main/assets/fonts/Roboto-Regular.ttf');
}

html{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background-color: hsl(235, 18%, 26%);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 16px;
    font-family: 'Roboto';
    color: hsl(234, 29%, 20%);
}

.index-container{
    width: 53%;
    height: 60%;
    
    background-color: hsl(0, 0%, 100%);

    border-radius: 25px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;
}

.right{
    width: 50%;
    height: 90%;
}

.right>div{
    width: 100%;
    height: 100%;
}

.left{
    width: 50%;
    height: 90%;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.left-header{
    width: 95%;
    height: 20%;

    display: flex;
    align-items: end;

    font-size: 3rem;
    font-weight: 700;

    margin-bottom: -20px;
}

.left-main{
    width: 95%;
    height: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.left-main-elements{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.left-main-element{
    display: flex;
    gap: 10px;
    
}

.left-footer{
    width: 95%;
    height: 30%;

    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: start;
}

.left-footer-email-message{
    display: flex;
    justify-content: space-between;

    font-size: 0.7em;
    font-weight: 700;
}

#left-footer-email-message-invalid{
    color: hsl(4, 100%, 67%);
    display: none;
}

.left-footer-email{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rounded{
    padding: 15px 10px 15px 10px;

    border-radius: 5px;
    border: none;
}

#inputMail{
    width: 94%;

    border: 1px solid lightgray;
    color: hsl(235, 18%, 26%);
}

#subscribeBtn{
    width: 100%;

    background-color: hsl(235, 18%, 26%);
    color: #fff;
    cursor: pointer;
}








.succes-container{
    width: 350px;
    height: 500px;

    background-color: hsl(0, 0%, 100%);

    border-radius: 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 0;
    margin: 0;
}

.succes-header{
    width: 80%;
    height: 25%;

    display: flex;
    justify-content: start;
    align-items: center;
}

.succes-main{
    width: 80%;
    height: 40%;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
}

.succes-footer{
    width: 80%;
    height: 35%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.succes-footer > div {
    width: 100%;
}

.succes-main-title{
    font-size: 3em;
    font-weight: 700;
}

.succes-main-p{
    font-size: 0.9em;
    font-weight: 400;
}

.succes-main-span{
    font-size: 0.9em;
    font-weight: 700;
}

#dismissBtn{
    width: 100%;

    background-color: hsl(235, 18%, 26%);
    color: #fff;
    cursor: pointer;
}

.right > div{
    width: 90%;
    height: 100%;
    min-height: 100%;

    background: url('/projects/frontendMentor/newsletter-sign-up-with-success-message-main/assets/images/illustration-sign-up-desktop.svg');
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 15px;
}

@media (max-width: 765px){
	.index-container{
		width: 100%;
        height: 100%;
		flex-direction: column;
	}

    .left{
		display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 95%;
        order: 2;
	}
    .left-header{    
        margin: 0;
    }

    .right > div {
        display: none;
    }
    .right {
        background: url('/projects/frontendMentor/newsletter-sign-up-with-success-message-main/assets/images/illustration-sign-up-mobile.svg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 50%;
        order: 1;

        border-radius: 0px 0px 15px 15px;
    }
}