/*
Theme Name: Kuba Żeligowski
Author: Marcin Kowol
Description: Motyw portfolio oparty na Timber.
Version: 0.1.0
*/

@font-face {
    font-family: "Oswald";
    src: url("fonts/Oswald.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: "Caveat";
    src: url("fonts/Caveat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "CaveatB";
    src: url("fonts/Caveat-Bold.woff2") format("woff2");
    font-weight: 400;
    font-style: bold;
}

body {
    background-color: black;
}

/* Burger menu is hidden on desktop by default. */
.menu-toggle {
    display: none;
}

@media (orientation: portrait) {

    .home {
        position: relative;
        width: 100%;
        aspect-ratio: 768 / 1554;

        container-type: inline-size;

        background-image: url("images/tlo02.webp");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: top center;
    }
/*
    .home-title {
        font-size: 11.5cqw;
        position: absolute;
        top: 1.5%;
        left: 5%;
        font-family: "Oswald", sans-serif;
        font-weight: 700;
        color: white;
        text-decoration: none;
    }
*/
.home-title {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90cqw;
    z-index: 10;
}

.home-title img {
    display: block;
    width: 100%;
    height: auto;
}
    .home-menu a {
        font-family: "Caveat", cursive;
        text-decoration: none;
        color: rgba(255,255,255,0.7);
        filter: alpha(opacity=70);
    }
    .home-menu {
        position: absolute;
        inset: 0;
    }
    .menu-painting {
        font-size: 7cqw;
        position: absolute;
        top: 32%;
        left: 2%;
    }
    .menu-sculpture {
        font-size: 7cqw;
        position: absolute;
        top: 50%;
        left: 2%;
    }
    .menu-photography {
        font-size: 7cqw;
        position: absolute;
        top: 70%;
        left: 2%;
    }
    .menu-about {
        font-size: 10cqw;
        position: absolute;
        top: 91%;
        left: 51%;
    }
    .menu-news {
        font-size: 9cqw;
        position: absolute;
        top: 55%;
        left: 35%;
    }
    .menu-available {
        font-size: 7.5cqw;
        position: absolute;
        top: 15%;
        left: 74%;
    }
    .home-menu .menu-phone {
        color: black;
        font-size: 5cqw;
        position: absolute;
        top: 13%;
        left: 13%;
    }
    .home-menu .menu-email {
        color: black;
        font-size: 5cqw;
        position: absolute;
        top: 16%;
        left: 13%;
    }
}

@media (orientation: landscape) {

    .home {
        position: relative;
        aspect-ratio: 1920 / 1080;
        width: auto;

        container-type: inline-size;
        background-image: url("images/tlo08.webp");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: top center;
    }
    .home-title {
        position: absolute;
        top: 4%;
        left: 23%;
        width: 48cqw;
        z-index: 10;
    }
    .home-title img {
        display: block;
        width: 100%;
        height: auto;
    }
    .home-menu a {
        font-family: "Caveat", cursive;
        text-decoration: none;
        color: rgba(255,255,255,0.7);
        filter: alpha(opacity=70);
    }
    .home-menu {
        position: absolute;
        inset: 0;
    }
    .menu-painting {
        font-size: 6cqw;
        position: absolute;
        top: 30%;
        left: 11%;
    }
    .menu-sculpture {
        font-size: 6cqw;
        position: absolute;
        top: 46%;
        left: 15%;
    }
    .menu-photography {
        font-size: 6cqw;
        position: absolute;
        top: 62%;
        left: 12.5%;
    }
    .menu-about {
        font-size: 7cqw;
        position: absolute;
        top: 84%;
        left: 21%;
    }
    .menu-news {
        font-size: 6cqw;
        position: absolute;
        top: 43%;
        left: 53.5%;
    }
    .menu-available {
        font-size: 4.5cqw;
        position: absolute;
        top: 74%;
        left: 73.5%;
        width: 20cqw;
    }
    .home-menu .menu-phone {
        color: black;
        font-size: 2cqw;
        position: absolute;
        top: 2%;
        left: 1%;
    }
    .home-menu .menu-email {
        color: black;
        font-size: 2cqw;
        position: absolute;
        top: 6%;
        left: 1%;
    }
    .page-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
    }
    .page-menu ul li {
        float: left;
    }
    .page-menu ul li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    .page-menu ul li a:hover {
        background-color: #111111;
    }
    .work img {
        width: 400px;
    }
}

/* =========================
   O MNIE
   ========================= */

.page-about {
    color: white;
    margin: 10px 30px 50px 30px;
}

/* =========================
   AKTUALNOŚCI
   ========================= */

.page-news {
    color: white;
    margin: 10px 30px 50px 30px;
}

/* =========================
   MALARSTWO
   ========================= */

.page-paintings {
    color: white;
    margin: 10px 30px 50px 30px;
}

/* =========================
   RZEŹBA
   ========================= */

.page-sculpture {
    color: white;
    margin: 10px 30px 50px 30px;
}

/* =========================
   FOTOGRAFIA
   ========================= */

.page-photography {
    color: white;
    margin: 10px 30px 50px 30px;
}

/* =========================
   PRACE DOSTEPNE
   ========================= */

.page-works-avaliable {
    color: white;
    margin: 10px 30px 50px 30px;
}

.work img {
    height: auto;
    border: 5px solid white;
}

@media (orientation: portrait) {

    .work img {
        width: 80vw;
    }
    .work-technique {
        text-align: right;
    }
    .work-dimensions {
        text-align: right;
    }
    .work-year {
        text-align: right;
    }
}

@media (max-width: 700px) {

    .menu-toggle {
        display: block;
        font-size: 3em;
    }

    .page-menu ul {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
    }

    .page-menu.open ul {
        display: block;
    }

    .page-menu ul li {
        float: none;
    }

    .page-menu ul li a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .page-menu ul li a:hover {
        background-color: #111111;
    }

}



@media (orientation: landscape) and (min-width: 1201px) {

    .home {
        width: 1200px;
        margin-inline: auto;
    }

}