@import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');
@import url('https://fonts.googleapis.com/css?family=Loved+by+the+King&display=swap');
@import url('https://fonts.googleapis.com/css?family=Frijole&display=swap');


/*=======================================================================================*/
/*****                    C O M M O N   T O   A L L   P A G E S                      *****/
/*=======================================================================================*/
* {
    margin: 0;
    padding: 0;
    font-family: "Amatic SC";
}

body {
    background-color:black;
    margin: 0 auto;
    padding: 0;
    border: 0;
    display: block;
}

.navbar {
    overflow: hidden;
    background-color: transparent;
    position: fixed; 
    top: 0; 
    width: 30vw; 
    border-radius: 20px;
    padding: 10px;
    z-index: 2000;
}

.navbar a {
    float: left;
    display: block;
    color:cyan;
    text-align: center;
    padding: 0px 10px 0px 15px;
    text-decoration: none;
    font-family: "Amatic SC";
    font-size: clamp(2.5rem, 1.5vw, 3.5rem);
}

.navbar a:hover {
    color: greenyellow;
}

.navbar a:active {
    color:hotpink;
}

.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

h1, h2 {
    text-align: center;
}

h1 {
    color :lightgreen;
    text-shadow: 2px 2px orange;
    font-size: 4em;
    padding: 0;
    border: 0;
    display: block;

}

h2 {
    color: lightsalmon;
    font-size: 2.5em;
    text-shadow: 2px 2px darkgreen;
    margin-top: 20px;
    margin-bottom: 10px;
}

.flex-box-container {
    margin: 10px;
    padding: 0;
    border: 0;
}

#Container2, #Container3, #Container4, #Container5, #Container6 {
    align-content: flex;
    text-align: center;
    padding: 0;
    border: 0;
}

footer p {
    font-size: 1.2em;
    color: violet;
    font-style: italic;
    text-align: center;
    margin: 20px;
}

footer a:link {
    color: violet;
}

.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

/*=======================================================================================*/
/*****                              I N D E X  .  H T M L                            *****/
/*=======================================================================================*/

#maincontainer {
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: space-evenly;
}
 
#Container1 {
    background-image: linear-gradient(black, #505, #006, black);
    margin: 10px;
    margin-bottom: 250px;
    padding: 0;
    border: 0;

    display: grid;
    place-items: center;
}

#Container1 img {
    justify-content: space-around;
    height: 80%;
    width: 80%;
    z-index: 0;
    place-items: center;
}

section {
    height: 100vh;
    background: transparent;
}

h3 {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 90%;
    transform: translateY(-50%);
    width: 100%;
    text-align: left; 
    color: rgb(226, 12, 241);
    letter-spacing: 0.2em;
    z-index: 1000;
}

h3 span {
    font-size: clamp(2rem, 5vw, 8.5rem);
    font-family: "Frijole";
    display: inline-block;
    animation: animate 3s linear infinite;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(5px);
        color: blue;
    }
    25% {
        opacity: 1;
        transform: rotateY(67.5deg);
        filter: blur(0);
        color: blue;
        text-shadow: 1px 1px black;
    }
    50% {
        opacity: 1;
        transform: rotateY(45deg);
        filter: blur(0);
        color: hotpink;
        text-shadow: 2px 2px black;
    }
    75% {
        opacity: 1;
        transform: rotateY(22.5deg);
        filter: blur(0);
        color: darkmagenta;
        text-shadow: 3px 3px black;
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0);
        color: purple;
        text-shadow: 4px 4px black;
    }
}

h3 span:nth-child(1) { animation-delay: .5s; }
h3 span:nth-child(2) { animation-delay: .5s; }
h3 span:nth-child(3) { animation-delay: 1s; }
h3 span:nth-child(4) { animation-delay: 1s; }
h3 span:nth-child(5) { animation-delay: 1s; }
h3 span:nth-child(6) { animation-delay: 1s; }
h3 span:nth-child(7) { animation-delay: 1.5s; }
h3 span:nth-child(8) { animation-delay: 1.5s; }
h3 span:nth-child(9) { animation-delay: 1.5s; }
h3 span:nth-child(10) { animation-delay: 1.5s; }
h3 span:nth-child(11) { animation-delay: 1.5s; }

