StyleSheet1.css

html, body{
    height: 100%;
    background-color: black;
}

* {
    margin: 0;
    padding: 0;
}

#menuHead {
    padding: 1%;
    font-family: 'Courier New';
    font-size: large;
    font-weight: 700;
    background-color: darkblue;
    border: 2px solid black;
}

#container {
    background-size: cover;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    border: 2px solid black;
}

    #card.flip {
        transform: rotateX(180deg);
    }

    @keyframes swipeRight {
        from{transform: skewX(0);}
        to{transform: skewX(-180deg);}
    }

    @keyframes swipeLeft {
        from{transform: skewX(0);}
        to{transform: skewX(180deg);}
    }

    @keyframes swipeDown {
        0%{transform: translate(0);}
        48%{transform: translateY(200vw);}
        49%{transform: translateY(200vh);}
        50%{transform: translateX(200vw);}
        51%{transform: translateY(-200vh);}
    }

    #card.swiperight{
        animation: swipeRight 0.7s ease-in-out 0s;
    }

    #card.swipeleft{
        animation: swipeLeft 0.7s ease-in-out 0s;
    }

    #card.swipedown{
        animation: swipeDown 0.7s ease-in-out 0s;
    }


#word {
    background-image: url(img/flag.jpg);
    background-size: 100% 100%;
    backface-visibility: hidden;
    overflow: hidden;
    padding: 13% 0 0 0;
    color: wheat;
    text-shadow: 2px 2px 4px black;
    font-size: 250%;
    font-weight: 800;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: inherit;
}

#flipside {
    background-image: url(img/flag2.jpg);
    background-size: 100% 100%;
    backface-visibility: hidden;
    overflow: hidden;
    padding: 13% 0 0 0;
    color: wheat;
    text-shadow: 2px 2px 4px black;
    font-size: 200%;
    font-weight: 800;
    transform: rotateX(180deg);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: inherit;
}

#arrows{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    position: fixed;
    top: 10rem;
}

#arrows *{
    width: 10%;
}

#arrowRight{
    transform: rotate(180deg);
}


#transcription {
    color: wheat;
    border: unset;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#transcription.active{
    display: none;
}

#topPanel {
    border: unset;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    position: relative;
    bottom: 95%;
}

    #topPanel * {
        width: 8%;
        border: unset;
        padding: 0 2% 0 2%;
    }


#panel {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    top: 8%;
}

    #panel * {
        width: 100%;
        padding: 5% 0 5% 0;
        text-shadow: 1px 1px 2px grey;
        font-size: 100%;
        font-family: 'Courier New';
        font-weight: 700;
        border: 2px solid black;
    }

#know{
    background-color: green;
}

#doubt{
    background-color: yellow;
}

#dontKnow{
    background-color: red;
}


#menu {
display: none;
flex-direction: column;
}

    #menu * {
        margin: 5%;
        padding: 5%;
        font-family: 'Courier New';
        font-size: large;
        font-weight: 700;
        border: 2px solid black;
    }

#favouriteList{
    background-color: darkgoldenrod;
}

#unknownList {
    background-color: red;
}

#doubtfulList {
    background-color: yellow;
}

#knownList {
    background-color: green;
}

@media only screen and (min-width: 750px){
    #container {
        width: 60%;
        background: unset;
    }

    #menu * {
        margin: 2%;
    }

}