/* 
Creepster
Nosifer
Rubik Glitch
Jolly Lodger
Fascinate Inline
*/


:root {
    --black: #000;
    --dark: #760f36;
    --med: #ed5580;
    --light: #FFBCCC;
    --bg: #fde8e5;
    
    --dark: #76360f;
    --med: #ed8055;
    --light: #ffccbc;
    --bg: #fdeee5;
    
    
    --darkFlowerIcon: "\273F";
    --lightFlowerIcon: "\2740";
}

body {
    background-color: var(--bg);
    color: var(--dark);
    font-family: "Figtree", sans-serif;
    margin: 0;
    padding: 20px;
    background-image: url(images/doodle.png);
    background-repeat: repeat;
    background-size:auto; 
    animation: moveBackground 60s linear infinite;
}

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

header {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    max-width: 1000px;
    margin: 0 auto;

    text-align: center;
    margin-bottom: 40px;
}

.tagline {   
    font-family: "Jolly Lodger", system-ui;
    color: var(--med);
    font-size: 1.9rem;
    padding: 10px 20px;
    border-radius: 10px;
    width: 400px;
    text-align: end;
    filter: drop-shadow(1px 1px 0px var(--dark));
    text-decoration: 2px dashed underline var(--med);
}

.name{
    color: var(--med);
    text-decoration: none;
    display: inline-block;
    font-family: "Jolly Lodger", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 55px;
    margin: 10px;
    text-align: justify;
    text-align-last: justify;
    width: fit-content;
    line-height: 0.7em;
    filter:drop-shadow(2px 2px 0px var(--dark));
    transition: color 0.1s ease-in-out, filter 0.3s ease-in-out;
}

.name:hover {
    color: var(--light);
    filter:drop-shadow(2px 2px 0px var(--med));
}


.container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    align-items: start;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.left, .right {
    flex: 1;
    padding: 20px;
}

.left {
    display: flex;
    max-width: 200px;
    text-align: left;
    justify-content: flex-start;
    align-items: start;
}
.right {
    text-align: right;
    min-width: 160px;
}

.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}
.main-content h2 {
    margin-bottom: 10px;
    color: var(--med);
    background-color: var(--light);
    padding: 10px;
    border-radius: 10px;
}

.currently-working-on {
    border: 2px dashed var(--med);
    padding: 15px;
    border-radius: 10px;
    max-width: 500px;
    margin: 20px;
    line-height: 1.2rem;

    background-color: var(--light);
    box-shadow: 5px 5px 0px var(--med);
}

.currently-working-on a {
    text-decoration: none;
    color: var(--dark);
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 5px;
}

.currently-working-on a:hover {
    color: var(--med);
    transition: 0.3s, color 0.3s;
}

.about-me {
    border: 2px dashed var(--med);
    padding: 15px;
    border-radius: 20px;
    max-width: 500px;
    background-color: var(--bg);
}
.about-me u {
    text-decoration-color: var(--med);
    text-decoration-thickness: 2px;
}

.me{
    max-width: min(150px, 60vw);
    filter:  drop-shadow(5px 5px 0px var(--med));
}
.me:hover {
    transform: rotate(-5deg);
    transition: transform 0.1s;
}

.icon-and-blab{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

.icon-and-blab div {
    background-color: var(--light);
    max-width: 222px;
    padding: 10px;
    border-radius: 10px;
    border: 2px dashed var(--med);
    margin-left: 15px;
    box-shadow: 5px 5px 0px var(--med);
}

.icon-and-blab p {
    margin: 5px 0;
    line-height: 1.2rem;
}

.icon-and-blab p::before {
    margin-right: 5px;
}

.icon-and-blab p:nth-child(odd)::before {
    content: var(--darkFlowerIcon);
}

.icon-and-blab p:nth-child(even)::before {
    content: var(--lightFlowerIcon);
}


.left-home-buttons a {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    border: 2px dashed var(--med);
    border-radius: 5px;
    text-decoration: none;
    color: var(--dark);
    font-weight: bold;
    transition: 0.3s, color 0.3s;
    background-color: var(--bg);
}

.left-home-buttons a:hover {
    background-color: var(--med);
    transform: rotate(2deg);
    color: var(--bg);
    box-shadow: 5px 5px 0px var(--dark);

}

.socials-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--med);
    box-shadow: 5px 5px 0px var(--med);
    border-radius: 15px;
    color: var(--dark);
    padding: 20px;
    background-color: var(--bg);
}

.socials-container h3 {
    text-decoration: dashed underline var(--dark);
    text-underline-offset: 5px;
}

.social-links {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.social-links a {
    text-decoration: none;
    color: var(--dark);
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    transition: 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
}

.social-links a:hover {
    color: var(--bg);
    background-color: var(--med);
    box-shadow: 3px 3px 0px var(--dark);
}

.featured-stuff {
    border: 2px dashed var(--med);
    padding: 15px;
    border-radius: 10px;
    max-width: 500px;
    margin-top: 10px;
    line-height: 1.2rem;

    background-color: var(--light);
    box-shadow: 5px 5px 0px var(--med);
}

.featured-stuff a {
    text-decoration: dashed underline var(--dark);
    text-underline-offset: 3px;
    color: var(--dark);
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 5px;
}

.featured-stuff p::before {
    content: "\203A";
    margin-right: 5px;
}

.featured-stuff a:hover {
    color: var(--med);
    transition: 0.3s, color 0.3s;
}


.featured-stuff h4::after {
    content: "\2935";
}

.featured-h3{
    overflow:hidden;
}

.featured-h3::before, .featured-h3::after {
    content:'';
    display: inline-block;
    vertical-align: middle;
    width:50px;
    height:1px;
    border-top: 2px dashed var(--med);
}

.featured-h3::after {
    width:100%;
    margin-left: 20px;
    margin-right: -100%;
}
.featured-h3::before {
    margin-right: 20px;
}

.funny-images img {
    max-width: 100px;
    margin: 10px;
    border: 3px dotted var(--med);
    border-radius: 10px;
}

footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    border-top: 2px dashed var(--med);
    color: var(--dark);
    font-size: 0.9rem;
}

footer p::after {
    content: "\2661";
    margin-left: 5px;
}


/* Intro page */
.enter-link {
    margin-top: 40px;
    text-decoration: none;
    color: var(--dark);
    border: 2px dashed var(--med);
    padding: 10px 20px;
    border-radius: 5px;
}

.enter-link:hover {
    background-color: var(--med);
    color: var(--bg);
    box-shadow: 5px 5px 0px var(--dark);
    transition: 0.3s, color 0.3s;
}

.ascii-art{
    cursor: default;
}

.ascii-art::before {
    white-space: pre;
    font-family: monospace;
    display: block;
}

.ascii-art-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Cooking */

.cooking-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.cooking-container div {
    text-align: center;
    max-width: 300px;
    padding: 10px;
}

.cooking-container img {
    border-radius: 10px;
    box-shadow: 5px 5px 0px var(--med);
}

/* ----Scrollbar---- */
:root {
  /* use your palette */
  --scroll-track: var(--bg, #fdeee5);
  --scroll-thumb: var(--light, #ffccbc);
  --scroll-thumb-hover: var(--med, #ed8055);
}

* {
  scrollbar-width: thin;                    
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
  width: 10px;                              
  height: 10px;                             
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);    
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover); /*Change this color*/
}


/* ----Media Queries---- */

@media screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }
    
    .left, .right {
        text-align: center;
    }

    .left-home-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
}