/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
    box-sizing: border-box;
}

html {
    color: white;
    font-family: helvetica, sans-serif;
    font-size: 16px;
}

html,
body {
    margin: 0;
        background-image: url('https://ezrakie.neocities.org/bg.png');
    background-repeat: repeat;
    background-color: #020222;
    animation: moveBackground 60s linear infinite;
    color: white;
    font-family: helvetica, sans-serif;
}

header,
footer {
    /* centers header and footer content horizontally and vertically */
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: white;
    font-family: helvetica, sans-serif;
}

nav,
aside,
article {
    padding: 1rem;
}


nav, aside {
    background-color: transparent;
    width: 30vw;
    min-width: 600px;
    border: 0px transparent; 
}

/*****************
Grid Formatting  
*****************/

/*Put Mobile CSS here first*/

header{
    grid-area:header;
    width:70vm;
}

article {
    grid-area:article;
}

nav{
    grid-area:nav;
    margin-left: auto;
    margin-right: auto;
    border: 0px transparent; 
    
}

aside {
    grid-area:aside;
    margin-left: auto;
    margin-right: auto;
    border: 0px transparent; 
}

footer {
    grid-area:footer;
}

/*MOBILE DEVICES*/
#wrapper{
    display:grid;
    height: 100vh;
    grid-template-areas:"header"
                        "nav"
                        "article"
                        "aside"
                        "footer";
    grid-template-rows: 1fr, 2fr, 10fr, 2fr, 1fr;
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}

/*TABLET*/
@media screen and (min-width:760px){
    #wrapper{
        grid-template-areas:"header header"
                            "nav article"
                            "aside aside"
                            "footer footer";
        grid-template-rows: 1fr, 10fr, 1fr, 1fr;
        grid-template-columns: 30%, auto;
    }
}
/*DESKTOP*/
@media screen and (min-width:900px){
    #wrapper{
        grid-template-areas:"header header header"
                            "nav article aside"
                            "footer footer footer";
        grid-template-rows: 1fr, 10fr, 1fr;
        grid-template-columns: 20%, auto, 20%;
    }
}

.cent {
    text-align: center;
}


h1 {
  text-shadow:
    1px 1px 0px #FFC800;
}

iframe {
    display: block;
    width: 400px;
    height: 400px;
    margin: auto;
}

a:link {
  color: #FFC800;
  background-color: transparent;
  text-decoration: none;
}

.banner {
  display: block;
  margin: auto;
  width:100%;
  height:auto;
  max-width: 900px;
}

.albumcover {
    display: block;
    width: 100px;
    height: 100px;
    margin: auto;
}

.littleicon {
    height: 20px;
    margin: auto;
    margin-bottom: -5px;
    animation: iconanim 5s infinite;
}

.circleicon {
    height: 30px;
    margin: auto;
    margin-bottom: -9px;
    animation: iconanim 5s infinite;
}

.small {
    font-size: 12px;
}

.applemusic {
    height: 30px;
    margin: auto;
    margin-bottom: -5px;
    animation: iconanim 5s infinite;
}

a:visited {
  color: #FFE68E;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0%;
    }
}

@keyframes iconanim {
	0% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
    100% {
		transform: rotate(-10deg);
	}
}
@keyframes open {
  0% {opacity: 0; margin-top: -30px}
  100% {opacity: 1; margin-top: 0px}
}

details[open] summary ~ * {
  animation: open .5s ease-in-out;
}