/*-----------------BACKGROUND-------------------*/
body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    background-color: rgb(74, 148, 110);
    background: url("https://i.imgur.com/QOOXxDW.png");
    background-repeat: repeat;
    animation: scrolling 10s linear infinite;
}
@keyframes scrolling {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 250px 250px;
    }
}
/*-------------LINK COLOUR CHANGES------------*/
a:link {
    color: darkseagreen;
}

/* visited link */
a:visited {
    color: lightseagreen;
}

/* mouse over link */
a:hover {
    color: lightgreen;
}

/* selected link */
a:active {
    color: mediumseagreen;
}
/*Title Box*/
.Titlebox {
    position: relative;
    top: 50px;
    bottom: 50px;
    left: 50%;
    transform: translateX(-90%);
    margin-bottom: 100px;
    width: 1085px;
    height: 100px;
    text-align: start;
    line-height: 25px;
    filter: drop-shadow(0px 0px 15px rgb(0, 0, 0));
    background: no-repeat center/100% url("https://i.imgur.com/pDUtPBJ.png");
    animation: slidingin 1s ease-in-out;
}
@keyframes slidingin {
    from{background-position: -1000px 0px;

    }
    to{background-position: 0px 0px;

    }
}
/*Title Text*/
.Title {
    font-size: 55px;
    color: seagreen;
    transform: translateX(-50px) translateY(130%);
    text-shadow: rgb(34, 64, 48) 2px 2px;
    text-align: center;
    animation: slidingintext 1.25s ease-in-out;
}
@keyframes slidingintext {
    from {
        transform: translateX(-1500px) translateY(130%);
    }

    to {
        position: static;
        transform: translateX(-50px) translateY(130%);
    }
}
/*h2 title*/
.Subtitle {
    font-size: 20px;
    transform: translateY(-170%);
    animation: slidingintext2 1.5s ease-in-out;
}
.Subtitle3 {
    font-size: 18x;
    text-align: center;
}


@keyframes slidingintext2 {
    from {
        transform: translateX(-2000px) translateY(-170%);
    }

    to {
        position: static;
        transform: translateX(0px) translateY(-170%);
    }
}
/*this do be the back box tho*/
.backbox {
    position: relative;
    align-items: center;
    align-content: center;
    border: 10px solid rgb(45, 125, 101);
    border-radius: 35px;
    background: linear-gradient(rgba(24, 61, 57, 0.88),rgba(16, 34, 41, 0.88))
}

.Subtitle2 {
    position:relative;
    font-size:25px;
    height:40px;

    padding-bottom: 25px;

    color: #fcffad;
    text-align: center;
}

/*---------------------------ILLUSTRATION SECTION-------------------------------*/

/*box for all images*/
#artbox {
    position: relative;
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.artObj {
    display: flex;
    /* border:5px solid rgb(247, 95, 125); */

    width: 600px;
    padding-top: 50px;
    flex-direction: column;
    align-items: center;
    align-content: center;
}


/*--------------------IMAGES--------------*/
#artbox img {
    position:relative;
    padding: 15px;

    cursor: pointer;

    border:5px dashed rgb(175, 227, 190);
    border-radius: 20px;
    background-color:rgb(23, 51, 41);
    filter: drop-shadow(0px 0px 15px rgb(0, 0, 0));

    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;

}

#artbox img:hover {
    scale: 1.05;
}

.imgp {
    font-size: 20px;
    text-align: center;
    color: #fcffad;

    padding-top: 25px;
    padding-bottom: 25px;

    margin: 0px;
}
/*----------------------------POPUP--------------------------*/
#popup {
    position: fixed;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    width: 100%;
    height: 100%;
    z-index: 99;

    display: flex;
    align-items: center;
    justify-content: center;
    
    animation: boxAnimator 0.2s forwards;
    animation-timing-function: ease-in-out;

    background-color: rgba(0, 0, 0, 0);
}

#selected{
    height: 50%;

    animation: imageAnimator 0.25s forwards;
    animation-timing-function: ease-out;
}

/* popup animation */
@keyframes boxAnimator {
    0% { background-color: rgba(8, 5, 24, 0) }
    100% { background-color: rgba(8, 5, 24, 0.95) }
}

/* image grow animation */
@keyframes imageAnimator {
    0% { scale: 0.1 }
    100% { scale: 1.85 }
}
/*--------------------PROJECT BOX--------------------*/

#projectbox {
    align-items: center;
    align-content: center;
}

/*--------------------PROJECTS---------------------*/
.prObj {
    position:relative;

    margin-top: 50px;
    margin-bottom: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    

}

/*project thumbnail/embed itself */
.prItem {
    margin-bottom: 50px;
}

/*--------------------------DESC BOX-----------------*/

.descbox {
    position: center;
    align-content: center;
    align-items: center;

    text-align: center;

    width: 900px;
    margin-bottom: 25px;

    border: 5px solid rgb(45, 125, 101);
    border-radius: 20px;
    background-color:rgb(24, 61, 57);
}

.projp {
    font-size: 20px;

    margin: 25px;
}

/*---------------------------ABOUT ME SECTION-------------------------------*/

/*box for all images*/
#abtmebox {
    position: relative;
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.abtmeObj {
    display: flex;
    /* border:5px solid rgb(247, 95, 125); */

    width: 600px;
    padding-top: 50px;
    flex-direction: column;
    align-items: center;
    align-content: center;
}


/*-----------------------VERY IMPORTANT THING TRUST ME-------------------*/
#sammyBox {
    position: relative;

    padding-top: 25px;
    padding-bottom: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

#cremmy {

    position:relative;

    top: 0px;
    right: 0px;

    width: 8%;
    height: 8%;


    animation:
    3s ease-in-out 0s infinite alternate both running samX,
    3s ease-in-out 1.5s infinite alternate both running samY;
}

@keyframes samY {
    from {
        transform: translateY(-40px);
    }
    to {
        transform: translateY(40px);
    }
}

@keyframes samX {
    from {
        translate: -60px
    }
    to {
        translate: 60px
    }
}
/*-------------------------------------------------closer*/
#bottom {
    padding-top: 50px;
}