:root{
    --green: #54E6AF;
    --brightgreen:#B3FFE2;
    --light-gray:#C2CBE5;
    --gray: #5a668a;
    --darkgray: #2C344B;
    --black: #121725;
    --red: #FB3E3E;

    --small-p: 0.77778rem;
    --header-size:2.88889rem;

    font-size:18px;
    font-family: "Chivo", sans-serif;
    font-optical-sizing: auto;
}

body{
    margin:0;
    height:100vh;

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

    background-color:var(--black);
}

input:focus{
    outline:0;
}

h1, p{
    margin: 0;
}

.mainContainer{
    /*width: 70.83333rem;
    height: 35.55556rem;*/
    width:1275px;
    height:640px;

    display:flex;
    align-items:flex-end;
    position:relative;
}

.bgImgContainer{
    position:absolute;
        right:0;
    z-index:-1;
    height: 100%;
}

/*.bgImgContainer__img{
    object-fit:fill;
    height:100%;
    width:49.33333rem;
}*/

.logo{
    position:absolute;
        left:0;
        top:-1.55556rem;
}

.mainContent{
    /*width:40.16667rem;
    height:28.27778rem;*/
    width:723px;
    height:509px;
    box-sizing:border-box;
    padding: 88px 58px 0 0;
    
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background-color:var(--black);
}

.productInfo__header{
    margin-bottom:24px;

    color:var(--green);
    font-size:var(--header-size);
    font-weight:100;
    line-height:3.44444rem;
}

.productInfo__span{
    color:white;
}

.productInfo__desc{
    color:var(--light-gray);
    font-weight:100;
    line-height:1.55556rem;
    width:24.72222rem;
}

.registration{
    width: 23.72222rem;
    height: 3.11111rem;
    box-sizing:border-box;
    padding:5px 5px 5px 32px;

    display:flex;
    position:relative;
    border-radius:28px;
    background-color:var(--darkgray);
}

.registration__input{
    flex-grow:6;
    background:none;
    border:none;
    color:white;
    font:inherit;
    font-weight:600;
    font-size:var(--small-p);
}

.registration__input::placeholder{
    color:var(--light-gray);
}


.registration__btn{
    flex-grow:4;

    border-radius:28px;
    background-color:var(--green);
    color:var(--black);
    border:none;
    font:inherit;
    font-size:var(--small-p);
    font-weight:600;
}

.registration__btn:hover{
    background-color:var(--brightgreen);
    cursor:pointer;
}

.emailErrorText{
    font-size:0.66667rem;
    color:var(--red);
    position:absolute;
        bottom:-18px;
    
    display:none;
}

.platformIconContainer{

    width:29.77778rem;
    margin-top:24px;

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

.platformIcon{
    height:1.61111rem;
}

.platformIconGoogle{
    height:1rem;
}

.platformIconPocketCasts{
    height:1.44444rem;
}

.dotGrid{
    position:absolute;
        right:0;
        bottom:-2.88888rem;

}

.mobile{
    display:none;
}

@media(max-width:1249px){
    body{
        display:block;
    }

    .logo{
        top:2.77778rem;
        left:2.16667rem;
    }

    .mainContainer{
        height:767px;
        width:100%;
    }

    .mainContent{
        padding-left:39px;
    }

    .productInfo__header{
        font-size:2.66667rem;
        line-height:3.11111rem;
    }

    .dotGrid{
        bottom:-130px;
        left:30px;
    }
}

@media(max-width:451px){
    .desktop{
        display:none;
    }

    .mobile{
        display:block
    }

    body{
        display:flex;
        justify-content:center;
    }

    .mainContainer{
        width:375px;
        height:100vh;
    }

    .bgImgContainer{
        display:flex;
        align-items:center;

    }

    .bgImgContainer__img{
        object-fit:fill;
        height:667px;
        width:375px;
    }

    .mainContent{
        width:100%;
        height:100vh;
        padding:0 24px;

        text-align:center;
        justify-content:flex-start;
        align-items:center;
        background-color:hsla(224, 35%, 11%, 0.9);
    }
    
    .logo-m{
        margin: 62px 0 57px 0;
        width:135px;
        height:56px;
    }

    .productInfo__header{
        font-size:1.44444rem;
        line-height:2.11111rem;
        width:100%;

        margin-bottom:16px;
    }

    .productInfo__desc{
        font-size:0.83333rem;
        line-height:1.38889rem;
        width:100%;
    }

    .registration{
        width:100%;
        height:6rem;
        padding:0;
        margin-top:48px;

        flex-direction:column;
        gap:16px;
        background:none;
    }

    .registration__input{
        flex-grow:1;
        padding:0.5rem 0 0.5rem 32px;

        background-color:var(--darkgray);
        border-radius:28px;
    }

    .registration__btn{
        flex-grow:1;
        padding:0.5rem 0;
    
    }

    .emailErrorText{
            left:32px;
    }

    .platformIconContainer{
        width:100%;
        margin-top:33px;
        height:1rem;
    }
    
    .platformIcon{
        height:1rem;
    }
    
    .platformIconGoogle{
        height:0.61111rem;
    }
    
    .platformIconPocketCasts{
        height:0.83333rem;
    }
}