/* FONTS */

@font-face {
    font-family: "Retro Gaming";
    src: url('FONTS/retro.ttf') format('truetype');
}

@font-face {
    font-family: "Cafe";
    src: url('FONTS/cafe.ttf') format('truetype');
}

@font-face {
    font-family: "Minecraft";
    src: url('FONTS/Minecraft.ttf') format('truetype');
}
/* BEGIN PAGE */

#begin {
    background: url('assets/begin_background2.jpg') repeat 0 0;
    animation: slide 20s linear infinite;
    background-size: cover;
}    



.buttonLink {
    text-decoration: none;
    color: #49CBBE;
}


.start {
    background-color: #B2EDE7;
    border-style:solid;
    border-radius: 8px;    
    transition: transform 0.4s;
    border-color: #49CBBE;
    box-shadow: 0 0 5px black;
    font-size: 30px;

}

.start:hover {
        transform: scale(1.5);
    }
 

.pressHearts {
    color: #49CBBE;
    text-shadow: .5px .5px 1px black;
    font-family: "Retro Gaming";
    font-weight: lighter;
}


.beginWelcome {
    color: #49CBBE;
    text-shadow: .5px .5px 1px black;
    font-size: 50px;
    text-decoration: none;
    font-family: "Retro Gaming";
    font-weight: lighter;
}

.beginCoquette {
    margin: 5% 20% 0;
    background-color: #D9F3EA;
    border-style: solid;
    border-radius: 40px;
    border-color: white;
    box-shadow: 0 0 40px #69C7BE;
    text-align: center;
    padding: 20px;

    
}

.about {
    list-style-type: disc;
    list-style-position:inside;
    font-size: 25px;
    font-family: "Cafe";
    
}

.taiyaki {
    float: right;
}

/* BEGIN PAGE END */


/* WELCOME PAGE */

#site {
    animation: slide 20s linear infinite;
    background: url("ASSETS/splatterBG.png") repeat 0 0;
    background-size: cover;
}

    @keyframes slide {
        100% {
            background-position: -550px -450px;
        }
    }

.welcomePage {
    background-color: #FFF7D4;
    border-style:double;
    border-color: #FF7094;
    border-radius: 40px;
    border-width:10px;
    margin: 1% 9% 2%;
    box-shadow: 0 0 10px rgb(69, 69, 69);
}

#layout {
    display: grid;
    grid-template-columns: .7fr 4fr 1fr;
    column-gap: 2%;
    border-radius: 40px;
    margin: 5%;
}

