/* General */
* {margin: 0; padding: 0; font-family: 'Intro', sans-serif; box-sizing: border-box;}
*::-webkit-scrollbar {display: none;}

/* Body & Themes */
body {background: white; color: #1d2026; transition: 1s; touch-action: pan-y; overflow-x: hidden;}
.theme-light {background-color: white; color: #22252c;}
.theme-light .hero {background-color: #22252c;}
.theme-light .element {background-color: rgb(206, 206, 206);}
.theme-dark {background-color: #2e313b; color: white;}
.theme-dark .hero {background-color: #22252c;}
.theme-dark .element {background-color: #2e313b;}

/* Typography */
.big-txt {font-size: 3rem; margin: 0;}
.normal-txt {font-size: 2rem;}
.medium-txt {font-size: 1.6rem;}
.small-txt {font-size: 1.2rem;}
.subtitle {font-size: 1.5rem; padding: 10px 0; color: rgb(114, 114, 114);}
.subtitle>a, p {color: rgb(114, 114, 114);}
.weight {font-weight: 600;}

/* Animation */
.fade-in {opacity: 0; transform: translateY(10vh); transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.fade-in.in-page {opacity: 1; transform: translateY(0vh);}

/* Spaces */
.mt-40 {padding-top: 40px;}
.mb-10 {margin-bottom: 10%;}
.mtvh-50 {margin-top: 50vh;}
.p-10 {padding: 10px;}
.p-20 {padding: 20px;}
.p-30 {padding: 30px;}
.p-40 {padding: 40px;}
.txt-alignR{text-align: right}
.txt-alignC{text-align: center}
.txt-alignL{text-align: left}

/* Link & visibility */
a{text-decoration: none; color: #22252c; cursor: pointer;color: var(--link-color);}
.dnone {display: none;}
.navigator {visibility: hidden;position: fixed;display: flex;width: 100%;height: 60px; align-items: center; justify-content: space-around;background-color: #22252c;z-index: 1;bottom: 0;}
.navigator.active {visibility: visible;}

/* Hero & container */
.hero {position: fixed; background: #22252c; border-radius: 0 0 30px 30px; height: 50vh; width: 100%; color: #fff; transition: 1s; font-size: 28px; z-index: 1; top: 0;}
/* .hero {position: fixed; background: #22252c; border-radius: 0 0 30px 30px; height: 50vh; width: 100%; color: #fff; transition: 1s; font-size: 28px; z-index: 1; top: 0;} */
.hero nav {height: 120px; display: flex; align-items: center; padding: 0px 10%; justify-content: space-between;}
.hero nav .logo {cursor: pointer; width: 200px; object-fit: cover;}
.hero.scrolled {height: 120px;}

/* Header */
.header {height: auto; display: flex;}
.header div {display: flex; align-items: center; justify-content: center;}
.icon {width: 70px; min-width: 70px; height: 70px;}
.logo {width: 100%;}
.icon>img, .logo>img {width: 20px; cursor: pointer;}
.menu {width: 30px; height: 30px; cursor: pointer;}

/* Buttons */
button {background: #454958; height: 30px; width: 60px; border-radius: 20px; border: 0; outline: 0; cursor: pointer; transition: background 0.5s;}
button span {display: block; background: white; height: 26px; width: 26px; border-radius: 50%; margin-left: 2px; transition: background 0.5s, margin-left 0.5s;}
.active {background: white;}
.active span {background: #22252c; margin-left: 31px;}

/* Other container */
.text-container {width: 100%; display: flex; justify-content: center; flex-direction: column; padding: 0px 10%;}
.btnContact {background-color: #22252c; color: white; width: max-content; padding: 10px 40px; cursor: pointer; transition: 1s;}
.footer {padding: 2% 10%; margin-top: 25px;border-top: solid 1px #22252c;transition: .8s;}

/* Menu */
.container-menu{display: flex;}
.menu-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:10;display:none;}
.menu-overlay.active {display:block;}
.menuLeft {width:calc(300px + 10%);height:100%;position:fixed;top:0;left:0;transform: translateX(-107%);padding-left:10%;transition:transform 0.5s ease;background-color:white;z-index:11;}
.menuLeft-item{border-bottom:solid 1px rgb(222, 222, 222); height: 60px;display: flex; align-items: center; margin-right: 20px;}
.menuClose {cursor:pointer;width:100%;height:120px;display:flex;align-items:center;}
body.theme-dark .menuLeft {background-color:#22252c;}

/* Element & post */
.profile-pic {width: 100px; height: 100px;margin-bottom: 10px;}
.profile-pic-hero {width: 30px; height: 30px; border-radius: 15px;margin-left: 15px;cursor: pointer; display: none;}
.feed{margin-top: 50vh;  transition: 1s;display: flex; flex-direction: column; align-items: center;padding: 2%;}
.container-post {max-width: 800px; width: 100%; display: flex; justify-content: center;margin-top: 25px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2),  
    0px -4px 10px rgba(0, 0, 0, 0.2),  
    4px 0px 10px rgba(0, 0, 0, 0.2),  
    -4px 0px 10px rgba(0, 0, 0, 0.2);
}
.post{min-width: 50%;max-width: 50%;}
.post-user-img{display: flex;border-bottom: solid 1px;}
.post-user-img>a>img{aspect-ratio: 1/1;object-fit: cover;width: 60px;margin: 5px;border: solid 1px;}
.post-title {width: 100%; margin: 5px; height: 60px; display: flex;flex-direction: column;justify-content: space-around;}
.post-img {overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;}
.post-img img{width: 100%;height: 100%;}
.description {width: 100%; overflow-y: scroll;overflow-x: hidden;border-left: solid 1px;}
.post-desc {min-height: 60px; padding: 10px;overflow-y: scroll;}

/* PROFILE */
.profile-center{
    margin: 0px 10%;transition: 1s;
            display: flex; flex-direction: column;
            align-items: center;
    }
        .post-up{
            width: 100%;
            max-width: 800px;
            display: flex;
            padding: 5% 0;
            align-items: center;
        }
        .post-center{
            width: 100%;
            max-width: 800px;
            margin-bottom:  10%;
            flex-wrap: wrap;
            height: fit-content;
            display: flex;
        }
            .post-center .imgg{
                  min-width: calc(33.33% - 4px);
                margin: 2px;
                aspect-ratio : 1 / 1;
                cursor: pointer;
                border: solid 1px;
                background-size: cover;
                background-position: center;
                display: flex; flex-direction: column;
            }
/* PROFILE */

/* AD-BANNER
.container-feed{border: solid red;margin-top: 50vh;  transition: 1s;display: flex;justify-content: center;}
.feed{display: flex; flex-direction: column; align-items: center;padding: 2%;border: solid red;}
.ad-banner-left{border: solid blue; transition: 1s; display: flex;flex-direction: column;padding: 1%;}
.ad-banner-right{border: solid blue; transition: 1s; display: flex;flex-direction: column;padding: 1%;}
.ad-banner-center{border: solid blue; display: none;position: absolute;margin: 0 auto;}
.ad-banner-left img{margin-bottom: 30px;margin-top: 30px;}
.ad-banner-right img{margin-bottom: 30px;margin-top: 30px;}
@media (max-width: 1280px) {
    .ad-banner-left{display: none;}
    .ad-banner-right{display: none;}
}
AD-BANNER */

/* PROVA */
    .post-reaction{min-width: 375px;max-width: 100%;display: flex;justify-content: space-between;padding: 10px;}
    .post-reaction div{cursor: pointer;display: flex; align-items: center;justify-content: center;}
    .post-reaction div img{height: 30px;width: 30px;}
    .openDesc {display: none;padding: 0 10px 10px 10px;}
    .description .post-open-desc {
        display: none;
    }

/* PROVA */

/* Form */
.container-form{
    margin-top: 50vh; height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;
    transition: 1s;
}
.row-title{
    padding: 20px; display: flex; justify-content: center;
}
.row-col{
    display: flex; border-bottom:solid 1px rgb(222, 222, 222);
}
.row-col label{
    min-width: 50%; padding: 5px;
}
.row-col input{
    min-width: 50%;padding: 5px; border: solid 1px rgb(222, 222, 222);
}
.form-btn{
    padding: 10px;margin: 20px; width: max-content; height: max-content;
}

/* Media queries */

@media (max-width: 890px) 
{.big-txt {font-size: 2.4rem;} .normal-txt {font-size: 1.5rem;} .medium-txt {font-size: 1.3rem;} .subtitle {font-size: 1.3rem;}}
@media (min-width: 769px) {
    .openDesc {
        display: none !important;
    }
}
@media (max-width: 768px) 
{.big-txt {font-size: 2rem;} .subtitle {font-size: 1.2rem;} .normal-txt {font-size: 1.3rem;} .medium-txt {font-size: 1.1rem;} .post-desc {display: none;} .hero nav button {display: none;} .navigator {visibility: visible;} .menuLeft{width: 100%;}.post{width: 100%;}.hero nav .logo{width: 150px;}
    .container-post{
        display: flex; flex-direction: column; align-items: center;
    }
    .post{
        padding: 0; margin: 0;min-width: 100%;
    }
    .post-img{margin: 0;padding: 0;}
    .description{max-width: 100%;margin: 0;display: flex;flex-direction: column;border: none;}
    .description .post-open-desc {
        display: block;
    }
    .post-reaction{
        min-width: 100%;
    }
}
@media (prefers-color-scheme: theme-dark) {
    a {
        color: black;
    }
}