:root{
    --bg: #08070e;
    --txt: #ffdbf8;
    --extra: #FF68A2;
    --outline1: -1pt -1pt var(--bg), 1pt 1pt var(--bg),
               -1pt 1pt var(--bg), 1pt -1pt var(--bg),
               -1pt 0pt var(--bg), 1pt 0pt var(--bg),
               0pt 1pt var(--bg), 0pt -1pt var(--bg);
    --outline2: -1pt -1pt var(--txt), 1pt 1pt var(--txt),
               -1pt 1pt var(--txt), 1pt -1pt var(--txt),
               -1pt 0pt var(--txt), 1pt 0pt var(--txt),
               0pt 1pt var(--txt), 0pt -1pt var(--txt);
}

::selection{
    background: var(--extra);
    color: var(--bg);
    text-shadow: none;
}

@font-face {
    font-family: 'ShareTechMono';
    src: url('../font/ShareTechMono-Regular.ttf');
}

@font-face {
    font-family: 'Webfont';
    src: url('../font/webfont.ttf');
}

@font-face {
    font-family: 'HachiMaruPop';
    src: url('../font/HachiMaruPop-Regular.ttf');
}

body{
    background-image: url("../img/dark bg.png");
    color: var(--txt);
    font-family: 'ShareTechMono', monospace;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

a, a:visited{
    color: var(--extra);
    text-decoration: none;
    font-family: 'Webfont';
    font-size: 1.5em;
}

a:hover{
    text-shadow: var(--outline2);
}

a:active{
    font-style: italic;
}

main, nav, footer, header{
    background-color: var(--bg);
    width: 65em;
    padding: 1em;
    border-radius: 1em;
    border: 1pt solid var(--txt);
    margin: 1em;
}

main{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

nav, header, footer{
    text-align: center;
}

nav{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

nav a{
    padding: 0 5pt;
}

/*root index*/
#eng, #esp {
    display: none;  /* Hide both by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    border: 1px solid var(--txt);
    border-radius: 1em 10em;
    width: 30em;
    background-color: var(--bg);
}

#eng.active, #esp.active {
    display: flex;  /* Only show the active one */
}
#lang-toggle{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1em;
}

/* Directory */
.directory {
    max-width: 100%;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 1em 0;
}

.tag-btn {
    padding: 0.5em 1em;
    border: 1pt solid var(--txt);
    background-color: var(--bg);
    color: var(--txt);
    border-radius: 0.5em;
    cursor: pointer;
}

.tag-btn:hover {
    background-color: var(--extra);
    color: var(--bg);
}

.tag-btn.active {
    background-color: var(--extra);
    color: var(--bg);
}

.sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5em;
    margin-top: 2em;
}

.site-card {
    background-color: var(--bg);
    border: 1pt solid var(--txt);
    border-radius: 0.5em;
    padding: 1em;
}

.site-card h3 a {
    text-decoration: none;
    font-family: 'Webfont';
}

.site-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: 0.5em;
}

.site-card .tag {
    background-color: var(--extra);
    color: var(--bg);
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    font-size: 0.8em;
}

/* RSS Feed */
.rss-feed {
    margin-top: 2em;
    padding: 1em;
    border: 1pt solid var(--txt);
    border-radius: 2em 5em;
    width: 100%;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.rss-feed h2 {
    margin: 0 0 1em 0;
    color: var(--extra);
}

.rss-items {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.rss-item {
    padding: 0.5em;
    border-left: 3px solid var(--extra);
    padding-left: 1em;
}

.rss-item h3 a {
    color: var(--extra);
    text-decoration: none;
}

.rss-item h3 a:hover {
    text-decoration: underline;
}

.rss-date {
    font-size: 0.8em;
    color: var(--txt);
    opacity: 0.7;
    margin: 0 0 0.5em 0;
}

.rss-description {
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0;
}

.rss-link {
    display: inline-block;
    margin-top: 1em;
    color: var(--extra);
    text-decoration: none;
    font-weight: bold;
}

.rss-link:hover {
    text-decoration: underline;
}

button{
    background-color: var(--extra);
    color: var(--bg);
    border: none;
    padding: 0.5em 1em;
    margin: 0em 1em;
    cursor: pointer;
    font-family: 'HachiMaruPop';
    border-radius: 5em 1em;
}
button:hover{
    background-color: var(--txt);
}
footer{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
aside{
    text-align: center;
    background: var(--bg);
    width: 15em;
    padding: 1em;
    border-radius: 1em;
}

/*Links in about*/
.links{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.links img{
    width: 1.5em;
}

/*text in about*/
.info{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 80%;
}

#abt{
    text-align: right;
}

#like{
    text-align: left;
}

#wowo{
    float: left;
}

#likes{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.likes{
    overflow-y: scroll;
    height: 10em;
    width: 30%;
}

#sympath{
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 1em;
}

#sympath img{
    width: 1.75em;
}

#sympath p{
    text-align: center;
    grid-column: span 5;
}


/*toggle*/
.toggle-section {
    display: none;
}
.toggle-section.active {
    display: flex;
}
#toggle button.active {
    background-color: var(--extra);
    color: var(--bg);
}

.toggle-section {
    display: none;
}
.toggle-section.active {
    display: flex;
}

/*comms*/
#ex, #tos{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#tos ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#tos ul li{
    margin: 0.5em;
}

#tos li::before{
    content: '✦';
}


#last-updt{
    font-size: 0.8em;
    margin-top: 1em;
    text-align: center;
    text-shadow: var(--outline1);
}

.art-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
}
.gallery{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}
.gallery a img {
    width: 5em;
    height: 5em;
    object-fit: cover;
    border-radius: 0.5em;
    border: 1px solid var(--txt);
}

/*request*/
#req{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#req p{
    text-align: center;
}
#req h2{
    text-align: center;
}
#req h3{
    text-align: center;
}
#req ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#req ul li{
    margin: 0.5em;
}
#req li::before{
    content: '✦';
}
#req a{
    color: var(--extra);
    text-decoration: none;
    font-family: 'ShareTechMono';
    font-size: 1em;
}

#strawpage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 1200px;  /* You can adjust this value */
    margin: 0 auto;
    padding: 1em;
    box-sizing: border-box;
}

#strawpage iframe {
    width: 100%;
    min-height: 800px;  /* Increased height */
    border: 1px solid var(--txt);
    border-radius: 8px;
    background: var(--bg);
}

#strawpage #strawpage-button {
    margin: 1em 0;
    padding: 0.5em 1em;
    background: var(--bg);
    color: var(--txt);
    border: 1px solid var(--txt);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#strawpage #strawpage-button:hover {
    background: var(--extra);
    color: var(--bg);
    border-color: var(--extra);
}

/* Tippy.js Tooltip Styling */
.tippy-box[data-theme~='custom'] {
    background-color: var(--bg);
    color: var(--txt);
    border: 1px solid var(--extra);
    border-radius: 4px;
    font-family: 'ShareTechMono', monospace;
    font-size: 0.9em;
    padding: 0.5em 0.8em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--extra);
}

.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--extra);
}

.tippy-box[data-theme~='custom'] > .tippy-backdrop {
    background-color: var(--bg);
}

.tippy-box[data-theme~='custom'] > .tippy-svg-arrow {
    fill: var(--bg);
    stroke: var(--extra);
    stroke-width: 1px;
}
    

/*Media queries*/
@media (max-width: 1000px) {
    main, nav, footer, header{
        width: 90%;
    }
    .links{
        flex-direction: row;
        flex-wrap: wrap;
    }
    aside{
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .likes{
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    main{
        flex-direction: column;
    }
}