/* 

LAYOUT MADE BY POEMPUPPY 

https://pomepuppy.neocities.org
poempuppy [at] gmail.com 

*/

@font-face {
    font-family: 'basiic';
    src: url(/layouts/pale-layout-dark/assets/fonts/basiic.ttf);
}

:root {
    --black: black; 
    --white: white; 
}

body {
    padding: 0; 
    margin: 0; 
    display: flex;
    min-height: 100vh; 
    font-family: 'basiic', sans-serif;
    background-image: url(/layouts/pale-layout-dark/assets/bg.gif); 
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: var(--white); 
}

.credits {
    position: absolute;
    top: 10px; 
    left: 10px; 
    font-size: 15px;
}


a {
    text-decoration: none;
    color: inherit; 
}

.main-container {
    display: flex;
    gap: 10px; 
    width: 600px;
}

.sidebar, .main-content, header, .welcome-box, .two-box-row, .social-title{
    border-width: 7px;
    border-style: solid;
    border-image: url(/layouts/pale-layout-dark/assets/border.PNG) 8 fill round;
    background-color: var(--black);
}

.sidebar {
    flex: 0 0 25%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px; 
    padding: 5px; 
}

.main-content {
     flex: 1;
    min-height: 400px;
    padding: 5px; 
        display: flex;
    flex-direction: column;
    gap: 10px; 
}

.pfp {
    width: 100%; 
    border: 1px dotted var(--white); 
    border-radius: 5px;
}


button {
    width: 100%;
       border-width: 5px;
    border-style: solid;
    border-image: url(/layouts/pale-layout-dark/assets/border.PNG) 8 fill round; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    color: inherit; 
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

button:hover {
    letter-spacing: 3px;
    text-shadow: 0px 2px 10px var(--white);
}

.div {
    width: 100%;
    filter: brightness(300%);
}

header {
    display: flex;
    font-size: 20px;
    padding: 15px; 
    justify-content: center;
    align-items: center;
}

.welcome-box {
    display: flex;
    flex-direction: column;
    gap: 5px; 
}

.welcome-title {
    font-size: 20px;
    letter-spacing: 3px;
}

.welcome-txt {
    text-align: justify;
    margin: 0; 
}

.two-box-row {
    display: flex;
    gap: 10px; 
}

.img {
    width: 50%;
    border: 1px dotted var(--white); 
    border-radius: 5px;
}

.socials-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px; 
   align-items: center;
}

.link {
    transition: all 0.3s ease;
}

.link:hover {
    transform: skewX(-15deg);
    border-bottom: 1px dotted var(--white); 
}

.site-btn {
    filter: grayscale();
    transition: 0.3s ease;
}

.site-btn:hover {
    filter: none;
}