:root {
    --card-width: 16vw;;
    --card-height: 45vh;
}

body{
    height: 100vh;
    font-family:Arial, Helvetica, sans-serif;
}
header{
    height: 3vh;
}

.note-taking-area{
    width: 25vw;
}

textarea {
    border-radius: 1em;
    width: 100%;
    background-color: #f2f2f2;
    box-shadow: 0.5em 0.5em 1.5em;
    margin-top: 0.75em;
}

.takehome{
    margin-top: 0.5em;
    text-align: center;
}

.save-text{
    border-color: #f2f2f2;
    background-color: white;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 3em;
    padding-right: 3em;
    margin-top: 0.5em;
     box-shadow: 0.5em 0.5em 1.5em;
}

.save-text:hover{
    background-color: #f8ae1a;
    box-shadow: none;
}

.back-to-info{
    margin-top: 2em;
}

.more-info{
    text-decoration: none;
}

.begin-container{
    padding-left: 0.5em;
    width: 22vw;
}

.play-instructions{
    padding-top: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 0.75em;
}

.push-play{
    text-align: center;
}

.playGame{
    padding-top: 0.5em;
    padding-left: 3em;
    padding-right: 3em;
    box-shadow: 0.5em 0.5em 1.5em;
}

.playGame:hover{
    background-color: #7df6c5;
    color: #003300;
    border: none;
    box-shadow: none;
}

.begin-container{
    margin-top: 1em;
    background-color: white;
    justify-content: center;
}

.timer-clock{
    display: flex;
    align-items: center; 
    justify-content: center;
    height: 10vh;
    border-radius: 1em;
    background-color: black;
    color: limegreen;
    font-size: clamp(1.25em, 2.25em, 2em);
    font-family: monospace;
    text-shadow: 0.15em 0.15em 0.5em;
    margin-bottom: 0.5em;
}

.timer-buttons{
    display: flex;
    align-items: center; 
    justify-content: center;
}

.timer-area{
    margin-bottom: 0.5em;
}

.timer-start:hover{
    background-color: #0a8d5b;
    color: white;
}

.timer-stop:hover{
    background-color: #ec6e22;
    color: white;
}

.timer-reset:hover{
    background-color: #3274ba;
    color: white;
}

.timer-start, .timer-stop, .timer-reset{
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-left: 0.5em;
    box-shadow: 0.5em 0.5em 1.5em;
}

.card-container{
    height: 100vh;
    width: 53vw;
    border-radius: 1em; 
    border: solid #e6e6e6;
}

.card-pos-design, .card-pos-a, .card-pos-b, .card-pos-c, .card-pos-d, .card-pos-e{
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
}


.card{
    position: absolute;
    /* use variables for card dimensions */
    height: var(--card-height); 
    width: var(--card-width);
    perspective: 1000px;
    cursor: pointer;
}

.card-inner{
   position: relative;
    width: 100%;
    height: 100%;
    text-align: center;  
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-img{
    height: 100%;
    pointer-events: none;
}

/*use the flip effect on set up and reveal faces */
.card-back{    
    transform: rotateY(180deg);
}

/* use hover to enlarge card to make it more readable for game play*/
.card:hover{
    transition: all 2s;
    transform: translate(0, 5em) scale(1.75);
    z-index: 100;
}

.card-inner{
    transform-style: preserve-3d;
    transition: transform 0.6s;    
    transform: rotateY(180deg);
} 

.card-inner-flip-it{
    transform: rotateY(180deg);
}

.release-info{
    margin-top: 0.5em;
    text-align: center;
    font-size: smaller;
}