/*---------------------
    Main
----------------------*/

a, article, body, div, footer, h1, h2, h3, h4, h5, h6, hr, iframe, img, li, main, p, section, table, th, tr, td, ul, ol  { /* reset */
    margin: 0px;
    padding: 0px;
}

html {
    box-sizing:border-box;
}

*,
*:before,
*:after {
    box-sizing:inherit;
}

a {
    transition: all 0.3s ease;
    text-decoration: none;
    color: black;
}

body {
    font-family: 'Ranga', cursive;
    background: linear-gradient(270deg, #ffbb00, #00faff, #ff7f00,#0066ff,#cc00ff);
    background-size: 1000% 1000%;
    -webkit-animation: bg-transition 5s ease;
    -moz-animation: bg-transition 5s ease;
    animation: bg-transition 5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: flex;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

h1 {
	color:white;
    font-style: normal;
}

h1 b {
    animation-duration: 5s;
    font-size: 3.5rem;
}

h1 i {
    font-style: normal;
    font-size: 2.5rem;
}

h1 i:nth-of-type(1)  { color:#ffff00; }
h1 i:nth-of-type(2)  { color:#00faff; }
h1 i:nth-of-type(3)  { color:#ff7f00; }
h1 i:nth-of-type(4)  { color:#76ff00; }
h1 i:nth-of-type(5)  { color:#ff00fa; }
h1 i:nth-of-type(6)  { color:#ff00a1; }
h1 i:nth-of-type(7)  { color:#ffff00; }
h1 i:nth-of-type(8)  { color:#00faff; }
h1 i:nth-of-type(9)  { color:#ff7f00; }
h1 i:nth-of-type(10) { color:#76ff00; }
h1 i:nth-of-type(11) { color:#ff00fa; }
h1 i:nth-of-type(12) { color:#ff00a1; }
h1 i:nth-of-type(13) { color:#ffff00; }
h1 i:nth-of-type(14) { color:#00faff; }

@-webkit-keyframes bg-transition {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bg-transition {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bg-transition {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/*---------------------
    Navigation
----------------------*/
nav {
    padding:1rem;
    width:100%;
    z-index: 2;
	text-align: center;
}

nav a {
    transition: all 0.3s ease;
    color:white;
    font-size: 14px;
    display: inline-block;
    padding:10px;
}

/* Footer
----------------------*/
footer {
    color: white;
    width: 100%;
    padding:1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:1rem;
}

#icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3rem;
    padding:1rem;
}

#icons a {
    color:white;
    transition: all 0.3s ease;
    display: inline-block;
    width:3.5rem;
    height:3.5rem;
}

#icons svg {
  width:100%;
  height:auto;
  fill:#fff;
}

.ad a {
    font-size: 1rem;
    font-family:'arial';
    color:white;
    display: block;
    padding:0.5rem;
    color:white;
}

footer a:hover {
    opacity: 0.8;

}

/*  iframe */
#SOUNDCLOUD iframe {
    width: 100%;
    height:600px;
    max-width: 80vh;
    border:none;
    box-shadow: 0px 10px 10px rgba(70, 47, 68, 0.486);
}

article#SOUNDCLOUD {
    margin:0px;
    padding:0px;
    display:block;
    width:800px;
}