/*=======================================================================================*/
/*****                          A B O U T   M E  .  H T M L                          *****/
/*=======================================================================================*/

#Container1a {
    display: flex;
    margin-top: 25vh;
    margin-bottom: 25vh;
    padding: 10px;
    height: 50vh;
}

#aboutmecontainer {
    background-image: linear-gradient(black,#505, black, black,  black,  #505, black);
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: space-evenly;
    place-items: center;
}

#aboutme  {
    display: block;
    margin-top: 7vh;
    height: 50%;
    width: 50%;
}

#aboutme img {
    margin-top: 150px;
    background-image: radial-gradient(black,purple);
    border-radius: 50px;
    box-shadow: 10px 10px 100px purple;
}

#bio {
    font-size: clamp(1rem, 5.5vw, 2rem);
    margin-right: 3%;
    margin-left: 2%;

    color: cyan;
    text-shadow: 2px 2px blue;
    font-family: "Loved by the King";
    line-height: 1.65em;
}

/*=======================================================================================*/
/*****                             M U S I C  .  H T M L                             *****/
/*=======================================================================================*/

#Container2 {
    background-image: linear-gradient(black,#030, black);
    margin-bottom: 20vh;
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
}

#audio-link {
    box-shadow: 10px 10px 30px lightgreen;
    transition: background-color 1s, transform .5s;
}

#audio-link:hover {
    transform: rotate(360deg);
    box-shadow: 10px 10px 30px hotpink;
    filter: invert();
    }

#audio-link:active img {
    color: pink;
    background-color: purple;
    transform: rotate(360deg);
    filter: invert();
}

.img1 {
    height: 350px;
    width: 350px;
    margin: 30px;
}

.img2 {
    height: 200px;
    width: 200px;
    margin: 30px;
}

.img3 {
    height: 125px;
    width: 125px;
    margin: 30px;
}

/*=======================================================================================*/
/*****                            V I D E O S  .  H T M L                            *****/
/*=======================================================================================*/

#Container3 {
    background-image: linear-gradient(black,#005, black);
    padding: 20px;
    border: 0;
    margin-bottom: 20vh;
}

/*=======================================================================================*/
/*****                            C R E E P S  .  H T M L                            *****/
/*=======================================================================================*/

#Container4 {
    background-image: linear-gradient(black,#505, black);
    padding: 20px;
    border: 0;
    margin-bottom: 20vh;
}

#Container4 img {
    margin: 20px;
    height: 30%;
    width: 30%;
}

#Container4 img:hover {
    filter: invert()
}

/*=======================================================================================*/
/*****                             P O E M S  .  H T M L                             *****/
/*=======================================================================================*/

#Container5, #Container5a, #Container5b {
    background-image: linear-gradient(black,#409, black);
    padding: 20px;
    border: 0;
    margin-bottom: 20vh;
}

#Container5 p, #Container5a p, #Container5b p { 
    color: aqua;
    font-size: clamp(1rem, 2.5vw, 2rem);
    text-align: left;
    text-shadow: 2px 2px blue;
    font-family: "Loved by the King";
}

#Container5 button {
    background-color: transparent;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    color:orangered;
    text-shadow: 1px 1px darkcyan;
    font-size: 2em;
}

#Container5 button:hover {
    color: lightsalmon;
    font-size: 2.7em;
    text-shadow: 1px 1px darkgreen;
}

#Container5 p {
    line-height: 1.2em;
    margin-left: 45%;
}

#Container5a p {
    line-height: 1.2em;
    margin-left: 40%;
}

#Container5b p {
    line-height: 1.2em;
    margin-left: 30%;
}

.poem {
    justify-self: center;   
}

/*=======================================================================================*/
/*****                            P H O T O S  .  H T M L                            *****/
/*=======================================================================================*/

#Container6 {
    background-image: linear-gradient(black, black,#390, #390, black);
    padding: 20px;
    border: 0;
    margin-bottom: 480px;
}

#Container6 img {
    height: 30%;
    width: 30%;
    margin: 30px;
}

#Container6 img:hover {
    filter: invert()
}