@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

@keyframes move_animation {
    0% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
    100% { transform: translateY(-5%); }
}

@keyframes pulse_animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.23); }
    100% { transform: scale(1); }
}

@keyframes fade-out_animation {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.move-up-and-down {
    animation-name: move_animation;
    animation-duration: 1000ms;
    transform-origin:50% 50%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.pulse {
    animation-name: pulse_animation;
    animation-duration: 600ms;
    transform-origin:50% 50%;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.fade-out {
    animation-name: fade-out_animation;
    animation-duration: 1300ms;
    animation-timing-function: ease-out;
    transform-origin:50% 50%;
    animation-iteration-count: 1; 
    opacity: 0;
}

body {
    font-family: "Press Start 2P";
    background-color: #000000;
    color: #d8d8d8;
    user-select: none;
}

.clickable {
    cursor: pointer;
}

.no-opacity {
    opacity: 0;
}

.hidden {
    display: none;
}

.title-section {
    width: 100%;
    text-align: center;
    padding-top: 45px;
    font-size: 40px;
}

.instructions {
    font-size: 20px;
    padding-top: 25px;
    /* Do we need width, height? */
}

.header {
    width: 100%;
    height: 50px;
    text-align: center;
    padding-top: 45px;
}

.power-count {
    font-size: 40px;
}

.potion-container {
    width: 100%;
}

.score-change-container {
    display: flex; 
    justify-content: space-between;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.score-change {
    width: 33%;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 40px;
    min-width: 12px;
    text-align: center;
    height: 20px;
    font-size: 30px;
}

.potion-img-container {
    display: flex; 
    justify-content: space-between;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.potion {
    width: 33%;
    /*padding-bottom: 33%;*/
    margin-top: 15px;
    margin-left: 60px;
    margin-right: 60px;
    min-width: 12px;
}

.disabled-img {
    opacity: .3;
}

.door-container {
    width: 100%;
    margin-top: 70;
    display:flex;
}

.door {
    width: 200px;  
    height: 200px;    
    margin-left: auto;
    margin-right: auto;
}

#gameOverSection {
    font-size: 40px;
    width: 100%;
    height: 50px;
    text-align: center;
}

.refresh-button {
    width: 200px;
    padding-top: 20px;
}

.potion-descriptions {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    width: 600px;
}

table { 
    border-collapse: collapse; 
} 

td { 
    text-align:left; 
    border: 1px solid black; 
    padding: 10px;
} 

.right {
    text-align: right;
}

.blue {
    color: #2050bc;
}

.purp {
    color: purple;
}

.green {
    color: green;
}

.red {
    color: red;
}