:root {
    --darkest-color: #2f2a30;
    --dark-color: #95181c;
    --light-color: #bca65b;
    --lightest-color: #f7ddc7;
    --medium-color: #666f14;
    background-color: #2a272b;
}

::selection {
    background: rgba(188, 166, 91, 0.7);
}

@font-face { font-family: "Shine Typewriter"; src: url(https://imgename.neocities.org/fonts/ShineTypewriter.ttf) format("truetype"); }
@font-face { font-family: "IM Fell English SC"; src: url(https://imgename.neocities.org/fonts/IMFellEnglishSC-Regular.ttf) format("truetype"); }
@font-face { font-family: "Caudex"; src: url(https://imgename.neocities.org/fonts/Caudex-Bold.ttf) format("truetype"); font-weight: bold;}
@font-face { font-family: "Caudex"; src: url(https://imgename.neocities.org/fonts/Caudex-Regular.ttf) format("truetype"); }

summary::marker {
    content: '';
}

.gradient {
    position: absolute;
    inset: 80% 0 0 0;
    background-image: linear-gradient(transparent 50%, #645f5f62);
    mix-blend-mode: multiply;
    z-index: 5;
}

a {
    text-decoration: none;
    color: var(--dark-color);
}

/* Pins */

a.link-button::before {
    content: '';
    height: 1.1rem;
    width: 1.1rem;
    background-image: url(assets/asset-pin.webp);
    background-size: contain;
    display: inline-block;
    margin-right: 0.3rem;
    
}

a.livebloglink::before {
    content: '';
    height: 1.1rem;
    width: 1.1rem;
    background-image: url(assets/asset-pin.webp);
    background-size: contain;
    display: inline-block;
    margin-right: 0.3rem;
    
}

a.link-button {
    color:var(--medium-color);
    font-family: 'Caudex';
    font-size: 1.3rem;
    font-weight: bold;
}

a.link-button:hover {
    color: var(--dark-color);
}

a.contacts {
    color: var(--dark-color);
    text-decoration: none;
    border:none;
}

h3 {
    text-indent: 1rem;
    color: var(--medium-color);
    background-image: linear-gradient(to right, #666f1469, #e7ebc000);
    border-radius: 20px;
    padding: 0.7rem;
}


img {
    user-select: none;
}

.preview {
    width: 90%;
    margin: 0.8rem;
}

details {
    padding: 1rem;
}

.details {
    padding-left: 1rem;
    text-indent: 0;
}

summary {
    font-size: 1.2em;
    background-image: linear-gradient(to right, #666f1469, #e7ebc000);
    border-radius: 20px;
    padding: 0.5rem;
    padding-left: 1rem;
}

body {
    background-image: url(assets/overlay.webp),radial-gradient(var(--darkest-color) 60%, #231f23);
    background-blend-mode: overlay;
    width: 100%;
    height: max-content;
    margin:0%;
    caret-color: rgba(0, 0, 0, 0);
    position: relative;
}

#bookgif {
    height: 1rem;
}

.container {
    height: max(100vh, 120rem);
    font-size: 1.1rem;
    margin: 0%; 
    display: flex;
    justify-content: center;
    color: var(--darkest-color);
    font-family: "Shine Typewriter", Courier, monospace;
    

}

.index-border {
    width: 18px;
    height: 100%;
    background-image: url(assets/asset-border.webp);
    background-repeat: repeat-y;
    background-size: contain;
   
}

.index {
    width: 10rem;
    height: 100%;
    background-image: linear-gradient(var(--lightest-color) 87%, #dac0a9);
    font-family: "IM Fell English SC", "Courier New", Courier, monospace;
    text-align: center;
    font-size: 1rem;
    
}

#logo {
    margin: 4rem;
    position: relative;
    height: 7.5rem;
    left: -8.7rem;

}

.index-button {
    display: grid;
    height: fit-content;
    width: 10rem;
    margin: auto;
    border: none;
    background: none;
    font-size: 1.2em;
    font-family:"IM Fell English SC", "Courier New", Courier, monospace;
    font-weight: 600;
    padding: 0.3em;
    color: var(--darkest-color);
    transition: background-color 0.15s ease-out, font-size 0.15s ease-out;
}

.index-button:hover {
    background: fixed;
    background-color: var(--light-color);
   
}

.index-button:active {
    background-color: var(--light-color);
    font-size: 1.4em;
}

.index-button:focus {
    background-color: var(--light-color);
    font-size: 1.4em;
}

#contacts {
    font-size: 1.2rem;
    font-family: "Shine Typewriter";
}

.icon {
    height: 1.2rem;
}


.main-window {
    position: relative;
    top:13rem;
    width: min(65%, 46rem);
    height: 37.5rem;
    background-image: linear-gradient(#622424 ,var(--dark-color) 20%);
    border: var(--lightest-color);
    border-width: 2px;
    border-style: solid solid solid none;
}

.whg {
    width: 520px;
    right: -68px;
    top: -139px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}


.main-wrapper {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
    height: 100%;
}

#mainabout {
    display: flex;
}

.main-summary {
  height: max-content;
  width: 90%;
  padding: 1.4rem 3rem 1rem 2rem;
  color: var(--lightest-color);

  border: var(--light-color);
  border-style: none none solid none;
  border-width: 16px;
}

.main-contents {
    background-color: var(--lightest-color);
    flex: 1 1 auto;
    align-self: stretch;
    padding: 1rem;
    padding-left: 2rem;
    overflow-y: scroll;
    position: relative;
    scrollbar-width: none; 
}

.table {
    position: relative;
    background-image: url(assets/asset-cloud.webp);
    background-size: contain;
    background-position: 0rem 2rem;
    width: 90%;
    height: max-content;
    margin: 1.5rem;
    margin-top: 5rem;
    border: var(--light-color) groove 3px;

}

#tablerecs {  
    margin: 0.5rem;
    margin-top: 1rem;
}

.tabletitle {
    content: 'About me';
    background-color: var(--light-color);
    color: #f6faec;
    padding: 0.4rem 3rem 0.4rem 3rem;
    text-align: center;
    position: absolute;
    top: -2rem;
    left: 3.7rem;
    --p: 20px; /* control the shape (can be percentage) */
    height: 180px;
    aspect-ratio: 3/2;
    clip-path: polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 100%,0 100%);
    width: max-content;
    height: 1.2rem;
    text-wrap: nowrap;
}

#aboutwrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: max-content max-content;
    column-gap: 1rem;
    row-gap: 1rem;
    padding: 1rem;
}

#recswrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 1rem;
    row-gap: 1rem;
}

.tablesectionabout {
    color: var(--lightest-color);
    background-color: #1614175f;
    border: var(--light-color) groove 3px;
    border-radius: 2px;
    padding: 1rem;
    font-family: 'Caudex', 'Times New Roman', Times, serif;
    position: relative;
    text-align: center;
    text-wrap: balance;
    
}

.tablesectionabout::after {
    content: '';
    position: absolute;
    inset: -2px -2px -2px -2px;
    border: var(--light-color) groove 3px;
    border-radius: 30px;
}

#likes {
    grid-area: 2 / 1 / span 1 / span 3;
    text-align: left;
    text-wrap: wrap;
    padding: 0.5rem;
    padding-left: 2rem;
    
}

.tablesectionrecs {
    color: var(--lightest-color);
    background-color: #16141782;
    border: var(--light-color) groove 3px;
    border-radius: 2px;
    padding: 0rem 2rem 1rem 2rem;
    font-family: 'Caudex', 'Times New Roman', Times, serif;
    position: relative;
    text-indent: 2rem;
    font-size: 1.1rem;
    
}

.tablesectionrecs::after {
    content: '';
    position: absolute;
    inset: -2px -2px -2px -2px;
    border: var(--light-color) groove 3px;
    border-radius: 30px;
}

.tableheader {
    font-size: large;
    text-indent: 0;
    color: var(--light-color);
    font-weight: bold;
}

.rec {
    color: var(--light-color);
    font-size: 1.2rem;
}

#rose {
    display: block;
    margin: auto;
    margin-top: 1rem;
    position: relative;
    left: 0.5rem;
    width: 5rem;
}

.butterfly {
    position: absolute;
    top: -5.3rem;
    left:1.3rem;
    width: 6rem;
    z-index: 2;
}

#butterflyrecs {
    top:-2rem;
    left:-2rem;
}

#contentsliveblog {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    overflow-y: scroll;
}

.logos {
    max-height: 6rem;
    max-width: 30rem;
}

#livebloglinks {
    max-width: 80%;
    text-align: center;
}

#contentsguides {
    font-size: 1.2rem;
    position: relative;
}

