/*
    Hi! This is the stylesheet for catwraith.neocities.org.
    Feel free to use anything found here for your own
    projects, or clone this stylesheet and edit it!

    Much love, friendos! <3

    - Catwraith
*/

@font-face {
    font-family: 'Jura';
    src: url('/fonts/Jura-VariableFont_wght.woff2')' format(.woff2)';
    font-display: swap;
}

:root {
    /* Change these values to adjust the main container's dimensions */
    --site-width: 720px;
    --site-height: 720px;

    --font: 'Jura', sans-serif;

    --bg-main: #000; /* The color used around the main container */
    --bg-column: #121212; /* The default background color for the columns */
    --stroke: #5a4f6a; /* Border color */
    --text: #5a4f6a;
    --link: #7a6f9b;
    --link-underline: rgba(122, 111, 155, 0.4);
    --link-hover: #b7a7e0;
    --link-active: #d5c9ff;
}

html, body {
    background-color: var(--bg-main);
    font-family: var(--font);
}

p, h1, h2, h3, h4, h5, h6 {
    color: var(--text);
}

a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dotted var(--link-underline);
}

a:hover {
    color: --(--link-hover);
}

a:active {
    color: var(--link-active);
}

.three-dots{
    border: 0;
    margin: 2rem 0;
    display: grid;
    place-items: center;
  }
  
  .three-dots::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--text);
    box-shadow:
      -24px 0 0 var(--text),
       24px 0 0 var(--text);
  }
  

.site {
    display: grid;
    place-items: center;
    height: 90vh;
}

.main-container {
    width: var(--site-width);
    height: var(--site-height);
    display: flex;
    flex-direction: row;
    border: 2px solid var(--stroke);
    border-radius: 10px;
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
}

.column {
    width: 50%;
    height: 100%;
    background-color: var(--bg-column);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
}

#column-left {
    border-right: 2px solid var(--stroke);
}

#column-right {
    background: url('/img/col-right-bg.png');
}

.center-text {
    text-align: center;
}
.center-img {
    display: grid;
    justify-content: center;
}

.profile-img {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid var(--stroke);
    object-fit: cover;
    margin-bottom: 1.25rem;
}

.go-back {
    font-size: 8pt;
    
}

/* Details animate test */
@keyframes details-show {
  from {
    opacity:0;
    transform: var(--details-translate, translateY(-0.5em));
  }
}

details[open] > *:not(summary) {
  animation: details-show 250ms ease-in-out;
}