@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;

}

body{
    background-image:url(./images/bg-pattern-desktop.svg);
    color: hsl(0, 36%, 70%);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size:16px;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100px 100%;
    width: 100vw;
    height: 100vh;
    gap: none;

}

.logo {
    width: 60vw; 
}


.logo img{
    padding: 50px 150px;
    margin-left:50px;
}

.left-content {
    padding: 70px 200px;
    width: 60vw;
    height: 80vh;
}

.left-content h1 {
    font-size: 64px;
    padding: 0 20px 0 0;
    font-weight:300;
    letter-spacing:10px;
}

.left-content .coming-soon{
    color:hsl(0, 6%, 24%);
    font-size: 64px;
    font-weight:400;
}

.left-content p {
    padding: 20px 50px 20px 0px;
    line-height:25px;
    margin-bottom:10px;
}


.left-content input {
    border-radius: 50px;
}

.form-container{
    position:relative;
    width:400px;
}


.left-content #email {
    padding: 15px 20px;
    width:100%;
    z-index:1;
    border: 1px solid hsl(0, 3%, 71%);
    position:relative;
    opacity:0.5;
    font-size:14px;
    outline:none;
}

.left-content .error-img{
    width:25px;
    position:absolute;
    right:25%;
    top:0;
    z-index:2;
    transform:translateY(50%);
}

.left-content .btn{
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    padding:15px 35px;
    color:white;
    font-size:17px;
    border:none;
    opacity:0.7;
    z-index:2;
    background-image: linear-gradient(to right ,hsl(0, 80%, 86%), hsl(0, 74%, 74%)); 
    box-shadow: 3px 3px 10px rgb(167, 163, 163);
}

.left-content .btn:hover{
    background-image: linear-gradient(to right ,hsl(0, 43%, 75%), hsl(0, 75%, 57%));
}

.left-content .btn:active{
    transform:translateX(10%);
}

#error-message {
  margin:0;
  padding:5px 0px 5px 20px; 
  color: red;
  font-size: 13px;
  margin-top: 0px;
}

.hidden {
  display: none;
}

.right-content {
    height: 100vh;
    width: 40vw;
    
    background-image: url("./images/hero-desktop.jpg");
    background-size: cover;
}


.attribution {
    font-size: 11px;
    text-align: center;
    display: none;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (max-width:560px) {
    .grid-container {
        grid-template-columns: auto;
        grid-template-rows: 100px 300px;
    }

    .logo {
        padding:0px;
        
    }

    .logo img{
    padding:0;
    padding-top:40px;
    margin-left:25px;
    width:110px;
    
}

    .right-content {
        width: 100vw;
        height: 30vh;
        background-image: url("./images/hero-mobile.jpg");
        background-size: cover;
        background-repeat: no-repeat;


    }

    .left-content {
        padding: 0;
       width:100vw;
       height:auto;
       display:flex;
       flex-direction:column;
       justify-content: center;
       align-items: center;
       text-align:center;  
    }

    .left-content h1 {
        font-size:50px;
        padding:0px;
    }

    .left-content .coming-soon{
        font-size:50px;
    }

    .left-content p {
        padding:20px 20px;
        
    }

    .left-content input {
        margin-top:20px;
    }

    .form-container{
        width:300px;
        margin-left:10px;
        margin-bottom:60px;
    }

.left-content #email {
    width:100%;
    margin-top:0px;
}

.left-content .btn{
    margin-top:0px;
}


#error-message {
  margin:0;
  padding:10px; 
  color: red;
  font-size: 13px;
  margin-top: 0px;
  margin-right:100px;
  margin-bottom:30px;
}


.left-content .error-img{
    right:30%;
    
}


}