#smile {
    position: absolute;
    right: 4vw;
    top: 6rem;
    height: 30%;
}

.pin {
    height: 1rem;
}

#mainfooter {
    
    height: fit-content;
    width: 100%;
    background-color: var(--light-color);
    border: var(--dark-color);
    border-style: dotted;
    overflow-x: hidden;
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    display: flex;
}

#mainfooter::-webkit-scrollbar {
    display: none;
}

.footer-wrapper {
    display: flex;
    animation: spin 20s infinite linear;
}

.stamp {
    height: 50px;
    flex: 0 0 0;
}

@keyframes spin {
    from {translate: 0;}
    to {translate: -100%;}
}

a.livebloglink {
    color: var(--darkest-color);
    text-decoration: underline;
}

#guestbook {
    position: absolute;
    bottom: -8rem;
    left: -8rem;
    width: 16rem;
}

.featuredart {
    width: 45rem;
    height: 30rem;
    position: relative;
    top:3rem;
    left: -12rem;
    margin: 5rem;
    background-color: var(--lightest-color);
    border-color: var(--dark-color);
    border-style: solid;
    z-index: 3;
    box-shadow: 2px 2px 2px #35063543;

}

.title {
    background-image: linear-gradient(#622424 ,var(--dark-color));
    color: var(--lightest-color);
    font-size: larger;
    position: absolute;
    top: -2.2rem;
    left: -3px;
    padding: 0.7rem;
    text-align: center;
    width: 97.8%;
  clip-path: polygon(0 30px,30px 0,100% 0,100% 100%,0 100%);

}


#peppers {
    position: absolute;
    bottom: -24.5%;
    left: 3rem;
    z-index: -1;
    width: 40rem;
}

