:root {

    --bg: #00292B;
    --gold: #D59D17;
    --text: #ffffff;
    --motto: #BFB8A2;

}

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

html{
    font-size:16px;
}

body{

    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);

}

.container{

    min-height:100vh;

    max-width:1400px;

    margin:auto;

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

    padding:80px 120px;

    gap:120px;

}

.left{

    display:flex;
    flex-direction:column;

    justify-content:center;

    flex:1;

}

.logo-placeholder{

    max-width:360px;

}

.logo-placeholder img{

    width:100%;
    height:auto;
    display:block;

}

/* keby ešte logo nebolo */

.logo-placeholder::before{

    content:"Hudák\A Ondrejka";

    white-space:pre;

    color:var(--gold);

    font-size:4.7rem;

    line-height:.95;

    font-weight:700;

    display:none;

}

.motto{

    margin-top:72px;

    color:var(--motto);

    font-size:1.2rem;

    font-weight:400;

}

.right{

    width:360px;

    display:flex;
    flex-direction:column;

    gap:52px;

}

.contact{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.contact h2{

    font-size:1rem;

    font-weight:700;

    color:#fff;

}

.contact a{

    color:var(--gold);

    text-decoration:none;

    font-size:1rem;

    font-weight:400;

    transition:.2s;

}

.contact a:hover{

    opacity:.75;

}
.contact p {
	font-size:0.7rem;
}
@media (max-width:1100px){

    .container{

        padding:60px;

        gap:80px;

    }

    .logo-placeholder{

        max-width:300px;

    }

   

}

@media (max-width:768px){

   .container{
        min-height:auto;          /* alebo úplne zruš */
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;

        padding:24px 32px 40px;
        gap:20px;
    }

    .right{
		padding-top: 60px;
        width:100%;

        gap:42px;

    }

    .logo-placeholder{

        max-width:260px;

    }

    .motto{

        margin-top:48px;


    }

}

@media (max-width:480px){

    html{

        font-size:14px;

    }

    

    .logo-placeholder{

        max-width:220px;

    }

    .motto{

        margin-top:36px;

    }
 .motto{

        font-size:1rem;

    }

    .contact h2{

        font-size:0.8rem;

    }

    .contact a{

        font-size:0.8rem;

    }
}