/* ----------BASE---------- */

html{background:#000;}
body{
  background: linear-gradient(139deg, #443388 0%, #8866ff 40%, #88FF00 100%), url('./img/bg.jpg') repeat top left;
  background-blend-mode: overlay;}

h1, h1 img{
  display: block;
  margin: 0 auto;}

/* ----------RADIUS---------- */

header,
main,
.uk-card{
  border-radius: 12px;}
.uk-card-media-top{
  border-top-left-radius: 12px;
  border-top-right-radius:12px;}

.uk-modal-dialog,
.uk-modal-header{
  border-top-left-radius: 20px;
  border-top-right-radius:20px;}
.uk-modal-dialog,
.uk-modal-footer{
  border-bottom-left-radius: 20px;
  border-bottom-right-radius:20px;}


/* ----------MODAL---------- */

.uk-modal-dialog,
.uk-modal-header,
.uk-modal-body,
.uk-modal-footer{
  background: #0008;
  color: #fff;
  border: 1px solid #8888;}

.uk-modal-body dd{
  margin: 1rem 0 1rem 1rem;}

h2{
  color: #fff;
  font-size: large;}
h2>a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  aspect-ratio: 1;
  background: #8888;
  border-radius: 3rem;
  color: #86f;
  text-decoration: none;
  margin-right: 1rem;}
h2>a:hover,
h2>a:focus,
h2>a:active{
  color: #8f0;}
  }

/* ----------RESPONSIVE GRID---------- */

@media(min-width:640px){}

.qr{display: none;}

@media screen and (min-device-aspect-ratio: 1/1){
#GRID{
 display: none;
 xxxdisplay: grid;
 grid-template-rows: 50% 50%;
 grid-template-columns: 50% 50%;
 width: 90%;
 margin: 0 auto;}

xxxxxheader{
 grid-row: 1/2; grid-column: 1/2;}
main{
 grid-row: 1/3; grid-column: 2/3;}
footer{
 grid-row: 2/3; grid-column: 1/2;}

.qr{
 display:block;
 margin: auto;
 padding: 5rem;}

}

/* ----------MP3 PLAYER---------- */

iframe{
  display: block;
  width: 80%;
  height: 5rem;
  margin:0 auto; padding:0;
  position: fixed;
  bottom: 15px;
  left: 10%;
  z-index:　9999;}

/* ----------LYRIC AREA---------- */

pre{
  background: #000;
  color: #fff;
  font-size: small;
  text-wrap: wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: serif;}

/* ----------SONG LIST---------- */

.song-list{
  list-style-type: none;
  margin: 1rem auto 4rem;
  padding: 0 1rem 1rem;
  background: #000b;
  border-radius: 12px;}
.song-list>li{
  display: flex;
  flex-drirection: row;
  justify-content: flex-start;
  align-items: center;
  xwidth: 90%;
  height: 4rem;
  border-bottom: 1px solid #8888;
  margin: 0.5rem auto;
  padding: 0;}
.song-list>li>a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  aspect-ratio: 1;
  background: #8888;
  border-radius: 3rem;
  color: #86f;
  text-decoration: none;}
.song-list>li>a:hover,
.song-list>li>a:focus,
.song-list>li>a:active{
  color: #8f0;}
.song-list>li>button{
  display: inline-block;
  text-align: left;
  width: 80%;
  font-size: 1rem;
  color: #86f;
  background: transparent;
  border: none;
  padding: 1rem;}
.song-list>li>button>small{
  display: block;
  font-size: 0.9rem;
  font-family: monospace;
  color: #8f0;}
.song-list>li>button>small::before{
  content: ' - ';}

.album-art{
  display: 80%;
  border: 1px solid #fff8;
  border-radius: 12px;}
.song-icon{
  display: block;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 8px;}
.song-art{
  display: block;
  width: 80%;
  aspect-ratio: 1;
  margin: 0 auto;
  background: #000;}

.uk-overlay p{
  color: #fff;
  text-shadow: 0 0 5px #000;}

/* ----------PROFILE----------*/

.prof {
  background: #000;
  border: 1px solid #888;
  border-radius: 12px;
  width: 70%;
  margin: 1rem auto;
  padding: 1rem;}

.prof h3{
  color: #86f;
  font-size: medium;}

.prof img {
  display: block;
  width: 12rem;
  height: 12rem;
  border-radius: 12rem;
  margin: 0 auto;}

.prof-title{
  text-align: center;
  color: #8f0;
  text-shadow: 0 0 5px #fff;}

/* ----------FOOTER---------- */

footer{
  display: flex;
  height: 4rem;
  justify-content: center;
  align-items: center;}