:root{
    --red: rgb(255, 0, 0);
    --green: rgb(0, 255, 0);
    --blue: rgb(0, 0, 255);
    --pink: rgb(255, 0, 255);
    --cyan: rgb(0, 255, 255);
    --yellow: rgb(255, 255, 0);
}

body{
    background-color: black;
    color: white;

    display: flex;
    margin: 0;
}

.left{
    /*To make the left side stretch to the right side*/    
    flex: 1; 
    background-color: black;
    padding: 4px;

    display: flex;
    gap: 4px;

    overflow-y: auto; /*So it won't make the vh longer and strech the right side longer*/

    background-image: url("../images/asian/1 (8).jpg");
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed; /*it won't scroll with the page*/
    background-repeat: no-repeat;
     
}

.right{
    width: 10vw;
    height: 100vh;

    display: flex;
    gap: 4px;
    flex-direction: column;
    padding-top: 4px;
    padding-bottom: 4px;

    border-left: 2px solid white;

    box-sizing: border-box;

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: small;
}

.right > a{
    display: flex;
    flex-direction: column;
    flex: 1; /* make the <a> take available space */
}

.right > a > div{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /*Center all the content horizontaly (cross axis)*/
    justify-content: center;

    margin-left: 4px;
    margin-right: 4px;

    border: 2px solid white;
    border-right-color: red;
    border-bottom-color: red;
    background-color: var(--pink);

    text-align: center;

    /*text*/

}

.right > a > div:hover{
    background-color: var(--cyan);
    border-right-color: var(--blue);
    border-bottom-color: var(--blue);
}

.right > a > div img{
    width: 50%;
}

.intro{
    display: flex;
    flex-direction: column;
}

.mood{
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 2px solid var(--yellow);
    border-right-color: var(--red);
    border-bottom-color: var(--red);
    background-color: black;
}

.main{
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    background-color: var(--blue);
    width: 800px;
    margin: 100px auto;
    padding: 4px;

    image-rendering: pixelated;

    position: relative;
    align-items: center;
    text-align: center;
}

.text{
    flex: 1;
}

#main_gif{
    width: 100%;
}

.wave{
    position: absolute;
    left: -64px;
}
.like{
    position: absolute;
    right: -64px;
    animation: updown 3s infinite ease-in-out; /*function called updaow*/
}
/*function called updaow*/
@keyframes updown {
    0%   { transform: translateY(300px); }
    50%  { transform: translateY(-40px); }
    100% { transform: translateY(300px); }
}