@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
/*l-mode*/
:root {
    --bg: white;
    --blc: black;
    --if-brdr: none;
    --img-filter-ob: none;
}
/*d-mode*/
.dark-mode {
    --bg: #1e1e1e;
    --blc: white;
    --if-brdr: white;
    --img-filter-ob: invert(1);
}
*{
    font-family: Inconsolata;
    color: var(--blc);
}
html{
    scroll-behavior: smooth;
}
html, body {
    overflow-x: hidden;
}
body{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    background-color: var(--bg);
}
.body2{
    width: 100vw;
}
/*o mně*/
.vrch{
    margin: 10px;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*hlavní nadpis*/
h1{
    font-size: 3rem;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.vrch img{
    border-radius: 10px;
    width: 70%;
    filter: saturate(0%);
}
.vrch img:hover{
    filter: saturate(1);
    transition: all 0.2s ease-in-out;
}
.vrch ul{
    padding-left: 25px;
}
/*koníčky*/
.konicky{
    margin: 10px;
    margin-top: 0px;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.konickyh2{
    margin-top: 100px;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 2rem;
}
.konicky img{
    width: 70%;
    border-radius: 10px;
    filter: saturate(0%);
}
.konicky img:hover{
    filter: saturate(1);
    transition: all 0.2s ease-in-out;
}
/*Hudba*/
.hudba{
    margin: 10px;
    margin-top: 0px;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*nadpisy playlistů*/
.hudba h3{
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight:300;
}
.hudba iframe{
    border-radius:10px;
    width: 100%;
    height: 152px;
    filter: saturate(0%);
    border: 2px solid var(--if-brdr);
}
.hudba iframe:hover{
    filter: saturate(1);
    transition: all 0.2s ease-in-out;
}
.hudba > div{
    width: 100%;
}
/*nadpis vpravo*/
.hdoleva{
    display: flex;
    flex-direction: column;
    align-items: end;
}
/*nadpis vlevo*/
.hdoprava{
    display: flex;
    flex-direction: column;
    align-items: start;
}
/*nezobrazení kolečka s čárkou*/
.hudba img{
    display: none;
    filter: var(--img-filter-ob);
}
/*pro pc*/
@media (orientation: landscape) and (min-width: 1000px) {
    body{
        display: flex;
    }
    
    .body2{
        width: 80vw;
        margin-left: 20vw;
    }
    /*o mně*/
    .vrch{
        flex-direction: row-reverse;
        margin: 20px 20px 20px 40px;
        width: calc(100% - 60px);
    }
    .vrch img{
        width: 30%;
        border-radius: 70px;
    }
    .vrch li{
        padding: 10px 0px;
        font-size: 1.2rem;
    }
    .vrch ul{
        padding-left: 50px;
    }
    /*koníčky*/
    .konicky{
        flex-direction: row;
        margin: 20px 40px 20px 30px;
        width: calc(100% - 70px);
    }
    .konicky img{
        width: 30%;
        border-radius: 70px;
    }
    .konicky li{
        padding: 10px 0px;
        font-size: 1.2rem;
    }
    .konicky ul{
        padding-right: 40px;
    }
    /*hlavní nadpis*/
    h1{
        font-size: 5rem;
    }
    /*nadpís pro koníčky*/
    .konickyh2{
        font-size: 4rem;
        font-weight: 500;
    }
    /*zobrazení kolečka s čárkou na pc*/
    .hudba img{
        display: block;
        width: 7%;
    }
    /*nadpis vlevo*/
    .hdoprava{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
    }
    /*nadpis vpravo*/
    .hdoleva{
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
    }
    /*hudba*/
    .hudba iframe{
        width: 56%;
    }
    .hudba h3{
        margin: 0px;
        font-size: 2.6rem;
    }
    .hdoprava img{
        margin-left: 30px ;
        margin-right: 15px ;
    }
    .hdoleva img{
        rotate: 180deg;
        margin-left: 15px ;
        margin-right: 30px ;
    }
    .hudbah2{
        margin-bottom: 60px;
    }
}