@media (max-width: 1100px) {
  body {
    height: 100%;
  }

  html {
    height: 100%;
  }

  .account-devices-container {
    padding-top: 10vw;
  }

  .account-device-item {
    padding: 2vw;
    border-radius: 4vw;
    width: 80vw;
    margin-bottom: 6vw;
    margin-top: 6vw;
    height: 10vw;
  }

  .account-device-item-current {
    font-size: 3vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    border: 3px solid rgb(66, 233, 0);
    border-radius: 5vw;
  }

  .account-device-item-remove {
    width: 8vw;
    padding: 2vw;
    border-radius: 4vw;
  }

  .account-device-item-title {
    font-size: 5vw;
    padding-left: 2vw;
  }

  .account-infos-item-disabled {
    border: 4px solid black;
    width: 70vw;
    height: 10vw;
    border-radius: 10vw;
    padding-left: 3vw;
    font-size: 5vw;
  }

  .account-infos-item-enabled {
    border: 4px solid black;
    width: 70vw;
    height: 10vw;
    border-radius: 10vw;
    padding-left: 3vw;
    font-size: 5vw;
  }

  .account-infos-item img {
    width: 10vw;
    margin-left: 2vw;
  }

  .account-infos-item p {
    font-size: 5vw;
    margin-top: 6vw;
  }

  .account-infos-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .account-options {
    top: 15vw;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    border-radius: 0 0 0 3vw;
  }

  .account-options-item {
    padding: 2vw;
    font-size: 5vw;
  }

  .account-options-item:hover {
    border-radius: 1vw 0 0 3vw;
  }

  .account-options-item img {
    width: 6vw;
    margin-right: 2vw;
  }

  .alert-button-cancel-text, .alert-button-confirm-text {
    border: 2px solid black;
    width: 35vw;
    height: 12vw;
    border-radius: 6vw;
    font-size: 5vw;
    margin-left: 2vw;
    margin-right: 2vw;
    color: black;
  }

  .alert-buttons img {
    margin-left: 8vw;
    margin-right: 8vw;
    width: 11vw;
    border: 2px solid black;
    border-radius: 7vw;
  }

  .alert-checkbox-option {
    font-size: 4.5vw;
  }

  .alert-checkbox-option img {
    width: 6.5vw;
    margin-right: 1.5vw;
  }

  .alert-collection-colors {
    margin-bottom: 3vw;
  }

  .alert-collection-colors span {
    width: 11vw;
    height: 11vw;
    border-radius: 8vw;
  }

  .alert-collection-color-orange {
    border: 4px solid white;
  }

  .alert-collection-color-orange:hover {
    border: 4px solid rgb(226, 121, 1);
  }

  .alert-collection-color-red {
    border: 4px solid white;
  }

  .alert-collection-color-red:hover {
    border: 4px solid rgb(172, 0, 0);
  }

  .alert-collection-color-purple {
    border: 4px solid white;
  }

  .alert-collection-color-purple:hover {
    border: 4px solid rgb(125, 0, 214);
  }

  .alert-collection-color-blue {
    border: 4px solid white;
  }

  .alert-collection-color-blue:hover {
    border: 4px solid rgb(0, 8, 165);
  }

  .alert-collection-color-green {
    border: 4px solid white;
  }

  .alert-collection-color-green:hover {
    border: 4px solid rgb(0, 119, 34);
  }

  .alert-collection-color-active {
    border: 4px solid black;
  }

  .alert-collection-delete {
    font-size: 6vw;
    margin-top: 8vw;
    margin-bottom: 2vw;
  }

  .alert-collection-delete p {
    padding: 2.5vw;
    border-radius: 6vw;
    border: 4px solid rgb(255, 255, 255);
  }

  .alert-collection-delete p:hover {
    border: 4px solid rgb(255, 0, 0);
  }

  .alert-collection-input {
    height: 10vw;
    border: 2px solid black;
    border-radius: 10vw;
    padding-left: 3vw;
    font-size: 6vw;
    margin-bottom: 6vw;
  }

  .alert-collection-input::placeholder {
    font-size: 6vw;
  }

  .alert-collection-subtitle {
    font-size: 6vw;
    margin-bottom: 3vw;
  }

  .alert-container {
    width: 70vw;
    border: 2px solid black;
    border-radius: 7vw;
    z-index: 60;
    padding: 7vw;
  }

  .alert-container-blur {
    z-index: 900;
  }

  .alert-message {
    font-weight: 400;
    font-size: 5vw;
    margin-bottom: 6vw;
    max-width: 70vw;
  }

  .alert-quiz-list {
    border: 2px solid black;
    border-radius: 3vw;
    margin-bottom: 5vw;
    max-height: 27vw;
    overflow-y: scroll;
  }

  .alert-quiz-list-item {
    font-size: 5vw;
    padding: 2vw;
    border-radius: 3vw;
  }

  .alert-title {
    font-weight: 500;
    font-size: 7vw;
    margin-bottom: 6vw;
  }

  .biblio-button {
    display: none;
  }

  .biblio-container {
    padding-bottom: 30vw;
  }

  .biblio-container a {
    font-size: 4vw;
  }

  .biblio-container img {
    width: 5vw;
    margin-left: 1.5vw;
  }

  .biblio-issue-button {
    font-size: 5.5vw;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    border-radius: 4vw;
    margin-top: 5vw;
  }

  .biblio-subtitle {
    font-size: 4vw;
  }

  .biblio-text {
    font-size: 4vw;
  }

  .biblio-title {
    font-size: 5vw;
    margin-top: 4vw;
    margin-bottom: 2vw;
  }

  .blur-container {
    inset: 0;
    z-index: 200;
    height: 100svh;
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  @supports (height: 100dvh) {
    .blur-container {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  .cards-end-count-text {
    font-size: 4vw;
    margin-top: 5vw;
  }

  .cards-infos-title {
    width: 8vw;
    margin-left: 2vw;
  }

  .header {
    height: 15vw;
  }

  .header-auth-buttons {
    width: 50vw;
  }

  .header-current-user img {
    width: 6vw;
  }

  .header-current-user p {
    font-size: 5vw;
  }

  .header-title-and-version {
    flex-direction: column;
    align-items: start;
  }

  .header-title-beta {
    font-size: 2.5vw;
    border: 1px solid black;
    border-radius: 2vw;
    padding-left: 0.7vw;
    padding-right: 0.7vw;
    margin-left: 0.7vw;
  }

  .header-title img {
    width: 15vw;
  }

  .header-title-p {
    font-size: 6vw;
  }

  .header-title-version {
    font-size: 3.5vw;
  }

  .header-user-change-item, .header-user-change-item-add, .header-user-change-item-last {
    font-size: 6vw;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
  }

  .header-user-change-item-add, .header-user-change-item-last {
    border-radius: 0 0 4vw 4vw;
  }

  .header-user-change-menu {
    border: 2px solid black;
    top: 6.3vw;
    left: -12vw;
    right: -12vw;
    padding-top: 2.5vw;
    border-radius: 4vw;
    background-color: white;
  }

  .home-trending-theme-button {
    width: 80vw !important;
    height: 15vw !important;
    border-radius: 5vw !important;
    margin-bottom: 5vw !important;
    font-size: 5vw !important;
  }

  .home-trending-theme-button img {
    width: 8vw !important;
    margin-right: 4vw !important;
  }

  .home-trending-theme-buttons {
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 5vw !important;
    margin-bottom: 5vw !important;
  }

  .incard-add-collection-menu, .incard-add-quiz-menu {
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px, solid black;
    border-radius: 0 0 4vw 4vw;
    top: 2vw;
    left: 0;
    right: 1.5vw;
    max-height: 40vw;
    overflow-y: scroll;
    padding-top: 7vw;
    margin-top: 5vw;
    background-color: white;
  }

  .incard-add-collection-menu-item {
    font-size: 5vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    border-radius: 4vw;
  }

  .incard-card {
    height: auto;
    width: 100%;
    border: 1.5px solid black;
    border-radius: 6vw;
    margin-bottom: 4vw;
    margin-top: 2vw;
  }

  .incard-card-buttons {
    flex-direction: column;
    align-items: start;
  }

  .incard-card-description {
    font-size: 4.5vw;
    margin-bottom: 4vw;
  }

  .incard-card-infos {
    overflow-y: inherit;
    overflow-x: inherit;
  }

  .incard-card-like, .incard-card-add, .incard-card-quiz-add {
    margin-bottom: 4vw;
    border: 2px solid black;
    padding: 2vw;
    border-radius: 5vw;
  }

  .incard-card-add {
    z-index: 100;
  }

  .incard-card-quiz-add {
    z-index: 10;
  }

  .incard-add-collection-menu {
    z-index: 99;
  }

  .incard-add-quiz-menu {
    z-index: 9;
  }

  .incard-card-like img, .incard-card-add img, .incard-card-quiz-add img {
    width: 8vw;
  }

  .incard-card-like p, .incard-card-add p, .incard-card-quiz-add p {
    font-size: 5vw;
    margin-left: 4vw;
  }

  .incard-card-related-carousel {
    padding: 2.5vw;
  }

  .incard-card-related-container {
    padding-top: 5vw;
    padding-bottom: 20vw;
  }

  .incard-card-related-title {
    font-size: 5vw;
  }

  .incard-card-title {
    font-size: 7vw;
    margin-bottom: 6vw;
  }

  .incard-center-container {
    flex-direction: column;
    min-height: 100%;
    width: 100%;
  }

  .incard-close-button {
    position: fixed !important;
    left: 50% !important;
    bottom: 4vw !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
    width: 12vw;
    border: 2px solid black;
    border-radius: 10vw;
    z-index: 200;
  }

  .incard-main-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .incard-note {
    border: 1px solid black;
    width: 30vw;
    height: 30vw;
    border-radius: 7.5vw;
    margin-right: 6vw;
  }

  .incard-note p {
    font-size: 3.3vw;
  }

  .incard-note-background {
    border-radius: 7.5vw;
  }

  .inquiz-answer, .inquiz-answer-current {
    width: 80vw !important;
    height: auto !important;
    border: 2px solid black !important;
    border-radius: 5vw !important;
    font-size: 5vw !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    padding-top: 2vw !important;
    padding-bottom: 2vw !important;
    margin-bottom: 4vw !important;
  }

  .inquiz-answer-right {
    border: 4px solid rgb(0, 187, 0) !important;
  }

  .inquiz-answer-wrong {
    border: 4px solid rgb(209, 0, 0) !important;
  }

  .inquiz-answers-container {
    margin-top: 10vw !important;
    height: 50vh !important;
  }

  .inquiz-leave-button {
    border: 2px solid black;
    height: 10vw !important;
    border-radius: 3vw !important;
    margin-right: 2vw !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
    color: black;
  }

  .inquiz-leave-button img {
    width: 8vw !important;
    margin-right: 3vw !important;
  }

  .inquiz-leave-button p {
    font-size: 5vw !important;
  }

  .inquiz-main-container {
    width: 100% !important;
    height: calc(100% - 15vw) !important;
    margin-top: 15vw !important;
    overflow-y: scroll !important;
  }

  .inquiz-mode-select-container {
    flex-direction: column !important;
    margin-top: 5vw;
  }

  .inquiz-mode-select-item {
    width: 70vw !important;
    height: 70vw !important;
    border: 2px solid black;
    background-color: #f0f0f0;
    border-radius: 18vw !important;
    margin-bottom: 5vw !important;
  }

  .inquiz-mode-select-item img {
    width: 12vw !important;
  }

  .inquiz-mode-select-item-description {
    font-size: 5vw !important;
    margin-left: 4vw !important;
    margin-right: 4vw !important;
  }

  .inquiz-mode-select-item-title {
    font-size: 7vw !important;
    margin-top: 4vw !important;
    margin-bottom: 4vw !important;
  }

  .inquiz-question {
    font-size: 8vw !important;
    margin-top: 5vw !important;
    width: calc(100% - 10vw) !important;
    margin-left: 10vw !important;
    margin-right: 10vw !important;
  }

  .inquiz-question-back-button img {
    width: 8vw !important;
    margin-right: 3vw !important;
  }

  .inquiz-question-submit-button, .inquiz-question-back-button {
    width: 40vw !important;
    height: 12vw !important;
    border-radius: 10vw !important;
  }

  .inquiz-question-submit-button img {
    width: 8vw !important;
    margin-left: 3vw !important;
  }

  .inquiz-question-submit-button p, .inquiz-question-back-button p {
    font-size: 4vw !important;
    color: black !important;
  }

  .inquiz-quiz-start-button {
    border: 3px solid black !important;
    width: 70vw !important;
    border-radius: 20vw !important;
    height: 15vw !important;
  }

  .inquiz-quiz-start-button img {
    width: 8vw !important;
    margin-right: 6vw !important;
  }

  .inquiz-quiz-start-button p {
    font-size: 6vw !important;
    color: black !important;
  }

  .inquiz-vertical-container {
    height: auto !important;
    justify-content: start !important;
    padding-bottom: 10vw !important;
  }

  .library-container {
    flex-direction: column;
    padding-bottom: 25vw;
  }

  .legal-main-container {
    margin-top: 20vw;
    padding-bottom: 5vw;
  }

  .legal-main-text {
    font-size: 4.5vw;
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .legal-main-text-title {
    font-size: 5.5vw;
  }

  .legal-navigation-menu {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .legal-navigation-menu-button {
    font-size: 6vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    width: 98%;
  }

  .library-item {
    width: 40vw;
    height: 40vw;
    border-width: 2px;
    margin-top: 10vw;
    border-radius: 7vw;
  }

  .library-item img {
    width: 10vw;
  }

  .library-item p {
    font-size: 4vw;
  }

  .loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .loading-screen p {
    font-size: 9vw;
    margin-bottom: 9vw;
  }

  .login-button {
    border: 3px solid black;
    border-radius: 3vw;
    margin-right: 3vw;
    margin-left: 3vw;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 5vw;
    color: black;
  }

  .login-container, .signup-container {
    border: 4px solid black;
    padding: 7vw;
    border-radius: 6vw;
    margin-top: 5vw;
    width: 70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .login-container-title, .signup-container-title {
    font-size: 8vw;
    margin-bottom: 6vw;
  }

  .login-field {
    border: 3px solid black;
    width: 85%;
    height: 9vw;
    margin-top: 5vw;
    border-radius: 8vw;
    padding-left: 3vw;
    font-size: 5vw;
  }

  .login-field::placeholder {
    font-size: 5vw;
  }

  .login-text-buttons {
    width: 90%;
    margin-top: 3vw;
    margin-bottom: 3vw;
    flex-direction: column;
  }

  .login-text-buttons p, .signup-text-buttons p {
    font-size: 5vw;
    margin-top: 2vw;
  }

  .login-validate-button, .signup-validate-button {
    width: 70%;
    height: 12vw;
    border-radius: 6vw;
    font-size: 5vw;
  }

  .login-validate-button:hover {
    border: 1.5px solid black;
  }

  .main-container, .main-container-scroll {
    position: relative;
    margin-top: 17vw;
    margin-left: 0;
    height: auto;
    padding-bottom: 25vw;
  }

  .main-container-add-collection {
    width: 8vw;
    margin-left: 3vw;
    border: 2px solid black;
    border-radius: 3vw;
  }

  .main-container-back {
    width: 8vw;
    margin-right: 2vw;
    border: 2px solid #000000;
    border-radius: 3vw;
    margin-left: 2vw;
  }

  .main-container-message {
    font-size: 4vw;
    margin-top: 15vw;
  }

  .main-container-sort {
    width: 9vw;
    margin-left: 4vw;
    border-radius: 18vw;
    padding: 0.7vw;
  }

  .main-container-title {
    font-size: 6vw;
    margin-left: 2vw;
    margin-top: 1vw;
  }

  .main-container-welcome-title {
    font-size: 8vw !important;
    margin-bottom: 8vw !important;
  }

  .names-field {
    width: 100%;
    height: 9vw;
    margin-top: 5vw;
    margin-bottom: 1.5vw;
  }

  .name-field {
    border: 3px solid black;
    border-radius: 8vw;
    font-size: 5vw;
    height: 100%;
    width: 100%;
    margin-left: 2vw;
    margin-right: 2vw;
    padding-left: 3vw;
  }

  .name-field::placeholder {
    font-size: 5vw;
  }

  .note-background {
    border-radius: 10.5vw;
  }

  .note-buttons {
    left: 3vw;
    right: 3vw;
    bottom: 3vw;
  }

  .note-like, .note-add, .note-remove {
    width: 6vw;
    padding: 1.5vw;
    border-radius: 12vw;
  }

  .note-hover, .note {
    width: 40vw;
    height: 40vw;
    border-radius: 10.5vw;
    border: 1px solid black;
    margin-top: 6vw;
  }

  .note .note-title {
    font-size: 3.6vw;
  }

  .note-hover .note-title {
    font-size: 3.6vw;
    margin-bottom: 10.5vw;
  }

  .notes-grid {
    grid-template-columns: 1fr 1fr;
  }

  .popup-cancel-button {
    border: 3px solid rgb(255, 173, 79);
    width: 30vw;
    height: 10vw;
    border-radius: 10vw;
    font-size: 5vw;
  }

  .popup-validate-button {
    border: 3px solid rgb(0, 230, 65);
    width: 30vw;
    height: 10vw;
    border-radius: 10vw;
    font-size: 5vw;
  }

  .popup-validate-button:hover, .popup-cancel-button:hover {
    border: 3px solid black;
  }

  .popup-container {
    border: 4px solid black;
    padding: 6vw;
    border-radius: 6vw;
    width: 70vw;
  }

  .popup-container-title {
    font-size: 7vw;
    margin-bottom: 6vw;
  }

  .popup-error-message {
    font-size: 5vw;
    margin-top: 3vw;
    margin-bottom: 5vw;
    text-align: center;
  }

  .popup-field {
    border: 3px solid black;
    width: 90%;
    height: 10vw;
    margin-top: 4vw;
    border-radius: 9vw;
    padding-left: 3vw;
    font-size: 5vw;
  }

  .popup-field::placeholder {
    font-size: 5vw;
  }

  .popup-info-text {
    font-size: 4vw;
    width: 90%;
  }

  .popup-main-buttons {
    width: 95%;
  }

  .popup-text-buttons {
    margin-top: 3vw;
    margin-bottom: 3vw;
  }

  .popup-text-buttons p {
    font-size: 5vw;
  }

  .quiz-add-button {
    width: calc(100vw - 12vw);
    height: 15vw;
    border: 1.5px solid black;
    border-radius: 6vw;
    margin-top: 4vw;
    margin-bottom: 6vw;
    margin-left: 4vw;
  }

  .quiz-add-button img {
    width: 8vw;
    margin-right: 4vw;
  }

  .quiz-add-button p {
    font-size: 5vw;
    color: black;
  }

  .quiz-content-container {
    margin-bottom: 25vw;
  }

  .quiz-content-list-item {
    font-size: 5vw;
    margin-bottom: 2vw;
  }

  .quiz-content-list-item-button {
    font-size: 5vw;
    margin-bottom: 2vw;
  }

  .quiz-content-list-item-button img {
    width: 10vw;
    margin-left: 3vw;
    flex-shrink: 0;
  }

  .quiz-content-title {
    font-size: 6vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
  }

  .quiz-grid {
    margin-top: 3vw;
    grid-template-columns: 1fr;
  }

  .quiz-grid-item {
    width: 88vw;
    height: 15vw;
    border: 1.5px solid black;
    border-radius: 6vw;
    font-size: 5vw;
    margin-bottom: 8vw;
  }

  .quiz-history-container {
    margin-top: 3vw;
    margin-bottom: 3vw;
    padding: 2.5vw;
  }

  .quiz-history-item {
    width: 40vw;
    height: 40vw;
    border: 1.5px solid black;
    border-radius: 8vw;
    margin-right: 4vw;
  }

  .quiz-history-item-date, .quiz-history-item-score-detail {
    font-size: 4vw;
  }

  .quiz-history-item-score {
    font-size: 9vw;
  }

  .quiz-main-buttons {
    flex-direction: column;
    justify-content: start;
    padding-bottom: 0;
    margin-top: 3vw;
    padding-left: 2.5vw;
  }

  .quiz-play-icon {
    width: 8vw;
    margin-right: 5vw;
  }

  .search-bar {
    border: 1.5px solid black;
    width: 75%;
    height: 7.5vw;
    border-radius: 7vw;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding-left: 2vw;
    font-size: 5vw;
  }

  .search-bar::placeholder {
    font-size: 3.5vw;
  }

  .search-container {
    margin-top: 15vw;
  }

  .search-error-text {
    font-size: 3vw;
    margin-top: 4vw;
  }

  .search-submit-button {
    height: 8vw;
    margin-left: 2vw;
  }

  .settings-danger-button {
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    padding-left: 3vw;
    padding-right: 3vw;
    font-size: 5vw;
    border-radius: 2vw;
    color: black;
  }

  .settings-section {
    padding-top: 20vw;
  }

  .settings-section-switch img {
    width: 12vw;
    margin-left: 6vw;
    margin-right: 6vw;
  }

  .settings-section-switch p {
    font-size: 4vw;
  }

  .settings-section-title {
    font-size: 5vw;
    margin-bottom: 3vw;
  }

  .sidebar {
    position: fixed;
    bottom: 5vw;
    left: 5vw;
    right: 5vw;
    height: 15vw;
    width: auto;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    top: auto;
    border: 1px solid black;
    border-radius: 12vw;
    background-color: white;
    z-index: 30;
  }

  .sidebar-item, .sidebar-item-current {
    width: auto;
    height: 100%;
    border-radius: 12vw;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .sidebar-item img, .sidebar-item-current img {
    width: 10vw;
    margin-bottom: 1vw;
  }

  .sidebar-item p, .sidebar-item-current p {
    display: none;
  }

  .signup-error-message {
    font-size: 4vw;
    margin-top: 3vw;
    margin-bottom: 5vw;
  }

  .signup-legal-text {
    font-size: 4vw;
    width: 90%;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }

  .sort-container-menu {
    border: 2px solid black;
    border-radius: 4vw;
    z-index: 20;
    width: 45vw;
    right: 0;
  }

  .sort-container-menu-item {
    font-size: 5vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 2vw;
    border-radius: 4vw;
  }

  .sort-container-menu-item img {
    width: 8vw;
    margin-right: 2vw;
  }

  .sort-container-menu-item-current {
    font-size: 5vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 2vw;
    border-radius: 4vw;
  }

  .sort-container-menu-item-current img {
    width: 8vw;
    margin-right: 2vw;
  }

  .subscription-item-current {
    border: 3px solid black;
    border-radius: 4vw;
    width: 90%;
    height: auto;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-bottom: 6vw;
    flex-direction: column;
  }

  .subscription-item-current img {
    width: 10vw;
    margin-right: 5vw;
  }

  .subscription-item-current p {
    font-size: 5vw;
  }

  .subscription-item-current-manage {
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 1vw;
    padding-top: 1vw;
    border-radius: 2.5vw;
    border: 3px solid #f0f0f0;
    margin-bottom: 2vw;
  }

  .subscription-item-current-manage:hover {
    border: 3px solid black;
  }

  .subscription-item {
    border: 3px solid black;
    padding: 3vw;
    width: 70vw;
    border-radius: 5vw;
    margin-bottom: 3vw;
  }

  .subscription-item-feature, .subscription-item-feature-off {
    font-size: 4vw;
    margin-bottom: 2vw;
  }

  .subscription-item-feature img, .subscription-item-feature-off img {
    width: 7vw;
    margin-right: 3vw;
  }

  .subscription-item-feature p, .subscription-item-feature-off p {
    max-width: 55vw;
  }

  .subscription-item-features {
    border-top: 3px solid black;
    padding-top: 3vw;
  }

  .subscription-item-icon {
    width: 12vw;
    margin-bottom: 2vw;
  }

  .subscription-item-price {
    font-size: 4.5vw;
    margin-bottom: 3vw;
  }

  .subscription-item-subscribe-button {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 2vw;
    padding-top: 2vw;
    border-radius: 2vw;
    border: 4px solid #f0f0f0;
    font-size: 4.5vw;
    margin-top: 3vw;
  }

  .subscription-item-subscribe-button:hover {
    border: 4px solid black;
  }

  .subscription-item-title {
    font-size: 5vw;
    margin-bottom: 2vw;
  }

  .subscription-items {
    flex-direction: column;
    height: 100%;
  }

  .subscription-main-container {
    margin-right: 5vw;
    margin-left: 5vw;
    margin-top: 5vw;
    padding-bottom: 20vw;
  }

  .subscription-title {
    font-size: 6vw;
    margin-top: 3vw;
    margin-bottom: 2vw;
  }

  .theme {
    margin-top: 5vw;
    margin-left: 6vw;
    margin-right: 6vw;
    height: 12vw;
    border-radius: 3vw;
    font-size: 4vw;
  }

  .theme-edit-button {
    width: 7vw;
    border: 2px solid black;
    border-radius: 5vw;
    padding: 0.8vw;
    right: 3vw;
  }

  .themes-grid {
    grid-template-columns: 1fr;
  }

  .tool-item {
    font-size: 4vw !important;
    width: 25vw !important;
    border: 2px solid white !important;
    border-radius: 3vw !important;
    padding-bottom: 1.5vw !important;
  }

  .tool-item:hover {
    border: 2px solid black !important;
  }

  .tool-item img {
    width: 15vw !important;
  }

  .tools-grid {
    margin-left: 2vw !important;
  }
}