body {

  /* ============================================================= */
  /*
  /* Main Styles
  /*
  /* ============================================================= */
  /* 
  /* This only styles the elements shown on the page.
  /* 
  /* Some CSS knowledge is going to be needed to style these
  /* elements further. If you're just looking for a swatch and
  /* font swap, then you'll only need to edit the variables below.
  /*
  /* ============================================================= */
  /* Primary Color
  ================================================================ */
  --cd-primary-color: #8FB7D4;
  --cd-primary-text-color: #fff;

  /* ============================================================= */
  /* Secondary Color
  ================================================================ */
  --cd-secondary-color: #939799;
  --cd-secondary-text-color: #fff;

  /* ============================================================= */
  /* Backgrounds
  ================================================================ */
  --cd-body-background-color: #f8f8f8;
  --cd-content-background-color: #ffffff;
  --cd-faded-background-color: #f8f8f8;

  /* Background Extras */
  --cd-body-background-image: url(/assets/wallpaper2.png);

  /* ============================================================= */
  /* Text
  ================================================================ */
  --cd-body-text-color: #303030;
  --cd-faded-text-color: #575757;

  /* ============================================================= */
  /* Borders
  ================================================================ */
  --cd-border-color: rgba(0, 0, 0, 0.125);
  --cd-border-width: 1px;
  --cd-border-style: solid;
  --cd-border-radius: 1rem;

  /* ============================================================= */
  /* Navbar
  ================================================================ */
  --cd-navbar-background-color: #42333f;
  --cd-navbar-brand-color: var(--cd-primary-color);
  --cd-navbar-brand-color-hover: var(--cd-secondary-color);
  --cd-navbar-text-color: var(--cd-content-background-color);
  --cd-navbar-link-color: var(--cd-navbar-text-color);
  --cd-navbar-link-color-hover: var(--cd-primary-color);
  --cd-navbar-font-family: var(--cd-header-font-family);

  /* ============================================================= */
  /* Main Fonts
  ================================================================ */
  --cd-body-font-family: 'Montserrat', sans-serif;
  --cd-header-font-family: 'Comfortaa', sans-serif;
  
  /* ============================================================= */
  /* Rarities
  ================================================================ */

  --cd-rarity-standard-bg: #d58353;
  --cd-rarity-standard-txt: #fcf4ed;

  --cd-rarity-unusual-bg: #e0bb68;
  --cd-rarity-unusual-txt: var(--cd-rarity-standard-txt);
  
  --cd-rarity-rare-bg: #69b34e;
  --cd-rarity-rare-txt: var(--cd-rarity-standard-txt);

  --cd-rarity-mutation-bg: #36454F;
  --cd-rarity-mutation-txt: var(--cd-rarity-standard-txt);

  --cd-rarity-epic-bg: #8c4eb3;
  --cd-rarity-epic-txt: var(--cd-rarity-standard-txt);


  /* ============================================================= */
  /* Compatibilites
  ================================================================ */

  --cd-compatibility-mobilefriendly-bg: #69b34e;
  --cd-compatibility-mobilefriendly-txt: #fcf4ed;

  --cd-compatibility-browseronly-bg: #e0bb68;
  --cd-compatibility-browseronly-txt: var(--cd-compatibility-mobilefriendly-txt);


  /* ============================================================= */
  /* Code Types
  ================================================================ */

  --cd-codetype-html-bg: #4eaeb3;
  --cd-codetype-html-txt: #fcf4ed;

  --cd-codetype-css-bg: #b34e9d;
  --cd-codetype-css-txt: var(--cd-codetype-html-txt);

  --cd-codetype-js-bg: #b3704e;
  --cd-codetype-js-txt: var(--cd-codetype-html-txt);


  /* ============================================================= */
  /*
  /* Optional Styles
  /* These are just for extra easy styling
  /*
  /* ============================================================= */
  /* Navbar Dropdown 
  ================================================================ */

  /* Background */
  --cd-navbar-dropdown-background-color: var(--cd-navbar-background-color);
  --cd-navbar-dropdown-background-hover: var(--cd-primary-color);

  /* Link/Text */
  --cd-navbar-dropdown-link-color: var(--cd-navbar-link-color);
  --cd-navbar-dropdown-link-color-hover: var(--cd-primary-text-color);

  /* Divider */
  --cd-navbar-dropdown-divider: rgba(255, 255, 255, .12);
  --cd-navbar-dropdown-border-radius: 0 0 var(--cd-border-radius) var(--cd-border-radius);


  /* ============================================================= */
  /* Footer
  ================================================================ */

  /* Background */
  --cd-footer-background-color: var(--cd-navbar-background-color);

  /* Link/Text */
  --cd-footer-text-color: var(--cd-navbar-text-color);
  --cd-footer-link-color: var(--cd-navbar-link-color);
  --cd-footer-link-color-hover: var(--cd-navbar-link-color-hover);


  /* ============================================================= */
  /* Link
  ================================================================ */

  --cd-link-text-color: #4c8ebd;
  --cd-link-text-color-hover: var(--cd-secondary-color);


  /* ============================================================= */
  /* HR
  ================================================================ */

  --cd-hr-border-width: var(--cd-border-width);
  --cd-hr-border-color: var(--cd-border-color);
  --cd-hr-border-style: var(--cd-border-style);


  /* ============================================================= */
  /* Pagination
  ================================================================ */

  /* Background */
  --cd-pagination-background-color: transparent;
  --cd-pagination-background-hover: transparent;

  /* Text */
  --cd-pagination-text-color: var(--cd-faded-text-color);
  --cd-pagination-text-color-hover: var(--cd-primary-color);

  /* Border */
  --cd-pagination-border-radius: var(--cd-border-radius);
  --cd-pagination-border-width: 0;
  --cd-pagination-border-style: var(--cd-border-style);
  --cd-pagination-border-color: var(--cd-border-color);
  --cd-pagination-border-color-hover: var(--cd-primary-color);


  /* ============================================================= */
  /* Cards
  ================================================================ */

  /* Background */
  --cd-card-background-color: var(--cd-content-background-color);
  --cd-card-header-background-color: var(--cd-card-background-color);

  /* Text */
  --cd-card-header-font-family: var(--cd-header-font-family);

  /* Border */
  --cd-card-border-width: var(--cd-border-width);
  --cd-card-border-style: var(--cd-border-style);
  --cd-card-border-color: var(--cd-border-color);
  --cd-card-border-radius: var(--cd-border-radius);


  /* ============================================================= */
  /* Button
  ================================================================ */

  /* Background */
  --cd-button-background-color: var(--cd-primary-color);
  --cd-button-background-color-hover: var(--cd-secondary-color);

  /* Text */
  --cd-button-text-color: var(--cd-primary-text-color);
  --cd-button-text-color-hover: var(--cd-secondary-text-color);

  /* Border */
  --cd-button-border-width: var(--cd-border-width);
  --cd-button-border-style: var(--cd-border-style);
  --cd-button-border-color: var(--cd-button-background-color);
  --cd-button-border-color-hover: var(--cd-button-background-color-hover);
  --cd-button-border-radius: var(--cd-border-radius);


  /* ============================================================= */
  /* Input
  ================================================================ */

  /* Background */
  --cd-input-background-color: var(--cd-faded-background-color);

  /* Text */
  --cd-input-text-color: var(--cd-faded-text-color);

  /* Border */
  --cd-input-border-width: var(--cd-border-width);
  --cd-input-border-style: var(--cd-border-style);
  --cd-input-border-color: var(--cd-border-color);
  --cd-input-border-color-hover: var(--cd-primary-color);
  --cd-input-border-radius: var(--cd-border-radius);
  

}


