@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype');
    
}
@font-face {
    font-family: 'Rubik-Italic';
    src: url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');

}

/* Tablet: 768px and up */
@media (768px <= width <= 1024px) {
  
}
/* Desktop: 1024px and up */
@media (width > 1024px) {
  
}

:root{
    font-family:'Rubik', sans-serif;

    /* colors */
    --off-black: #222222;

    --white:#f6f6f6;
    --off-white:#f1efef;
    --black:#323232;
    --light-gray:#c9c9c9;
    --gray:#969696;
    --dark-gray:#666666;
    --yellow:#FFEE00;
    --yellow-press:#d3c613;

    --orange:#e9e0c6;
    --orange2:#fadc82;
    --blue:#d5deef;
    --blue2:#789fe7;
    --green:#cce7d8;
    --green2:#7fd4a7;
    --red:#eddee2;
    --red2:#df9aac;
    --purple:#e3d6e9;
    --purple2:#c493db;

    /* bg gradient colors */

    --right-red:#f1ced4;
    --left-blue:#cccff1;
    --mid-purp:#e8d8f4;


    /* rem units */
    --1px: 0.063rem;
    --1-5px: 0.09375rem;
    --2px: .125rem;
    --7px:0.438rem;
    --14px: 0.875rem;
    --20px: 1.25rem;
    --25px: 1.56rem;
    --50px: 3.125rem;
    --999px: 50rem;

}

body{
    background: linear-gradient(270deg, var(--right-red),var(--left-blue), var(--mid-purp));
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    color: var(--black);
    /* padding: 1.5rem; */
}

@keyframes gradientShift {
    0%{ 
        background-position: 0% 50%; 
    }
    50%{ 
        background-position: 100% 50%; 
    }
    100%{ 
        background-position: 0% 50%; 
    }
}

h1{
    margin-block:3rem 2rem;
    text-align:center;
    font-size:2.5rem;
    text-transform: uppercase;
    font-weight:800;
    letter-spacing:.1em;
    line-height: 2.25rem;
    color:var(--off-black);
}

h1 span{
    color:transparent;
    -webkit-text-stroke: var(--2px) var(--off-black);
}
@media (768px <= width <= 1024px) {
    h1{
        font-size:4rem;
        line-height: 3.75rem;
        letter-spacing:.2em;
    }
}
@media (width > 1024px) {
    h1{
        font-size:4rem;
        line-height: 3.75rem;
        letter-spacing:.2em;
    }
}


/* INFO MODAL STYLING */


#info-btn {
    display:block;
    margin:0 auto;
    position: relative;
    justify-content:center;
    padding:.4rem;
    border-radius: var(--999px);
    border: var(--1px) solid var(--gray);
    background: var(--yellow);
    font-weight: 700;
    cursor: pointer;
    z-index: 800;
}

#info-btn:hover {
    background: var(--yellow-press);
    border: var(--1px) solid var(--dark-gray);
}

#info-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-block-start: 2rem;
    padding-inline: 1rem;
    z-index: 950;
}

@media (768px <= width <= 1024px) {
    #info-modal {
        padding-block-start: 10rem;
    }
}

@media (width > 1024px) {
    #info-modal {
        padding-block-start: 10rem;
    }

}

#info-modal[hidden] {
    display: none;
}

#info-modal .modal-content {
    position: relative;
    
    width: min(40rem, 90vw);
    background: var(--black);
    color:var(--white);
    border: var(--1px) solid var(--dark-gray);
    border-radius: var(--25px);
    padding: 2rem;
}

#info-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: .75rem;
    padding: .25rem .5rem;
    border: var(--1px) solid var(--white);
    border-radius: var(--7px);
}

#info-modal-close:hover {
    background: var(--off-black);
    cursor: pointer;
}

.info-title{
    text-align:center;
    margin-block-start:2rem;
    font-size:1.5rem;
}
.info-desc{
    text-align:left;
    font-weight:350;
    margin-block:1rem;
    line-height:1.2rem;
    letter-spacing:.05ch;
    font-size:.85rem;
}
@media (768px <= width <= 1024px) {
    .info-desc{
        font-size: 1rem;
        line-height:1.5rem;
    }
}

@media (width > 1024px) {
    .info-desc{
        font-size: 1rem;
        line-height:1.5rem;
    }

}






/* TOPIC FILTERS STYLING */


#topic-filters {
    justify-content:center;
    display: flex;
    flex-wrap:wrap;
    gap: .5rem;
    max-width: 40rem;
    margin: 2rem auto;
    padding-inline: 5%;
}

