body{margin:0;font-family:"Roboto","Helvetica","Arial",sans-serif}

.flip-card{width:100%;height:400px;display:inline-block;perspective:1500px}.flip-card.flipInPosition .flip-card-back{right:0}.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform 0.8s;transform-style:preserve-3d}.flip-card .flip-card-inner.rotate{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:1rem;overflow:hidden}.flip-card-front:hover,.flip-card-back:hover{cursor:pointer}.flip-card-front img,.flip-card-back img{width:100%;height:100%}.flip-card-back{transform:rotateY(180deg);right:125%}

.title{text-align:center;margin:.5rem 0;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:600}.title-container{margin-bottom:1rem;font-size:1.5rem}.card-container{width:100%;max-width:400px;margin:auto;cursor:pointer}.card-container img{width:100%}.archetypes-modal .flip-card{max-width:450px;height:100%}.archetypes-modal .archetypes-content-container{height:85vh;display:flex;flex-direction:column;align-items:center}@media screen and (max-width: 680px){.archetypes-modal .title-container{font-size:1.2rem;margin-bottom:0.2rem}.archetypes-modal .archetypes-content-container{width:80%;padding:1rem}.archetypes-modal .archetypes-content-container .flip-card{width:100%}}

.word-randomizer{border:1px dashed #F699BE;padding:.25rem .5rem}.input-box{padding:0.25rem 0.5rem;width:75%;border:1px solid #F699BE}.input-box:focus{border:1px solid #F699BE}.poy-logo-container{display:flex;align-items:center;justify-content:center;margin-top:1.5rem}.poy-logo-container .poy-logo{width:150px}.input-box-container{display:flex;margin-top:.25rem}.input-box-container .input-box{flex:1}.poy-content-container.advanced .box-container{margin-top:1.5rem}@media screen and (max-width: 1000px){.MuiStack-root.poy-content-container{flex-direction:column}}

.button-container{text-align:center;margin:1rem 0}.card-placeholder{margin:0 .5rem .5rem;cursor:pointer;transition:.5s}.card-placeholder:hover{-webkit-box-shadow:-1px 0px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow:-1px 0px 5px 0px rgba(0,0,0,0.75);box-shadow:-1px 0px 5px 0px rgba(0,0,0,0.75)}.what-if-card-list-container{width:24%}@media screen and (max-width: 680px){.what-if-modal .what-if-modal-content{width:95%;height:400px}.what-if-modal .what-if-modal-content .flip-card{width:100%}.what-if-modal .what-if-card-list-container.card{width:50%}}