/* ============================================================= */
/* General Page Styles
/* ============================================================= */

body {

  /* Global Text */
  color: var(--cd-body-text-color);
  font-family: var(--cd-body-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Global Background */
  background-color: var(--cd-body-background-color);
  background-image: var(--cd-body-background-image);
  background-position: center;
  background-size: 200px;
  background-attachment: fixed;

}


/* ============================================================= */
/* Plain Links
/* ============================================================= */

a,
a:visited {
  color: var(--cd-link-text-color);
  transition: color .2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: var(--cd-link-text-color-hover);
  text-decoration: none;
}

/* ============================================================= */
/* Navbar
/* ============================================================= */
.navbar {
  background-color: var(--cd-navbar-background-color) !important;
  font-family: var(--cd-navbar-font-family) !important;
  z-index: 2000;
}

.navbar .navbar-brand {
  color: var(--cd-navbar-brand-color) !important;
  font-size: 2rem;
  margin-left: 20px;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: var(--cd-navbar-brand-color-hover) !important;
}

@media only screen and (max-width: 600px) {
  .navbar .navbar-brand {
  margin-left: unset;
  }
}

.navbar .navbar-nav .nav-link {
  color: var(--cd-navbar-link-color) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: var(--cd-navbar-link-color-hover) !important;
}

.navbar .navbar-toggler {
  color: var(--cd-navbar-link-color) !important;
  border: none !important;
}

.navbar .nav-link {
  display: flex;
  align-items: center;
}

.navbar .nav-link-icon {
  font-size: .5rem;
  margin-left: .25rem;
}


/* ============================================================= */
/* Dropdowns
/* This is for navbar dropdowns only
/* ============================================================= */

.navbar .dropdown-menu {
  color: var(--cd-navbar-dropdown-link-color) !important;
  background-color: var(--cd-navbar-dropdown-background-color) !important;
  border-radius: var(--cd-navbar-dropdown-border-radius) !important;
  border: none;
  margin-top: 0;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  display: block !important
}

.navbar .dropdown-divider {
  border-top: 1px solid var(--cd-navbar-dropdown-divider) !important;
}

.navbar .dropdown-item,
.navbar .dropdown-item-text {
  color: var(--cd-navbar-dropdown-link-color) !important;
  transition: color .2s ease, background .2s ease;
}

.navbar .dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
  color: var(--cd-navbar-dropdown-link-color-hover) !important;
  background-color: var(--cd-navbar-dropdown-background-hover) !important;
}

