.card,.spell-card {width: 200px;height: 250px;border-radius: 5px;border: 1px solid lightgray;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 8px;margin: 8px;position: relative;background-color: #fff;}.card__title h2 {font-size: 20px;text-align: center;padding-top: 5px;font-family: "PT Serif",serif;}.card__photo {width: 180px;height: 180px;background-image: url("../../../assets/images/default.jpg");background-size: cover;background-position: center center;cursor: pointer;position: absolute;bottom: 8px;}.card__back {width: 200px;height: 180px;border-radius: 5px;background-image: -webkit-gradient(linear, left bottom, left top, from(#d0dadc), color-stop(#dce3e6), color-stop(#e9ecef), color-stop(#f5f5f7), to(#fff));background-image: linear-gradient(to top, #d0dadc, #dce3e6, #e9ecef, #f5f5f7, #fff);position: absolute;bottom: 0;padding: 8px;border-left: 1px solid lightgray;border-right: 1px solid lightgray;border-bottom: 1px solid lightgray;}.card__list {list-style: none;text-transform: capitalize;line-height: 1.4;text-align: center;}.card__hidden {display: none;}.spell-card {height: auto;}.spell-card__title h2 {font-size: 20px;text-align: center;padding-top: 5px;font-family: "PT Serif",serif;margin-bottom: 10px;cursor: pointer;}.spell-card__info {width: 100%;text-align: left;border-top: 1px solid lightgrey;padding: 8px;}.spell-card__hidden {display: none;}.header {color: white;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 100vh;background-image: url("../images/wallpaper.jpg");background-repeat: no-repeat;background-size: cover;}.header .search__input {height: 35px;padding: 8px;font-size: 20px;width: 40vw;border-radius: 5px;margin: 15px;font-family: "PT Serif",serif;}.trigger-button {z-index: 1;height: 50px;width: 50px;background-color: #fff;border: 1px solid lightgrey;position: fixed;top: 0;left: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.trigger-button__icon {color: grey;}.close-button {height: 50px;width: 50px;background-color: #fff;border: 1px solid lightgrey;position: fixed;top: 0;left: -50px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-transition: left ease 0.8s;transition: left ease 0.8s;}.close-button__icon {color: grey;}.nav {background-color: #fff;color: black;width: 200px;position: fixed;top: 0;left: -200px;-webkit-transition: left ease 0.8s;transition: left ease 0.8s;}.nav__list {list-style: none;padding: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}.nav__list--item {height: 35px;border-top: 1px solid lightgrey;width: 100%;padding: 8px 8px;cursor: pointer;font-family: "PT Serif",serif;font-size: 16px;}.nav a {text-decoration: none;color: black;}.nav__open {-webkit-transform: translateX(200px);transform: translateX(200px);z-index: 2;}.nav__open--button {-webkit-transform: translateX(250px);transform: translateX(250px);}.result-section,.spell-section {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding-top: 30px;background-color: #eee;}.modal {min-height: 350px;width: 60vw;background-color: white;border-radius: 5px;border: 1px solid lightgrey;z-index: 5;opacity: 1;padding: 20px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;text-align: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: absolute;top: 50vh;left: 50vw;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.modal h2 {margin: 15px;}.modal__photo {width: 180px;height: 180px;background-image: url("../../../assets/images/default.jpg");background-size: cover;background-position: center center;margin: 30px auto;padding: 0;}.modal__icon {position: absolute;top: 10px;right: 15px;margin-bottom: 15px;}.modal__icon--repeat {position: absolute;top: 18px;left: 15px;margin-bottom: 15px;}.modal .sorting_hat {cursor: pointer;}.modal__hidden {display: none;}*,*::before,*::after {margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}body {height: 100vh;overflow-x: hidden;font-family: "PT Serif",serif;}