@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700&display=swap');

*{
    box-sizing: border-box;
    font-family: 'Mulish',sans-serif;
}

body{
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    background-image: url('https://images.unsplash.com/photo-1486520299386-6d106b22014b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.container{
    padding: 1.5rem 2rem 1rem;
    max-width: 1100px;
    max-height: 600px;
    margin: auto;
    backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.363);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.877);
    .navbar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo{
            font-size: 2rem;
            letter-spacing: 1px;
            font-style: italic;
        }
        .nav-links{
            display: flex;
            list-style-type: none;
            li{
                a{
                    text-decoration: none;
                    font-weight: 500;
                    margin: 0 1.25rem;
                    font-size: 1.05rem;
                    color: rgba(255, 255, 255, 0.877);
                }
            }
        }
    }
    .main{
        display: flex;
        align-items: center;
        .main-text{
            flex: 2;
            h1{
                font-size: 2.75rem;
                margin-bottom: 0;
                font-family: 800;
                line-height: 1.3;
            }
            p{
                opacity: 0.8;
                line-height: 1.3;
                font-weight: 500;
            }
    
            button{
                background-color: #125E9F;
                border: none;
                outline: none;
                border: 2px solid rgba(255, 255, 255, 0.349);
                padding: 0.7rem 2rem;
                border-radius: 5px;
                color: rgba(255, 255, 255, 0.788);
                cursor: pointer;
                margin-top: 0.75rem;
                transition: 0.2s ease all;
                &:hover{
                    border: 2px solid rgba(255, 255, 255, 0.349);
                    color: #125E9F;
                    font-weight: 700;
                    background-color: rgba(255, 255, 255, 0.788);
                }
            }
        }
        .main-img{
            flex: 3;
            display: flex;
            justify-content: flex-end;
            img{
                width: 80%;
            }
        }
    }
}

@media(max-width: 700px){
    body{
        padding: 2rem;
    }
    .container{
          max-height: 100%;
        .navbar{
            flex-direction: column;
            .logo{
                font-size: 2rem;
            }
            .nav-links{
                li{
                    a{
                        margin: 0 1.5rem;
                    }
                }
            }
        }
        .main{
            text-align: center;
            flex-direction: column;
            .main-text{
                order: 2;
                h1{
                    font-size: 2.75rem;
                }      
            }
            .main-img{
                justify-content: center;
                img{
                    width: 80%;
                }
            }
        }
    }
}