* {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    box-sizing: border-box;    
    margin: 0;
    padding: 0;
}

h1 {
    margin-top: 2.5em;
    width: 100%;
    text-align:center;
    padding: 0 50px;
    /* Text outline and stoke effects in h1 and h2: Stroke effect in h2 Stack Overflow answer by Kyle;
    Outline effect in h1 inspo from user128511
    https://stackoverflow.com/questions/4919076/outline-effect-to-text */
    text-shadow: 0.0px 10.0px 0.02px #df9ac7, 9.8px 2.1px 0.02px #df9ac7, 4.2px -9.1px 0.02px #df9ac7, -8.0px -6.0px 0.02px #df9ac7, -7.6px 6.5px 0.02px #df9ac7, 4.8px 8.8px 0.02px #df9ac7, 9.6px -2.8px 0.02px #df9ac7, -0.7px -10.0px 0.02px #df9ac7, -9.9px -1.5px 0.02px #df9ac7, -3.5px 9.4px 0.02px #df9ac7, 8.4px 5.4px 0.02px #df9ac7, 7.1px -7.0px 0.02px #df9ac7, -5.4px -8.4px 0.02px #df9ac7, -9.4px 3.5px 0.02px #df9ac7, 1.4px 9.9px 0.02px #df9ac7, 10.0px 0.8px 0.02px #df9ac7, 2.9px -9.6px 0.02px #df9ac7, -8.7px -4.8px 0.02px #df9ac7, -6.6px 7.5px 0.02px #df9ac7, 5.9px 8.0px 0.02px #df9ac7, 9.1px -4.1px 0.02px #df9ac7, -2.1px -9.8px 0.02px #df9ac7, -10.0px -0.1px 0.02px #df9ac7, -2.2px 9.8px 0.02px #df9ac7, 9.1px 4.2px 0.02px #df9ac7, 6.1px -8.0px 0.02px #df9ac7, -6.5px -7.6px 0.02px #df9ac7, -8.8px 4.7px 0.02px #df9ac7, 2.7px 9.6px 0.02px #df9ac7, 10.0px -0.6px 0.02px #df9ac7, 1.5px -9.9px 0.02px #df9ac7, -9.3px -3.6px 0.02px #df9ac7, -5.5px 8.4px 0.02px #df9ac7, 7.0px 7.2px 0.02px #df9ac7, 8.5px -5.3px 0.02px #df9ac7, -3.4px -9.4px 0.02px #df9ac7, -9.9px 1.3px 0.02px #df9ac7, -0.8px 10.0px 0.02px #df9ac7, 9.6px 2.9px 0.02px #df9ac7, 4.9px -8.7px 0.02px #df9ac7, -7.5px -6.7px 0.02px #df9ac7, -8.1px 5.9px 0.02px #df9ac7, 4.0px 9.2px 0.02px #df9ac7, 9.8px -2.0px 0.02px #df9ac7, 0.2px -10.0px 0.02px #df9ac7, -9.7px -2.3px 0.02px #df9ac7, -4.3px 9.0px 0.02px #df9ac7, 7.9px 6.1px 0.02px #df9ac7;
    /* text-shadow: -2px -2px 0 #df9ac7, 2px -2px 0 #df9ac7, -2px 2px 0 #df9ac7, 2px 2px 0 #df9ac7; */
}

h2 {
    text-shadow: -1px -1px 0 #ffc800, 1px -1px 0 #ffc800, -1px 1px 0 #ffc800, 1px 1px 0 #ffc800;

}

.intro {
    font-size: 1em;
    text-shadow: -1px -1px 0 #cdf3d2, 1px -1px 0 #cdf3d2, -1px 1px 0 #cdf3d2, 1px 1px 0 #cdf3d2;
    margin: 0em 2em 0em 2em;
}

/* The dropdown box is based off YouTuber Mazen Salah's Step by step video
    at link: https://m.youtube.com/watch?v=lcXjEqGXv14&t=37s */

body {
    margin: 20px;
    background: rgb(157, 230, 166);
    background-image:
        linear-gradient(
            -45deg,
            transparent 75%,
            rgb(255, 194, 250)),
            linear-gradient(
            45deg,
            transparent 75%,
            rgb(255, 194, 250)),
            linear-gradient(
            -135deg,
            transparent 75%,
            rgb(255, 194, 250)),
            linear-gradient(
            135deg,
            transparent 75%,
            rgb(255, 194, 250));
    background-size: 4rem 4rem;
    background-position: 2rem 0, 2rem 0, 0 0, 0 0;
}