@media (768px <= width <= 1024px) {
    #topic-filters {
        padding-inline: 0;
    }
}
@media (width > 1024px) {
    #topic-filters {
        padding-inline: 0;
    }
}

.filter-btn {
    padding: .4rem .9rem;
    border: var(--1px) solid var(--gray);
    border-radius: var(--999px);
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    font-family: 'Rubik', sans-serif;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .03em;
    transition: background 0.15s, border-color 0.15s;
}

.filter-btn:hover {
    border-color: var(--black);
}

.filter-btn.active {
    border-color: var(--off-black);
    border-width: var(--1-5px);
    font-weight: 700;
}

.filter-btn[data-filter="All"]{
    background-color: var(--off-white);
    border-color: var(--dark-gray);
}
.filter-btn[data-filter="All"]:hover{
    background-color: var(--light-gray);
    border-color: var(--dark-gray);
}
.filter-btn[data-filter="Economy"]{
    background-color: var(--orange);
}
.filter-btn[data-filter="Economy"]:hover{
    background-color: var(--orange2);
}
.filter-btn[data-filter="Immigration"]{
    background-color: var(--blue);
}
.filter-btn[data-filter="Immigration"]:hover{
    background-color: var(--blue2);
}
.filter-btn[data-filter="Elections"]{
    background-color: var(--green);
}
.filter-btn[data-filter="Elections"]:hover{
    background-color: var(--green2);
}
.filter-btn[data-filter="Healthcare"]{
    background-color: var(--red);
}
.filter-btn[data-filter="Healthcare"]:hover{
    background-color: var(--red2);
}
.filter-btn[data-filter="Constitutional"]{
    background-color: var(--purple);
}
.filter-btn[data-filter="Constitutional"]:hover{
    background-color: var(--purple2);
}




/* ALL HOME POSTS */
#data-list{
    max-width: 40rem;
    margin: 0 auto;
}





/* reg post */
#data-list li{
    padding:1rem;
    margin: 0 auto;
    border: var(--1px) solid var(--gray);
    border-radius:var(--20px);
    width:90%;
    margin-block-end:1rem;
    background:var(--white);
}
@media (768px <= width <= 1024px) {
    #data-list li{
        width:40rem;
    }
}
@media (width > 1024px) {
    #data-list li{
        width:40rem;
    }
}
#data-list li:last-child {
    /* border-block-end:none; */
}

#data-list li:hover{
    box-shadow: var(--1px) var(--1px) 10px rgba(0, 0, 0, 0.3);
    /* border: var(--1-5px) solid var(--dark-gray); */
}

.profile-header{
    
    display:flex;
    border: none;
}

.initials{
    width: 2.5rem;
    height: 2.5rem;
    margin:.25rem;
    border-radius:var(--999px);
    border: none;
    text-align:center;
    align-content:center;
    font-size:.9rem;
    font-weight:500;
    color:var(--white);
    background:var(--off-black);
}

.profile-meta{
    display:flex;
    flex-direction: column;
    margin-inline-start:.75rem;
    margin-block:.4rem .75rem;
    gap:.05rem;
}

.handle-sect{
    display:flex;
    flex-direction:row;
    
    gap:.5rem;
    color:var(--dark-gray);
    font-size:.85rem;
}

.acc-name{
    font-size:.95rem;
    font-weight:600;
    margin-block-end:.15rem;
}



.post-body{
    /* margin-block:.25rem; */
    margin-inline-start:3.75rem;
    
    font-weight:400;
    letter-spacing:.02ch;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.2);
    mask-image: linear-gradient(to bottom, black, transparent);
    
}


.post-stats{
    display:flex;
    flex-direction:row;
    margin-block-start:1rem;
    margin-block-end:.25rem;
    margin-inline-start:4rem;
    font-size:.8rem;
    gap:1rem;
    color: var(--dark-gray);
}




.term-link{
    background:var(--yellow);
    cursor:pointer;
    padding:.2rem .15rem;
    border:var(--1px) solid #222222;
    border-radius:var(--7px);
    text-align:center;
    width: fit-content;
    white-space: nowrap;
}

.term-link:hover{
    font-family: 'Rubik-Italic';
    font-weight:500;
    background:var(--yellow-press);
}




.tweet-card {
    cursor:default;

}
.tweet-card:hover {

    cursor:pointer;
    
}

.stat{
    display:flex;
    align-items:center;
    gap:.4rem;
}

