/* original code: Color Palette - Flexbox Fridays 2 by Lincoln Loop https://codepen.io/team/lincolnloop/pen/QwQwza */

body{
    font-family:'Poppins', sans-serif;
    font-size:2vw;
    font-weight:400;
    margin:0;
    padding:0;
    background-color:#ff00ab;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='84' style='fill:black;font-size:42px;'><text y='50%'>🎸</text></svg>") 16 0, auto;
}

.trail{
    position:absolute;
    height:10em; width:10em;
    border-radius:50%;
    background:#ffc1ea;
    z-index:-1;
}

h1{
    font-weight:900;
    font-size:10vw;
    margin-top:-0.1em;
    margin-bottom:0;
    padding:0.25em;
    text-align:center;
    color:#ffffff;
}

h2{
    font-weight:700;
    font-size:5vw;
    margin:0;
    padding:0.25em;
    text-align:center;
    color:#ffffff;
}

h3{
    font-weight:500;
    font-size:3vw;
    margin:0;
    padding:0.25em;
    text-align:center;
    color:#ffffff;
}

a:link{
    text-decoration:none;
    color:inherit;
}

a:visited{
    color:#ffffff;
}

a:hover{
    color:#3a00e7;
    text-decoration:underline;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='120' style='fill:black;font-size:60px;'><text y='50%'>🔗</text></svg>") 16 0, auto;
}

a:active{
    color:#3a00e7;
}

::-moz-selection{
    background:#9a0067;
  }
  
::selection{
    background:#9a0067;
}
  
*{
    box-sizing:border-box; 
}
  
.concert-list {
    display:flex;
    flex-direction:column;
    height:100vh;
}
  
.concert{
    display:flex;
    flex-direction:column;
    flex:1 0 10em;  
    box-shadow:0 0 30px #424242;
    overflow:hidden;
    padding:1em;
    color:#ffffff;
    transition:flex-basis 500ms ease-in-out;
}
  
.concert:hover{
    flex-basis:80%;
}
  
.concert:hover .details{
    opacity:1;
}
  
.name{
    font-weight:600;
}
  
.details{
    margin:0;
    padding:0;
    list-style:none;
    opacity:0;
    transition:opacity 500ms ease-in-out;
    display:grid; 
    grid-template-columns:repeat(1, 1fr);
    grid-template-rows:repeat(auto, 1fr);
    grid-column-gap:0.25em;
    grid-row-gap:0.25em; 
    margin:0.5em;
    align-content:left;
    overflow:scroll;
}
  
.details img{
    width:100%;  
}
  
@media (min-width:800px){
    .concert-list{
        flex-direction:row;
    }
    .concert{
        flex-shrink:1;
    }
}