button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}


#mainHTML {
    display: flex;
    justify-content: center;
    height: 100%;
    background-color: #93BFC6;
    overflow: hidden;
}

#titleText {
    text-align: center;
    font-size: 8vw;
    padding-top: 2vh;
    padding-bottom: 1vh;
}

#sideBar {
    position:absolute; 
    background-color: grey; 
    height: 100vh; 
    width: 0vw; 
    overflow: hidden;
    z-index: 1000;
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #566e72;
    padding-bottom: 2vh;
    width: 100vw;
}

#gifImage {
    position: absolute;
    margin-top: 40vh;
    background-image: url('../images/slugbugDriving.gif');
    width: 80vw;
    height: 35vh;
}

.noClickCard {
    display: flex;
    border: black solid 4px;
    padding: 50px;
    font-size: 1vw;
    white-space: nowrap;
    width: 89.5%;
    justify-content: center;
    background-image: linear-gradient(white, grey);
    margin-left: 4vw;
}

.cardList {
    display: flex;
    margin-top: 7vh;
}

.horizontalFlex {
    flex-direction: row;
}

.verticalFlex {
    flex-direction: column;
    justify-content: space-around;
}

.card {
    display: flex;
    border: black solid 4px;
    padding: 50px;
    font-size: 1vw;
    white-space: nowrap;
    width: 89.5%;
    justify-content: center;
    background-image: linear-gradient(white, grey);
    margin-left: 4vw;
}

.card:active {
    background-image: linear-gradient(grey, grey);
}

.cardWords {
    justify-content: center;
    font-size: 3vw;
    overflow: hidden;
}

@-webkit-keyframes carMovementAway{
    from{left:0vw;}
    to{left:110vw;}
}

@-webkit-keyframes carMovementBack{
    from{left:-75vw;}
    to{left:0vw;}
}

@-webkit-keyframes sideBarOpen{
    from{width: 0vw;}
    to{width: 70vw;}
}

@-webkit-keyframes sideBarClose{
    from{width: 70vw;}
    to{width: 0vw;}
}