.navbar .dropdown-header {
  color: var(--cd-navbar-dropdown-link-color-hover) !important;
}


/* ============================================================= */
/* Footer
/* ============================================================= */

.footer {
  background-color: var(--cd-footer-background-color) !important;
  color: var(--cd-footer-text-color) !important;
}

.footer a,
.footer a:visited {
  color: var(--cd-footer-link-color) !important;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
  color: var(--cd-footer-link-color-hover) !important;
}


/* ============================================================= */
/* Pagination
/* ============================================================= */

.page-link {
  transition: color .2s ease, background .2s ease, border .2s ease;
  border-width: var(--cd-pagination-border-width) !important;
  border-style: var(--cd-pagination-border-style) !important;
}

.page-link,
.page-item.disabled .page-link {
  color: var(--cd-pagination-text-color) !important;
  background-color: var(--cd-pagination-background-color) !important;
  border-color: var(--cd-pagination-border-color) !important;
}

.page-item.active .page-link,
.page-link:hover,
.page-link:focus,
.page-link:active {
  color: var(--cd-pagination-text-color-hover) !important;
  background-color: var(--cd-pagination-background-hover) !important;
  border-color: var(--cd-pagination-border-color-hover) !important;
}

/* Keeps users from accidentally highlighting */
.page-link {
  cursor: pointer;
  user-select: none;
}

/* Fixes my jank nav/pagination hybrid */
.nav .pagination .page-item:first-child .page-link {
  border-radius: 0 !important;
  border-left: 0 !important;
}

.nav .pagination .page-item:last-child .page-link {
  border-radius: 0 !important
}

.nav .page-item:first-child .page-link {
  border-radius: var(--cd-pagination-border-radius) 0 0 var(--cd-pagination-border-radius) !important;
}