header {
    border-style:double;
    border-width:7px;
    border-color: #FF7094;
    border-radius: 40px 40px 0 0;
    box-shadow: 0 0 10px rgb(69, 69, 69);
    grid-column: span 3;
    image-rendering: auto;
    background-image: url("ASSETS/splatterBG.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 15%;
    margin-bottom: 2%;
}



/* COLUMNS */


.fakeUL {
    list-style-type: none;
    line-height: 200%;
}




.leftNavigation {
    border-style: double;
    border-width:7px;
    border-color: #FF7094;
    box-shadow: 0 0 10px rgb(69, 69, 69);
    background-image: url("ASSETS/splatterBG.png");
    background-repeat: no-repeat;
    background-size: cover;
    
}

    .leftNavigation li {
            border-style: solid;
            border-width:9px;
            border-image: url("ASSETS/biscuit border.gif") 9 fill round;
            filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
            line-height: 50%;
            margin: 0 10px 10px;
            text-align: center;

    }

    .leftNavigation li a {
            text-decoration: none;
            padding: 10px;
            font-family: "Minecraft";
            font-size: 1.5em;
            color: #734e19;
            
            
    }

    .leftNavigation h4 {
        font-family: "Retro Gaming";
        font-weight: lighter;
        border:5px solid;
        border-width: 1px;
        border-color: #FF7094;
        background-color: #FF7094;
        margin-bottom: 15%;
        color:#FFF7D4;
        text-shadow: 0 .5px .5px rgb(0, 0, 0);
    }

            .hiH4 {
                text-align: left;
                padding-left: 20%;
            }
            
            .lovesH4 {
                text-align: right;
                padding-right: 11%;
                
            }

            .otherH4 {
                text-align: left;
                padding-left: 9%;
            }



.middle {
    
    border-style: double;
    border-width:7px;
    border-color: #FF7094; 
    box-shadow: 0 0 10px rgb(69, 69, 69);
    background-image: url("ASSETS/splatterBG.png");
    background-repeat: no-repeat;
    background-size: cover;
}

    .middle h1 {
        font-family: "Retro Gaming";
        font-weight: lighter;
        font-size: 3.5em;
        max-width: 700px;
        color: #FFD61F;
        text-shadow: 0 2px 3px rgb(0, 0, 0);
        line-height: 90%;
        text-align: right;
        margin-right: 15px;

    }

    .middle p {
        font-family: "Minecraft";
        color: #000000;
        text-shadow: 0 .5px .5px rgb(0, 0, 0);
        line-height: 150%;
        text-align: right;
        margin-right: 15px;
        margin-left: 10px;
        font-size: 1.5em;
    }

        .birthday {
            margin: 5% 4% 0 4%;
            border-radius: 40px;
            border-style: ridge;
            border-color:#2ad0dc;
            background-color: #B2EDE7;
            border-width: 5px;
            align-items: center;
            text-align: center;
            color:#FFF7D4;
            text-shadow: 0 2px 3px rgb(0, 0, 0);
            filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
        }

    .birthday h3 {
        font-family: "Retro Gaming";
    }


    .birthday p {
        text-align: center;
    }




.right { 
    box-shadow: 0 0 10px rgb(69, 69, 69);
    border-style: double;
    border-width:7px;
    border-color: #FF7094;
    background-image: url("ASSETS/splatterBG.png");
    background-repeat: no-repeat;
    background-size: cover;

}

    .musicH3 {
        margin: 10px 10px 10px;        
        border-style: solid;
        border-radius: 40px;
        border-width: 20px;
        border-image: url("ASSETS/greenPolka.png") 250 fill round;
        filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
        text-align:center;
        align-items: center;

}

        .musicH3 h3 {
        padding: 5% 5% 0;
        color:#40f74c;
        font-family: "Retro Gaming";
        font-weight: lighter;
        text-shadow: 0 .5px .5px rgb(0, 0, 0);
        margin-top: -3px;
        text-decoration: underline;
        text-decoration-style: wavy;
        }


        .musicH3 h5 {
            padding: 0 5% 0;
            font-family: "Minecraft";
            font-size: 1em;
            color: black;
            text-shadow: none;
            text-decoration: none;
            filter: none;
            margin: -10px -5px -5px;
        }

        .playMusic {
            margin-bottom: 5px;
        }

.right li {
    list-style-type: none;
    text-align: center;
}

.right h4 {
        font-family: "Retro Gaming";
        font-weight: lighter;
        border:5px solid;
        border-width: 1px;
        border-color: #FF7094;
        background-color: #FF7094;
        padding: 8px;
        color:#FFF7D4;
        text-shadow: 0 .5px .5px rgb(0, 0, 0);    
}

.rightPanel h5 {
    font-family: "Retro Gaming";
    letter-spacing: 2px;
    color:#FF7094;
    margin-left: 10%;
    margin-right: 10%;
    padding: 5px 0 5px;
    border-style: solid;
    border-width:15px;
    border-image: url("ASSETS/lettuceBorder.png") 150 fill round;
    text-shadow: 0px 1.5px 1.5px rgb(255, 255, 255);    
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

}

.rightPanel p {
    font-family: "Minecraft";
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin-top: -10%;
    margin-bottom: -10%;
}

.socialMedia {
    margin: 30px 10px 10px;
    text-align: center;
}

.socialMedia h3 {
    font-family: "Retro Gaming";
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/greenPolka.png") 250 fill round;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
    text-align:center;
    padding: 5%;
    color:#2ad0dc;
    font-family: "Retro Gaming";
    font-weight: lighter;
    text-shadow: 0 .5px .5px rgb(0, 0, 0);
    text-decoration: underline;
    text-decoration-style: wavy;

}



.socialMedia li a {
    color: #734e19;

}

.socialMedia p {  
    border-style: solid;
    border-width:9px;
    border-image: url("ASSETS/biscuit border.gif") 9 fill round;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
    text-align: center;
    font-family: "Minecraft";
    font-size: 1.5em;
    color: #734e19;
    line-height: 50%;
            
}



footer {
    font-family: "Retro Gaming";
    color:#49CBBE;
    border-radius: 0 0 40px 40px;
    border-style: double;
    border-width: 7px;
    border-color: #FF7094;
    grid-column: span 3;
    text-align: center;
    background-image: url("ASSETS/splatterBG.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 10px rgb(69, 69, 69);
    margin-top: 2%;
    text-shadow: 0 .5px .5px rgb(0, 0, 0);

}


/* CHATBOX */



















/* ME PAGE */

.aboutMe {
    color:#49CBBE;
    margin: 5%;
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
    text-align: left;
    line-height: 0.1px;
}

    .aboutMe h3 {
    text-shadow: 0 2px 3px rgb(0, 0, 0);
    text-align: center;
    font-size: 3.5em;
    font-family: "Retro Gaming";

    
    }

    .aboutMe h4 {
    text-shadow: 0 .5px .5px rgb(0, 0, 0);
    font-weight: lighter;
    font-family: "Retro Gaming";
    text-align: left;
    font-size: 1.5em;
    display: inline-block;

    }
    
    .aboutMe p {
        text-shadow: 0 .5px .5px rgb(0, 0, 0);
        display: inline-block;
        font-family: "Minecraft";
        font-size: 1.5em;
        text-align: left;
    }

    .aboutMe li {
        margin-bottom: -4%;
        line-height: 1px;
        list-style-type: none;
    }








/* ACTIVITY */

.recent {
    text-align: center;
    align-items: center;
    margin: 5%;
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
}   

    .recent h3 {
        border-style: solid;
        border-radius: 40px;
        border-width: 20px;
        border-image: url("ASSETS/greenPolka.png") 250 fill round;
        filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
        color:#FF7094;
        text-shadow: 0 2px 3px rgb(0, 0, 0);
        text-align: center;
        font-size: 3.5em;
        padding-bottom: 3%;
        margin: 5% 0 6%;
        font-family: "Retro Gaming";    
    }

    .recent h4 {
    
        font-family: "Retro Gaming";
        color:#FF7094;
        font-size: 1.5em;
        text-shadow: 0 .5px .5px rgb(0, 0, 0);  
    }

    .act1 p {
        text-align: center;
        margin-top: -2%;
    }

    .act1 h4 {
        padding: 0 3% 0;
        display: inline-block;
        border-style: solid;
        border-width:9px;
        border-image: url("ASSETS/biscuit border.gif") 9 fill round;
        filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
    }




/* FOOD LOVES */
.container {
    padding: 20%;
}

    .container img {
        width: 60%;
    }

.sliderWrapper {
    position: relative;
    width: 500;
    margin: 0 auto;
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;   
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));


}