.icon{
    width:1rem;
    height:1rem;
    display:block;
    /* margin-inline-end:.5rem;
    margin-block-start:.5rem; */
}


#term-back.hidden{
    display:none;
}





/* POST MODAL STYLES */


#post-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
    align-items: flex-start;
	padding-block-start: 2rem;
	padding-inline: 1rem;
	padding-block-end: 1rem;
	justify-content: center;
    /* 16px - 1rem */
	/* padding: 1rem; */
	z-index: 900;
    cursor:default;

    
}


@media (768px <= width <= 1024px) {
    #post-modal {
        padding-block-start: 10rem;
    }
}

@media (width > 1024px) {
    #post-modal {
        padding-block-start: 10rem;
    }

}




/* Hidden state support */
#post-modal[hidden] {
	display: none;
}


#post-modal .modal-content {
	
    position:relative;
    width: min(40rem, 90vw);
	background: var(--white);
	border: var(--1px) solid var(--dark-gray);
	border-radius: var(--25px);
	padding: 1.5rem;
    font-size: .85rem;
    line-height: 1.2rem;

}

@media (768px <= width <= 1024px) {
    #post-modal .modal-content{
        font-size: 1rem;
        line-height:1.5rem;
    }
}

@media (width > 1024px) {
    #post-modal .modal-content{
        font-size: 1rem;
        line-height:1.5rem;
    }

}

#post-modal .modal-content .post-body{
    backdrop-filter: blur(0px);
    background: var(--white);
    mask-image: linear-gradient(to bottom, black, black);
    font-size: .85rem;
    line-height: 1.2rem;

}

@media (768px <= width <= 1024px) {
    .post-body{
        font-size: 1rem;
        line-height:1.5rem;
    }
}

@media (width > 1024px) {
    .post-body{
        font-size: 1rem;
        line-height:1.5rem;
    }

}


#post-modal-close{
    position:absolute;
    top:1rem;
    right:1.5rem;
    font-size:.75rem;
    padding:.25rem .5rem;
    border:var(--1px) solid #222222;
    border-radius:var(--7px);
}
#post-modal-close:hover{
    background:var(--gray);
    cursor:pointer;
}

hr{
    margin-block:2rem 1rem;
    border: none;
    border-top: var(--2px) dashed var(--gray);

}



/* INLINE TERM STYLES */

#inline-term-panel{
    padding-inline:.5rem;
}

#inline-term-close{
   position:absolute;
   right:2rem;
    

}

#inline-term-close:hover{
   
   cursor:pointer; 

}

#inline-term-name{
    font-weight:500;
    font-size:1.2rem;
    margin-block-start:.1rem;
    max-width:fit-content;
    flex: 1;
}

#inline-term-topic{
    padding:.25rem .5rem;
    margin-inline-start:1rem;
    font-size:.9rem;
    border-radius:var(--7px);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

.topic-tag-economy{
    background:var(--orange);
}
.topic-tag-immigration{
    background:var(--blue);
}
.topic-tag-elections{
    background:var(--green);
}
.topic-tag-healthcare{
    background:var(--red);
}
.topic-tag-constitutional{
    background:var(--purple);
}

#inline-term-definition{
    font-size: .85rem;
    line-height: 1.2rem;
}
@media (768px <= width <= 1024px) {
    #inline-term-definition{
        font-size: 1rem;
        line-height:1.5rem;
    }
}

@media (width > 1024px) {
    #inline-term-definition{
        font-size: 1rem;
        line-height:1.5rem;
    }

}

#inline-term-related{
    margin-block-end:.5rem;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:.5rem;
    font-size: .85rem;

}
@media (768px <= width <= 1024px) {
    #inline-term-related{
        font-size: 1rem;
    }
}

@media (width > 1024px) {
    #inline-term-related{
        font-size: 1rem;
    }

}
#inline-term-related li{
    width: fit-content;
}

#term-back{
    position:absolute;
    right:3.75rem;
    

    
}
#term-back:hover{
    cursor:pointer;
}



.term-header{
    display:flex;
    flex-direction:row;
    align-items: flex-start;
    margin-block:1.5rem 1rem;
    gap:.75rem;
    padding-inline-end:4rem;
}




h3{
    font-style: italic;
    color:var(--dark-gray);
    font-weight: 500;
    margin-block:1rem .5rem;
}




.term-panel-anchor {
    position: fixed;
    top: var(--term-panel-top);
    left: 50%;
    transform: translateX(-50%);
    width: min(40rem, calc(100vw - 2rem));
    margin-block-end: 0;
    overflow: auto;
}