/*
    Name: Gino Xu
    Date: 20/11/2025 (DD/MM/YYYY)
    Styling van alles
    Have a nice day :3
*/
/* Background image */
body{
    background-image: url("../images/glen.png");
    background-position-x: center;
    background-repeat:no-repeat;
    background-color:#000000;
}

/* General styling */
main, footer{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    color:#dadada;
    margin-top:1rem;
}
/*
    rem means "root em"
    rem is 16px on default but it also scales depending on the device you view it on
*/

a{
    text-decoration:none;
}

/* Navbar adjustments */
.navbar-custom{
    background-color:#BEFFBE;
}
.navbar-brand{
    margin-left:1rem;
}
.nav-item:hover{
    background-color:#6e926e;
    border-radius: 0.6rem;
} 

/* Box for the index page */
.box{
    background-color:#BEBEFF;
    border-radius:1rem;
    width:80%;
    padding:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    margin-top:0.7rem;
}
p{
    margin-bottom:0;
    color:#1e1e1e;
    text-align:center;
}
#portrait{
    width:9rem;
    height:9rem;
    margin:1rem;
    color:#1e1e1e;
    border-radius:0.4rem;
}
.imgAlign{
    color:#1e1e1e;
    display:flex;
    align-items:center;
}

/* classes for the about me page */
.aboutMeImg{
    width:20rem;
    padding:1rem;
    color:#1e1e1e;
}
#buttonForAboutMe{
    background-color:#BEFFBE;
    border-radius:2rem;
    font-size:80%;
}

/* Mobile adjusting

    @media says that it wants to check something in the website

    screen talks about.. the screen

    "and" is a check before applying the css below

    (max-width: the screen must be this wide or below to apply the css
*/
@media screen and (max-width:420px){
    body{
        font-size:160%;
    }
    .box{
        flex-wrap:wrap;
    }
    .boxText, .imgAlign{
        display:inline;
    }
    .aboutMeImg{
        padding:0rem;
        width:15rem;
    }
    nav{
        font-size:80%;
    }
    #buttonForAboutMe{
        padding:0.5rem;
    }
}

/* Animation for entering a page */
body{
    /*
        from left to right, it's: 
        
        animation name
        
        duration
        
        type of easing
        
        how long to wait before playing the animation (delay)
        
        how many times the animation will play
        
        which direction the animation will play
        (normal: 0% -> 100%, reverse: 100% -> 0%)
        
        where the element will be after the animation is done playing
        (fowards means the element stays where it is after the animation plays, backwards means the element goes back to where it was before it played)
    */
    animation: fadeAnim 1s ease 0s 1 normal forwards;
}

@keyframes fadeAnim {
    /*
        0% is the start of the animation
        100% is the end of the animation
        opacity is how transparent the element is
    */
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}