.slider {
    display: flex;
    aspect-ratio: 64 / 64;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    border-radius: 40px;
}



    .slider img {
        flex: 1 0 100%;
        object-fit: cover;
        scroll-snap-align: start;
    }

    .slider-nav {
        display: flex;
        column-gap: 1rem;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .slider::-webkit-scrollbar {
        display: none;
    }

    .slider-nav a {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;

        opacity: .75;
        transition: opacity ease 250ms;
    }

    .slider-nav a:hover {
        opacity: 100;
    }

.foodLoves h2 {
    color:#FFD61F;
    text-shadow: 0 2px 3px rgb(0, 0, 0);
    text-align: center;
    font-size: 3.5em;
    font-family: "Retro Gaming";
    margin-bottom: -2%;
}

.foodLoves p {
    font-family: "Minecraft";
    text-align: center;  
    margin-bottom: -18%;
}

.extraDesc {
    align-items: center;
    text-align: center;
}

    .extraDesc h3 {
        border-style: solid;
        border-width:9px;
        border-image: url("ASSETS/biscuit border.gif") 9 fill round;
        filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));    
        margin: -17% 15% 0;
        font-family: "Retro Gaming";
        color:#FF7094;
        font-size: 1em;
        text-shadow: 0 .5px .5px rgb(0, 0, 0);          
    }

    .extraDesc h6 {
        margin-bottom: 10px;
        border: 4px ridge #ffc4d2; 
        padding: 15px;
        display: inline-block;
        border-radius: 40px;
        background-color: #ffc4d2;
        font-family: "Retro Gaming";
        color:#FF7094;
        font-size: 1.5em;
        filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
        text-shadow: 0 .5px .5px rgb(0, 0, 0);     
    }

    .extraDesc li {
    font-family: "Minecraft";
    font-weight: bolder;
    margin: 0 4px 4px;
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;   
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
    display: inline-block;        
    }





