/*
styling for flashcard study page
*/
body{
    display:flex;
    flex-direction: column;
    align-items: center;
    height:100vh;
    overflow: hidden;
}

/*flash card styling*/
    .cardBorder{
        width: 55%;
        height: 55%;

        margin-top:50px;

        border-radius: 100px;
        border: 3px solid;
        border-color: var(--darkBrown);
        box-shadow: inset 0px 4px 4px #00000040;

        background-color: var(--bgColor)!important;
        background-image: url("../imgs/flippyGrid.png");

        display:flex;
        justify-content: center;
    }
    .idxCard{
        position: relative;
        width:100%;
        height:100%;
        margin:auto;
        top:3%;
        
        
        /*border-radius: 100px;*/
        /*box-shadow: 0px 5px 5px #00000040;*/
        /*box-shadow: 0 4px 8px rgba(0,0,0,0.2);*/
        text-align: center;

        display:flex;
        flex-direction: column;

        transition: transform 0.6s;
        transform-style: preserve-3d;
    }
    .cardBorder p{
        margin:auto;
        margin-right: 10px;
        margin-left: 10px;
        font-size: 25px;
    }

    /*flipping animation*/
    .cardOuter{
         width: 95%;
        height: 93%;
        perspective:1000px;
    }
    .cardFront,.cardBack{
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 100px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
    }
    .cardFront{
        background-color: var(--accentLight);
    }
    .cardBack{
        background-color: var(--accentDark);
        transform:rotateY(180deg);
    }
    .cardOuter.flipped .idxCard{
        transform: rotateY(180deg);
    }

/*card nav stuff*/
    div.navFrame{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items:center;
        margin-top:15px;
    }
    .navFrame img{
        height:80px;
        cursor: pointer;
    }
    .navFrame img:hover{
        filter: brightness(.3) sepia(1) hue-rotate(135deg) saturate(100);
        cursor: pointer;
    }
    #flipBtn{
        font-size: 30px;
    }

/*
    menu
*/

    div.menu{
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow:hidden;

        width: 10%;
        
        gap: 50px;
        padding: 16px 2px;

        position: absolute;
        right:5px;
        margin-top:100px;
        

        background-color: #d8d2c3;
        border-radius: 8px;
        border: 3px solid;
        border-color: #513a2a;
        box-shadow: 0px 4px 4px #00000040;

    }
    .menu div{
        display:flex;
        flex-direction:column;
        justify-content:center;

    }
    .menu img{
        height: 40%;
        cursor: pointer;
    }
    .menu img:hover{
        filter: brightness(.3) sepia(1) hue-rotate(135deg) saturate(100);
    }
    .overlap-group {
        position: relative;
        height:80px;
    }
    .overlap-group:hover .rect2{
        cursor: pointer;
         background-color: var(--accentDark);
    }
    .overlap-group:hover .rect1{
        cursor: pointer;
         background-color: var(--accentLight);
    }


    div.rect2 {
        width: 124px;
        height: 74px;
        margin-top: -60px;
        transform: translateX(3px);
        z-index:100;
        /*transform: translate(10px,-60px);*/

        background-color: var(--accentLight);
        border-radius: 20.15px;
        box-shadow: 0px 3.22px 3.22px #00000040;
    }

    div.rect1 {
        width: 124px;
        height: 74px;
        transform: translate(-3px,0px);

        background-color: var(--accentDark);
        border-radius: 20.15px;
        box-shadow: 0px 3.22px 3.22px #00000040;
    }



/*progress menu*/
    div.progress{
        width: 20%;
        padding:5px;

        position: absolute;
        top: calc(50% - 140px);
        left:5px;
        
        background-color: #d8d2c3;
        border-radius: 8px;
        overflow: hidden;
        border: 3px solid;
        border-color: #513a2a;
        box-shadow: 0px 4px 4px #00000040;
        
    }
    .progress h1{
        text-align: center;
        text-shadow: 0px 1px 1px #00000040;
        font-size: 25px;
    }
    #deckTitleText{
        text-align: center;
        color: var(--accentDark);
        text-shadow: 0px 1px 1px #00000040;
    }
    .accuracy{
        display:none;
    }

/*logout button styling*/
    #logoutBtn{
        display:flex; 
        position:absolute; 
        bottom:10px; 
        left:5px; 
        padding:5px; 
        background-color: var(--slightHighlight); 
        border-radius: 20px;
    }
    #logoutBtn:hover{
        background-color: var(--accentLight); 
        cursor:pointer;
    }
    .currUser{
        display:none;
    }
    #logoutBtn h3,p{
        margin-right:3px;
    }
    #logoutBtn:hover h3{
        text-decoration:underline;
    }
    #logoutBtn:hover p{
        display:block;
    }