.container-dropdown {
    display: flex; 
    flex-direction: column;
}

.dropdown-box {
    width: 300px;
    position: relative;
}

.dropdown-box input {
    width: 100%;
    border: 1px solid rgb(62, 145, 219);
    outline: none;
    border-radius: 5px;
    padding: 3px 5px;
    color: rgv(80 80 80);
}


/* For understanding what it means to have elements with more than one class refer to 
https://stackoverflow.com/questions/13444647/css-class-definition-with-multiple-identifiers/13444826 */
.dropdown-box .selected-item {
    position: relative;
}

/* ::after is a pseudo-element 
"used to insert some content after the content of an element"
https://www.w3schools.com/css/css_pseudo_elements.asp */
.dropdown-box .selected-item::after {
    content: "";
    width: 3px;
    height: 3px;
    border: 2px solid;
    border-color: transparent rgb(65, 218, 111) rgb(65 218 111) transparent;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-70%) rotate(45deg);
}

.dropdown-box .selected-item,
.dropdown-box .selected-item input {
    cursor: pointer;
}

.dropdown-box .dropdown-content {
    box-shadow: 0 5px 15px rgb(0 0 0 / 15%); /* box-shadow black with opacity of 15% */
    border-radius: 5px;
    max-height: 240px;
    overflow: auto;
    display: none;
    position: absolute;
    z-index: 50;
    background-color: rgb(255 255 255);
    width: 100%;
}

.dropdown-box.active .dropdown-content {
    display: block;
}

.dropdown-box .dropdown-content .search-input {
    padding: 5px;
}

.dropdown-box .dropdown-content ul {
    list-style: none;
}

.dropdown-box .dropdown-content ul li {
    font-size: 0.8rem;
    padding: 2px 5px;
    cursor: pointer;
}

.dropdown-box .dropdown-content ul li.hide {
    display: none;
}

.dropdown-box .dropdown-content ul li:hover {
    background-color: rgb(245 245 245);
}

.dropdown-box .dropdown-content ul li.active {
    background-color: rgb(213 242 246);
    color: rgb(89, 89, 222);
}

/* End of dropdown CSS code based off YouTuber Mazen Salah's video */


/* From the Divya Mehra's "05_dynamically_adding_content"
https://github.com/divya-mehra/dhwebdev-s25/tree/05a4413abfbec565bc2ae32d0bd6457e10c3464f/05_changing_display_with_dropdown */

.wrapper {
    display: grid;
    /* Create Responsive CSS Grid Layouts with GRID WRAPPING
    https://www.youtube.com/watch?v=3T0gjtXRNC0&t=19s */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* was 175px for minmax */
    gap: 5px;
    justify-content: center;
    /* Perspective is for 3D effect */
        /* Moved this form .card to .wrapper; 
        it was preventing the popup from displaying */
    perspective: 1000px;
}

.filter {
    cursor: pointer;
    padding:  0.2em 0.5em;
}

.wrapper > * {
    aspect-ratio: 2/3;
    padding: 1em;
    box-sizing: border-box;
}

/* card */
/* How TO - Flip Card: https://www.w3schools.com/howto/howto_css_flip_card.asp */
  .card {
    width: 175px;
    height: 262.5px;
    padding:0px;
    margin: 10px;
    display: inline-block;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background-color: #df9ac7;
    position: relative;
  }
  
/* Transition for cards inspired by Codepen "card matching game"
by nvite 8008: https://codepen.io/nvite8008/pen/rNrwBMV */
/* Also help from ChatGPT on fixing mistakes 
    (mainly on 3D persepective of the card and trandformations)*/
  .card .card-back,
  .card .card-front {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: 0.3s ease transform;
    /* CSS Rounded Corners: https://www.w3schools.com/css/css3_borders.asp */
    border-radius: 10px;
  }
  
  .card .card-back {
    background: #f0f0f0;
    transform: rotateY(180deg);
  }
  
  .card .card-front {
    background: #da6ac6;
    /* CSS background-image Property: https://www.w3schools.com/cssref/pr_background-image.php */
    background-image: url("card-backing-montse-memory-game.png");
    background-size: cover;
    background-position: center;
  }
  
  .card.flipped .card-front {
    transform: rotateY(180deg);
  }
  
  .card.flipped .card-back {
    transform: rotateY(0deg);
  }

/* For image content to fit on the popup better */
img {
  max-width: 100%;
  max-height: 60vh;
  margin: 5px auto;
}