/* PICS */

.picTab {
    text-align: center;
    font-family: "Retro Gaming";
    font-size: 3.5em;
    color:#FF7094;
        text-shadow: 0 2px 2px rgb(0, 0, 0);     

}

    .picTab h3 {
        background-color: #ffc4d2;
        padding: 10px;
        border-radius: 40px;
        border: 15px ridge #FF7094;
        display: inline-block;
        filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

    }

.picTab img {
    align-items: center;
    width: 25%;
    height:auto;;
    display: inline-block;

}

.picturesBorder img {
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;   
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
}


/* LINKS */
.links {
    text-align: center;
}

.links h3 {
    text-align: center;
    font-family: "Retro Gaming";
    font-size: 3.5em;
    color:#FFD61F;
    text-shadow: 0 2px 2px rgb(0, 0, 0);     

}

.links p {
    text-align: center;
    font-family: "Minecraft";
    font-size: 1.5em;
}







/* MUSIC */

audio {
    border-radius: 40px;
    width: 50%;
}

/* IMAGES */

.burgerCute {
    float:left;
    width: 30%;
    height: auto;
    margin: 5% 2% 0 5%;
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

}

.rilakkumaTart {
    width: 5%;
    height: auto;
    top: 44%;
    left: 18%;
    position: absolute;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
}


.usagiHeart {
    width: 3.75%;
    height: auto;
    top: 73%;
    left: 15%;
    position: absolute;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

}

.pinkFlower {
    width: 3.75%;
    height: auto;
    top: 122%;
    left: 19.6%;
    position: absolute;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

}

.cover {
    margin-top: 15%;
    padding: none;
    width: 65%;
    align-items: center;
}

.dogMusic {
    width: 55%;
    height: auto;
    top: 85%;
    right: -27%;
    position: absolute;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

}

.waffleIceCream {
    width: 99%;
    height: auto;
    border-style: solid;
    border-width: 2px;
    border-color: #FF7094;
    margin-top: 15px;
}

.summikoBanner {
    width: 100%;
    height: auto;
    margin-top: -30%;
    margin-bottom: -10%;
    filter: drop-shadow(0px .2px 1px rgb(0, 0, 0));

}

.NamiPFP {
    width: 37%;
    height:auto;
    float: right;
    border-style: solid;
    border-radius: 40px;
    margin: 2% 6% 0 0;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));

}

.hmmMonkey {
    float:none;
    text-align: center;
    display: block;
    width: 65%;
    height: auto;
    margin-left: 17%;
}

.lakePic {
    width: 55%;
    height: auto;
    border-radius: 40px;
    border-style: ridge;
    border-color: #ffc4d2;
    border-width: 15px;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
    filter:brightness(110%);
}

.iceCreams1 {
width: 43%;
position: absolute;
left: 12%;
bottom: -51%;
border-style:none;
filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));


}

.iceCreams2 {
bottom: -60%;
right: 8%;
width: 55%;
position: absolute;
filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));
}

.iceCreamline {
    margin-top: 9%;
    border-top: 7px double #FF7094;
}

.iceCreamline img {
    margin: 8% 0 0 5%;
    display:inline;
    width: 20%;
    border-style: solid;
    border-radius: 40px;
    border-width: 20px;
    border-image: url("ASSETS/pinkPolkaBorder.png") 250 fill round;
    filter: drop-shadow(0px 2px 2px rgb(0, 0, 0));    
}