body {
    height: 100vh;
}

.app {
    height: calc(100% - 3rem);
}

.header {
    height: 3rem;
}

.start-button {
    padding: 3rem;
}

.card-picker .card {
    --card-width: 10rem;
    margin-top: 1rem
}

.card {
    position: relative;
    width: var(--card-width);
    height: calc(var(--card-width) * 1.7);
}

.card .zoom {
    width: calc(var(--card-width) * 2);
    height: calc(var(--card-width) * 1.7 * 2);
}

.theme-angel .card {
    width: calc(var(--card-width) * 3);
    height: calc(var(--card-width) * 2 * .7);
}

.theme-angel .card .zoom {
    width: calc(var(--card-width) * 3 * 2);
    height: calc(var(--card-width) * 2 * .7 * 2);
}

.zoom {
    display: none;
    position: absolute;
    left: -50%;
    z-index: 1;
    pointer-events: none;
}

.card:hover .zoom {
    display: block;
}

.card.selected {
    outline: none;
}

.card.selected span {
    display: none;
}

.desktop .card {
    margin-left: 2rem;
}

.card-picker .card {
    margin-left: 1rem;
}

.card-picker {
    --padding: 1rem;

    position: absolute;
    
    top: var(--padding);
    bottom: var(--padding);
    right: 0;

    padding-bottom: 1rem;
    padding-left: 2rem;

    width: 55vw;
    
    background-color: white;

    z-index: 1;

    overflow: scroll;
}

.close-button {
    right: 1rem;
    top: 1.5rem;
    
    z-index: 2;
}

@keyframes blink {
    from { 
        color: inherit; 
    }
    to {
      color: #FFD700;
    }
  }

.session-info {
    position: relative;
}

.session-info.loading {
    animation-name: blink;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.session-info span {
    display: none;
    color: black;
}

.session-info:hover span {
    display: block;
    position: absolute;
    right: -5rem;
}

.desktop {
    width: 100%;
    flex-grow: 1;
    max-height: 100%;
}

.desktop > * {
    max-height: 100%;
}

.desktop .card {
    --card-width: min(15vw, 18vh);
    --card-margin: 2rem;
}


/* 
  _____   ____                           _ 
 |___ /  / ___| _ __  _ __ ___  __ _  __| |
   |_ \  \___ \| '_ \| '__/ _ \/ _` |/ _` |
  ___) |  ___) | |_) | | |  __/ (_| | (_| |
 |____/  |____/| .__/|_|  \___|\__,_|\__,_|
               |_|                                                                                 
*/

.spread-3 .card:nth-child(1) {
    position: relative;
    top: -2rem;
    left: -2rem;
    transform: rotate(-10deg);
}

.spread-3 .card:nth-child(3) {
    position: relative;
    top: -2rem;
    right: -2rem;
    transform: rotate(10deg);
}

/* 
  _  _     ____                           _ 
 | || |   / ___| _ __  _ __ ___  __ _  __| |
 | || |_  \___ \| '_ \| '__/ _ \/ _` |/ _` |
 |__   _|  ___) | |_) | | |  __/ (_| | (_| |
    |_|   |____/| .__/|_|  \___|\__,_|\__,_|
                |_|                         
*/

.spread-4 .card {
    margin-bottom: 2rem;
}

.spread-4 .card:nth-child(1) {
    position: relative;
    top: 4rem;
    left: -3rem;
    transform: rotate(-15deg);
}

.spread-4 .card:nth-child(3) {
    position: relative;
    top: 4rem;
    left: 3rem;
    transform: rotate(15deg);
}

/* 
  ____    ____                           _ 
 | ___|  / ___| _ __  _ __ ___  __ _  __| |
 |___ \  \___ \| '_ \| '__/ _ \/ _` |/ _` |
  ___) |  ___) | |_) | | |  __/ (_| | (_| |
 |____/  |____/| .__/|_|  \___|\__,_|\__,_|
               |_|                            
*/

.spread-5 .card {
    margin-bottom: 1rem;
    --card-width: min(15vw, 16vh);
}

.spread-6 .card {
    margin-bottom: 3rem;
}

/* 
   __     ____                           _ 
  / /_   / ___| _ __  _ __ ___  __ _  __| |
 | '_ \  \___ \| '_ \| '__/ _ \/ _` |/ _` |
 | (_) |  ___) | |_) | | |  __/ (_| | (_| |
  \___/  |____/| .__/|_|  \___|\__,_|\__,_|
               |_|                                    
*/

.spread-6 .card:nth-child(1) {
    position: relative;
    top: 8rem;
    left: -1rem;
    transform: rotate(-20deg);
}

.spread-6 .card:nth-child(2) {
    position: relative;
    top: 2rem;
    left: -1rem;
    transform: rotate(-10deg);
}

.spread-6 .card:nth-child(4) {
    position: relative;
    top: 2rem;
    left: 1rem;
    transform: rotate(10deg);
}

.spread-6 .card:nth-child(5) {
    position: relative;
    top: 8rem;
    left: 1rem;
    transform: rotate(20deg);
}