.nav .page-item:last-child .page-link {
  border-radius: 0 var(--cd-pagination-border-radius) var(--cd-pagination-border-radius) 0 !important
}


/* ============================================================= */
/* Multi Select Fixes
/* ============================================================= */

.bootstrap-select > .dropdown-toggle.bs-placeholder, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cd-body-text-color) !important;
}

.dropdown-menu {
  border-radius: var(--cd-border-radius) !important;
  background-color: var(--cd-faded-background-color) !important;
  color: var(--cd-body-text-color) !important;
}

.dropdown-item {
  color: var(--cd-body-text-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.selected {
  background-color: var(--cd-primary-color) !important;
  color: var(--cd-primary-text-color) !important;
}


/* ============================================================= */
/* Card
/* ============================================================= */

.card {
  background-color: var(--cd-card-background-color) !important;
  border-width: var(--cd-card-border-width) !important;
  border-style: var(--cd-card-border-style) !important;
  border-color: var(--cd-card-border-color) !important;
  border-radius: var(--cd-border-radius) !important;
}

.card-header {
  background-color: var(--cd-card-header-background-color) !important;
  border-bottom-color: var(--cd-card-border-color) !important;
  border-bottom-width: var(--cd-card-border-width) !important;
  border-bottom-style: var(--cd-card-border-style) !important;
  font-family: var(--cd-card-header-font-family) !important;
  border-radius: calc(var(--cd-border-radius) - 1px) calc(var(--cd-border-radius) - 1px) 0 0 !important;
}

.card-footer {
  background-color: var(--cd-card-header-background-color) !important;
  border-top-color: var(--cd-card-border-color) !important;
  border-top-width: var(--cd-card-border-width) !important;
  border-top-style: var(--cd-card-border-style) !important;
  font-family: var(--cd-card-header-font-family) !important;
  border-radius: 0 0  calc(var(--cd-border-radius) - 1px) calc(var(--cd-border-radius) - 1px) !important;
}



/* ============================================================= */
/* Buttons & Badges
/* ============================================================= */

.btn {
  border-style: var(--cd-button-border-style) !important;
  border-width: var(--cd-button-border-width) !important;
  border-radius: var(--cd-button-border-radius) !important;
}

.btn.btn-primary,
.badge.badge-primary {
  color: var(--cd-button-text-color) !important;
  background-color: var(--cd-button-background-color) !important;
  border-color: var(--cd-button-border-color) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
a.badge.badge-primary:hover,
a.badge.badge-primary:focus,
a.badge.badge-primary:active {
  color: var(--cd-button-text-color-hover) !important;
  border-color: var(--cd-button-border-color-hover) !important;
  background-color: var(--cd-button-background-color-hover) !important;
  box-shadow: none !important;
}

/* ============================================================= */
/* Input
/* ============================================================= */

.form-control {
  background-color: var(--cd-input-background-color) !important;
  color: var(--cd-input-text-color) !important;
  border-width: var(--cd-input-border-width) !important;
  border-style: var(--cd-input-border-style) !important;
  border-color: var(--cd-input-border-color) !important;
  border-radius: var(--cd-input-border-radius) !important;
}

.form-control:focus,
.form-control:active {
  background-color: var(--cd-input-background-color) !important;
  border-color: var(--cd-input-border-color-hover) !important;
}


/* ============================================================= */
/* Scrollbar
/* ============================================================= */

@media (min-width: 992px) {
  body::-webkit-scrollbar-track {
    background-color: var(--cd-faded-background-color);
    border-width: 0px !important;
  }

  body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body::-webkit-scrollbar-thumb {
    background-color: var(--cd-primary-color);
  }

  body::-webkit-scrollbar-corner,
  body::-webkit-resizer {
    background-color: var(--cd-border-color);
  }
}


/* ============================================================= */
/* Misc
/* ============================================================= */

.text-primary {
  color: var(--cd-primary-color) !important;
}

.bg-faded {
  background-color: var(--cd-faded-background-color) !important;
}

.bg-reset {
  background-color: var(--cd-content-background-color) !important;
}

.text-muted {
  color: var(--cd-faded-text-color) !important;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: var(--cd-navbar-font-family) !important;
}

hr {
  border-top-color: var(--cd-hr-border-color) !important;
  border-top-width: var(--cd-hr-border-width) !important;
  border-top-style: var(--cd-hr-border-style) !important;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

.img-thumbnail {
  border-radius:  var(--cd-border-radius) !important;
  border-color: var(--cd-border-color) !important;
}

/* Fix any border radiuses that were messed from before */
.rounded {
  border-radius: var(--cd-border-radius) !important
}

.rounded-circle {
  border-radius: 100%;
}

.rounded-0 {
  border-radius: 0 !important;
}


/* ============================================================= */
/* Loading
/* ============================================================= */

/* Fades container in on load so its not as jarring */
.softload {
  opacity: 0;
}

.softload.active {
  opacity: 1;
  transition: opacity 0s ease;
}

/* Fades container in on load so its not as jarring */
.hardload {
  opacity: 0;
}

.hardload.active {
  opacity: 1;
  transition: opacity 0s ease;
}

/* Specifically for the body */
#charadex-body {
  display: none;
}

#charadex-body.active {
  display: block;
}


/* ============================================================= */
/* Chee's Tweaks
/* ============================================================= */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-container {
  min-height: calc(100vh - 105px);
  padding: 1rem;
  -ml-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

@media (min-width: 768px) {
  #main-container {
    padding: 5rem 1.5rem;
  }
}

/* Remove ugly box shadow */
button:focus,
.page-link:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove margin from last paragraphs */
p:last-child {
  margin-bottom: 0 !important;
}

/* Small container for more compact view */
.container {
  max-width: 1800px !important;
}

/* ============================================================= */
/* Custom Classes
/* ============================================================= */

/* Prevents awkward load in stutter */
#charadex-gallery .list .card-body {
  min-height: calc(200px + 2.5rem);
}

#charadex-gallery .list .card-body img {
  max-height: 200px;
}

