/*
styling úvodní stránky
*/

@import "reset.css";

@import "theme.css";

*, html {
    scroll-behavior: smooth !important;
}



@media only screen and (min-width: 690px) {
#scroll{ 
    position: relative; 
    top: 0px; 
    display: none;
}}


p.post{
    padding-bottom: 0px;
}

a.title{
    font-size: 1.4rem;
}

.link-underline{
    color: var(--primary-color);
    padding: 0px 5px;
    border: 1px solid var(--secondary-color);
    border-radius: 0;
    background-color: transparent;
    margin: 2px 0 0 0;
    text-transform: none;
    text-decoration: underline;
}

.link-underline:hover{
    color: var(--secondary-color);
    padding: 0px 5px;
    border: var(--border);
    border-radius: var(--border-radius-link);
    background-color: var(--primary-color);
    margin: 2px 0 0 0;
    text-transform: none;
    text-decoration: none;
}


/* styling pro mobil*/
@media only screen and (max-width: 689px) {
    body{
        background-color: var(--primary-color);
        margin: 0px;
    }

    div.header{
        width: 100%;
        display: inline-flex;
        position: sticky;
        top:0px;
        z-index: 1000;
    }

    div.home{
        width: 100%;
        background-color: var(--secondary-color);
        padding: 20px 30px 20px 30px;
        font-size: 1.5rem;
        border: var(--border);
        border-radius: var(--border-radius);
        color: var(--primary-color);
    }
    
    div.fill{
        height: 74px;
        width: 100%;
        position: absolute;
        background: var(--primary-color);
        top: 0;
        z-index: -10;
    }

    div.main-page-content{
        /*height: calc(100lvh - 79px); */
        height: 100%;
       /* overflow: hidden;
        overflow-y: auto;*/
        border-radius: 30px 30px 0 0;
        scrollbar-width: auto;
    }

    div.info{
        z-index: 10;
        overflow-y: auto;
    }

    div.feed{
        width: 100%;
        z-index: 5;
    }
}   

/* styling pro počítač*/
@media screen and (min-width: 690px) {
    body{
        background-color: var(--primary-color);
        margin: 0px;
        overflow: hidden;
    }

    div.header{
        width: 100%;
        display: inline-flex;
        position: sticky;
        top:0px;
        z-index: 1000;
        
    }

    div.home{
        width: 100%;
        background-color: var(--secondary-color);
        padding: 20px 30px 20px 30px;
        font-size: 1.5rem;
        border: var(--border);
        border-radius: var(--border-radius);
        color: var(--primary-color);
        box-sizing: border-box;
    }

    div.main-page{
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    div.main-page-content{
        display: flex;
        overflow: hidden;
        height: calc(100vh - 74px);
    }

    div.info{
        width: 35%;
        z-index: 10;
        overflow-y: auto;
        height: 100%;
        scrollbar-width: none;
        border-radius: 30px 30px 0 0;
    }

    div.feed{
        width: 65%;
        scrollbar-width: none;
        z-index: 5;
        overflow-y: auto;
        height: 100%;
        border-radius: 30px 30px 0 0;
    }
}   

div.post{
    height: fit-content;
    background-color: var(--secondary-color);
    padding: 30px 30px;
    font-size: 1rem;
    border: var(--border);
    border-radius: var(--border-radius);
}

div.image__container{
    width: -webkit-fill-available;
    max-height: 500px;
    object-fit: cover;
    overflow: hidden;
    border: var(--border);
    border-radius: 17px;
    display: flex;
    flex-direction: column-reverse;
    align-content: center;
    justify-content: center;
}

img.post__feed{
    width: -webkit-fill-available;
    margin-bottom: -10px;
}

/* styling dropdownu*/
input#info{
    display: none;
}

input#carbon{
    display: none;
}

ul.accordion{
    padding-inline-start: 0;
    margin: 10px 0 0 0;
}

li.accordion{
    list-style: none;
}

.accordion input[type="checkbox"]:checked + label + .content {
    max-height: 1000px;
    transition: max-height 1s;
    overflow: visible;
}


.accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
}

svg.toggle{
    color: var(--primary-color);
    padding-left: 5px;

}