.memory-container {
    background-color: #fffbb5;
    width: 100%;
    height: 100%;
}

.memory-image-panel {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* === CARD PLACEMENT === */
.memory-cards-big, .memory-cards-middle, .memory-cards-small {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;
    margin-top: calc(var(--percentage-width) * 2);
}

.memory-cards-big {
    width: calc(var(--percentage-width) * 82);
    height: calc(var(--percentage-height) * 82);
}

.memory-cards-middle {
    width: calc(var(--percentage-width) * 66);
    height: calc(var(--percentage-height) * 82);
}

.memory-cards-small {
    width: calc(var(--percentage-width) * 95);
    height: calc(var(--percentage-height) * 82);    
}

/* === FONT === */
.memory-font-big, .memory-font-middle, .memory-font-small {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-weight: bold;
    text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
}

.memory-font-big {
    font-size: calc(var(--percentage-width) * 13);
    margin-left: calc(var(--percentage-width) * 6.65);
    margin-top: calc(var(--percentage-width) * 2);
}

.memory-font-middle {
    font-size: calc(var(--percentage-width) * 8);
    margin-left: calc(var(--percentage-width) * 4.3);
    margin-top: calc(var(--percentage-width) * 1.5);
}

.memory-font-small {
    font-size: calc(var(--percentage-width) * 8);
    margin-left: calc(var(--percentage-width) * 4.5);
    margin-top: calc(var(--percentage-width) * 1.5); 
}

.font-centering {
    margin-left: calc(var(--percentage-width) * 2.2);
}

/* === CARDS === */
.card {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: calc(var(--percentage-width) * 1);
    outline: none;
    overflow: hidden;
    border: calc(var(--percentage-width)* 0.2) solid black;
}

.card-big, .front-big, .back-big{
    width: calc(var(--percentage-width) * 20.532);
    height: calc(var(--percentage-height) * 36.5);
}

.card-middle, .front-middle, .back-middle{
    width: calc(var(--percentage-width) * 13.163);
    height: calc(var(--percentage-height) * 23.4);
}

.card-small, .front-small, .back-small{
    width: calc(var(--percentage-width) * 13.5);
    height: calc(var(--percentage-height) * 24);
}

.card:focus::after {
    background: var(--illi-light-purple);
    /*content: "";
    position: absolute;
    z-index: 1;
    border-radius: calc(var(--percentage-width)* 2);*/
}

.card-big:focus::after, .false-answer-big:focus::after, .correct-answer-big:focus::after {
    border: calc(var(--percentage-width)* 0.7) solid var(--illi-purple);
    width: calc(var(--percentage-width)* 21.35);
    height: calc(var(--percentage-height)* 38.1);         
}

.card-middle:focus::after, .false-answer-middle:focus::after, .correct-answer-middle:focus::after {
    border: calc(var(--percentage-width)* 0.5) solid var(--illi-purple);
    width: calc(var(--percentage-width)* 14);
    height: calc(var(--percentage-height)* 25.1);
}

.card-small:focus::after, .false-answer-small:focus::after, .correct-answer-small:focus::after {
    border: calc(var(--percentage-width)* 0.3) solid var(--illi-purple);
    width: calc(var(--percentage-width)* 14.4);
    height: calc(var(--percentage-height)* 25.8);
}

/* === CARD FLIP === */
.picked-card-back, .hidden {
    display: none;
}

.picked-card-front {
    display: flex;
}

/* === PICTURES/CARDS PLACEMENT/LOGIC === */
.memory-image {
    position: relative;
}

/* .card-background, .card-logo, .card-photo {
    position: absolute;
} */

.card-opacity {
    opacity: 0.3;
}

/* === CORRECT/FALSE ANSWERS === */
.card:focus::after,
.correct-answer-big:focus::after, .correct-answer-middle:focus::after, .correct-answer-small:focus::after,
.false-answer-big:focus::after, .false-answer-middle:focus::after, .false-answer-small:focus::after {
    content: "";
    position: absolute;
    z-index: 1;
    border-radius: calc(var(--percentage-width)* 1.5);
}

/* === CORRECT ANSWERS === */
.correct-card-big, .correct-card-middle, .correct-card-small {
    border: calc(var(--percentage-width)* 0.2) solid var(--illi-green); 
    box-shadow: 0px 0px 73px 23px rgba(0, 124, 31, 0.9);
}

.correct-card-big:focus::after, .correct-card-middle:focus::after, .correct-card-small:focus::after {
    background: var(--illi-light-green);
}

.correct-card-big:focus::after {
    border: calc(var(--percentage-width)* 0.7) solid var(--illi-green);
}

.correct-card-middle:focus::after {
    border: calc(var(--percentage-width)* 0.5) solid var(--illi-green);
}

.correct-card-small:focus::after {
    border: calc(var(--percentage-width)* 0.3) solid var(--illi-green);
}

/* === FALSE ANSWERS === */
.false-card-big, .false-card-middle, .false-card-small {
    border: calc(var(--percentage-width)* 0.2) solid red;
    box-shadow: 0px 0px 73px 23px rgba(255,46,46,0.9);
}

.false-card-big:focus::after, .false-card-middle:focus::after, .false-card-small:focus::after {
    background: rgba(255,46,46,0.2);
}

.false-card-big:focus::after {
    border: calc(var(--percentage-width)* 0.7) solid red
}

.false-card-middle:focus::after {
    border: calc(var(--percentage-width)* 0.5) solid red
}

.false-card-small:focus::after {
    border: calc(var(--percentage-width)* 0.3) solid red
}

.correct-cards {
    border: calc(var(--percentage-width)* 0.2) solid var(--illi-green); 
}

/* === MEMORY BUTTONS === */
.memory-buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.victory-text {
    position: relative;
    bottom: 17vw;
    font-size: 5.5vw;
    z-index: 199;
    text-align: center;
}

.memory-text {
    position: absolute;
    right: 3vw;
    bottom: 0;
    font-size: 1.5vw;
}

.memory-buttons .pause-button {
    display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 4);
	width: calc(var(--percentage-width) * 15);
	height: calc(var(--percentage-height) * 5);
	background-color: var(--illi-black);
	color: white;
	border-radius: calc(var(--percentage-height) * 1);
    bottom: calc(var(--percentage-width) * 2);
    position: absolute;
}

.pause-button:focus::after {
    border: calc(var(--percentage-width) * 0.3) solid var(--illi-black);
    content: "";
    position: absolute;
    width: calc(var(--percentage-width) * 17.5);
    height: calc(var(--percentage-height) * 10);
    border-radius: calc(var(--percentage-width) * 1);
    z-index: 1;
    border-color: rgba(45, 45, 45, 0.67);
    background: rgba(62, 62, 62, 0.206);
}