.cd-gallery-card {
  min-height: calc(175px + 2.5rem);
}

.cd-gallery-card > img {
  max-height: 175px !important;
}

.cd-profile-image-container > img {
  max-height: 700px;
}

/* Traits */
.cd-traits-scroll {
  max-height: 200px;
  overflow-y: auto;
}

/* Prompts */
.cd-prompt-background {
  background-position: center;
  background-size: contain;
  background-repeat:no-repeat;
  min-height: 200px;
}

/* Makes sure your text formatting is preserved from the sheet */
/* Best for large areas like notes */
.cd-text-pre {
  white-space: break-spaces;
}

/* For the hero image in the index */
.cd-hero-title {
  color: var(--cd-primary-color);
  background-color: var(--cd-faded-background-color);
  border-radius: var(--cd-border-radius);
  font-family: var(--cd-header-font-family);
  display: flex;
  padding: 1.5rem;
  min-height: 250px;
  font-weight: 800;
  font-size: 2.5rem;
}

@media (min-width: 768px) {
  .cd-hero-title {
    letter-spacing: 2px;
    font-size: 5rem;
  }
}

@media only screen and (max-width: 600px) {
.cd-hero-title {
  min-height: 120px;
}
}


/* ============================================================= */
/* Rarity
/* ============================================================= */

.badge-standard {
  background-color: var(--cd-rarity-standard-bg);
  color: var(--cd-rarity-standard-txt);
}

.badge-unusual {
  background-color: var(--cd-rarity-unusual-bg);
  color: var(--cd-rarity-unusual-txt);
}

.badge-rare {
  background-color: var(--cd-rarity-rare-bg);
  color: var(--cd-rarity-rare-txt);
}

.badge-mutation {
  background-color: var(--cd-rarity-mutation-bg);
  color: var(--cd-rarity-mutation-txt);
}