.artgallery {
    height: 95%;
    width: auto;
    overflow-y: scroll;
    display: flex;
    padding:  1rem 0.5rem 0.5rem 0.3rem;
     scrollbar-width: none; 

}

.column {
    padding: 0.5rem 0.4rem 0.4rem 0.4rem;
    width: 50%;
}

.featured {
    width: 100%;
    border-radius: 3px;
    border: whitesmoke solid 2px;
    box-shadow: 1px 1px 2px var(--light-color);
    margin-bottom: 0.3rem;
}

.hali {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 37rem;
    height: 17rem;
    background-image: url(assets/asset-hali.webp);
    background-position: center;
    background-size: cover;
    left: 4rem;
    top: 3rem;
    border: var(--dark-color) solid;
    border-width: 20px 3px 3px 3px;
    box-shadow: 2px 2px 2px #35063543;
    border-radius: 3px;
}

#button {
    width: 10rem;
    margin: 0.6rem;
    margin-top: 1.8rem;
}

#buttonlink {
    background-color: var(--darkest-color);
    border: var(--light-color) 3px double;
    color: var(--light-color);
    padding: 0.6rem;
    margin: 3rem;
    margin-top: 0;
    text-align: center;
    font-family: Candara, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    z-index: 6;
}

#buttonlink::selection {
    background-color: hsl(from var(--dark-color) h s l / 0.5);
    text-shadow: var(--light-color) 0 1px 2px;
    color: var(--lightest-color);
}

.updatetitle {
    position: absolute;
    display: none;
    height: 60%;
    width: 3rem;
    top:2rem;
    left: -3rem;
    background-color: var(--light-color);
    border-radius: 3px 0 0 3px;
    border: var(--dark-color) solid;
    text-align: center;
    padding-top: 0.8rem;
    padding-bottom: 0.2rem;
    z-index: -1;
    font-size: 1.6rem;
    color: #687196;
}

#lamps {
    position: absolute;
    left: -13rem;
    top: -12rem;
    width: 7rem;
}

#statuscafe {
    padding: .5em;
    background-image:linear-gradient( to right, var(--lightest-color) 50%, #d7d1bd94);
    border: #6a4444 double 7px;
    max-height: max-content;
    margin: 1rem;
    color: var(--darkest-color);
    position: relative;
}
#statuscafe-username {
    margin-bottom: .5em;
    text-decoration: none;
    padding-left: 2.3rem;

}

#icon {
    position: absolute;
    top:8px;
    left:10px;
    width: 25px;
    border-radius: 1px;
}

#statuscafe-content {
    margin: 1rem;
}