.badge-epic {
  background-color: var(--cd-rarity-epic-bg);
  color: var(--cd-rarity-epic-txt);
}


/* ============================================================= */
/* Compatibility
/* ============================================================= */

.badge-mobilefriendly {
  background-color: var(--cd-compatibility-mobilefriendly-bg);
  color: var(--cd-compatibility-mobilefriendly-txt);
}

.badge-browseronly {
  background-color: var(--cd-compatibility-browseronly-bg);
  color: var(--cd-compatibility-browseronly-txt);
}


/* ============================================================= */
/* Code Type
/* ============================================================= */

.badge-html {
  background-color: var(--cd-codetype-html-bg);
  color: var(--cd-codetype-html-txt);
}

.badge-css {
  background-color: var(--cd-codetype-css-bg);
  color: var(--cd-codetype-css-txt);
}

.badge-js {
  background-color: var(--cd-codetype-js-bg);
  color: var(--cd-codetype-js-txt);
}


/* ============================================================= */
/* Nova's Tweeks
/* ============================================================= */

@media only screen and (max-width: 600px) {
  #commissionspage_title, #bookmarkspage_title, #todopage_title, #tonetagsmasterlist_title, #tonetags_title, #statuses_title {
  font-size: 2.5rem !important;
  }
}

@media only screen and (max-width: 600px) {
  #jovalancustoms_header {
  font-size: 1.5rem !important;
  }
}

@media only screen and (max-width: 600px) {
  #jovalanform_header, #tradingcards_header {
  font-size: 2rem !important;
  }
}

#nubreolanbtn { 
  border-radius:100% !important;
}

@media only screen and (max-width: 600px) {
  #sidebaricon {
  max-width: 320px !important;
  min-height: 320px !important;
  }
}

@media only screen and (max-width: 600px) {
  #mewwo {
  height: 50px !important;
  }
}

@media (min-width: 768px) {
  #sidebaricon {
  max-width: 210px !important;
  min-height: 210px !important;
  }
}

@media only screen and (max-width: 600px) {
  #recentposts_namedate {
  font-size: 0.63rem;
  }
}

@media only screen and (max-width: 600px) {
  #recentposts_icon {
  margin-right: 15px;
  margin-left: -3px;
  width: 40px;
  height: 40px;
  }
}

@media only screen and (max-width: 600px) {
  #recentposts_icon > .card {
  width: 40px !important;
  height: 40px !important;
  }
}

@media only screen and (max-width: 600px) {
  #recentposts_text {
  font-size: 0.7rem;
  }
}

img[src=""] {
  display: none;
}

/* ============================================================= */
/* Commission Gallery
/* ============================================================= */

.commission-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.commission-gallery-item {
  flex: 1 1 calc(33.333% - 5px);
}

.commission-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}


/* ============================================================= */
/* Pop-Up Magic
/* ============================================================= */

.modal__img {
    max-width: 60%;
    height: auto;
    display: block;
    margin-right: auto;
}

.modal {
    max-width: 700px;
    width: 85%;
    height: auto;
    position: fixed;
    top: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    background: #ffffff;
    display: none;
}

.modal.show {
    display: block
}

#close {
    cursor: pointer;
    color: #000000;
    position: absolute;
    top: 0;
    font-size: 25px;
    right: 0;
    padding: 1rem;
    margin-right: 10px;
}

.modal__title {
    margin-top: 12px;
    font-size: 2rem;
}

.modal__paragraph {
    font-size: 16px;
    font-weight: 400;
}

.modal__container {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


/* styling modal on them smaller screens */

@media only screen and (min-width: 768px) {
    .modal__container {
        flex-direction: row;
        padding: 2rem;
        text-align: left;
    }
    .modal__img {
        max-width: 50%
    }
}

@media only screen and (max-width: 500px) {
    .modal__title {
        font-size: 1.5rem;
    }
    .modal__img {
        max-width: 80%
    }
    .modal__container {
    padding: 1.5rem;
    }
}