body {
    --card-border:  1px solid #AAA;
    --card-shadow: 5px 5px 10px rgba(69, 42, 42, 0.8);
    --card-shadow-hover: 2px 2px 5px rgba(128, 42, 42, 0.2);
}

.experience {
  display: flex;
  flex-direction: column;
}
.experience span{
    /* Photo FRAME */
    padding: 1em 2em 4em;
}
@media screen and (max-height: 520px) {
  .experience {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Default padding */
.odoo {
    padding: 2rem 2rem 3rem 6rem; /* This is applied when none of the below conditions are met */
}

/* Smaller devices (phones, tablets in portrait) */
@media (max-width: 600px) {
    .odoo {
        padding: 1rem; /* Smaller padding for smaller screens */
    }
}

/* Medium devices (tablets in landscape) */
@media (min-width: 601px) and (max-width: 900px) {
    .odoo {
        padding: 1.5rem 1.5rem 2rem 4rem; /* Slightly larger padding */
    }
}

/** Text Cards **/
article .odoo:not(:has(.experience img)) {
    border: var(--card-border);
    border-radius: 10px;
	  box-shadow: var(--card-shadow);
	  transition-duration:300ms;
    margin-bottom: 1rem;
    text-align: justify;
}
article .odoo:not(:has(.experience img)) * {
    display: inline;
}
/** Text Cards :hover **/
article .odoo:not(:has(.experience img)):hover,
article .odoo:not(:has(.experience img)):active {
	  box-shadow: var(--card-shadow-hover);
}


article .odoo:has(.experience img) {
  /*slanted rainbow background */
  background-image: linear-gradient(45deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  padding:12px 0;
  width:80%;
  margin: 5rem auto 2%;
}
article .odoo:not(:has(.experience img)) {
    background-color: white;
}

article .odoo > .experience img {
  width: 97%;
  height: auto;
  display: block;
  margin:  auto;
  padding: 5%;
  border: 6px double rgba(197,197,197,.7);
  box-shadow:
    /*inside picture frame, after double border */
    0 0 0 2.5vw rgba(193,193,194,.2) inset,

    /*inside picture frame, after double border - inset overlay*/
    0 50px 60px rgba(255,50,20,.75) inset,
    0 -50px 60px rgba(250,250,50,.75) inset,
    50px 0 60px rgba(50,20,250,.75) inset,
    -50px 0 60px rgba(250,50,250,.75) inset,

    /*outer picture frame border*/
    0 0 0 11px rgba(83, 83, 83,.7);

  opacity:.89;
}

/*** DNA COPY ***/

body {
    --card-border:  1px solid #AAA;
    --card-shadow: 5px 5px 10px rgba(69, 42, 42, 0.8);
    --card-shadow-hover: 2px 2px 5px rgba(128, 42, 42, 0.2);
}

.experience {
  display: flex;
  flex-direction: column;
}
.experience span{
    /* Photo FRAME */
    padding: 1em 2em 4em;
}
@media screen and (max-height: 520px) {
  .experience {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Default padding */
.odoo {
    padding: 2rem 2rem 3rem 6rem; /* This is applied when none of the below conditions are met */
}

/* Smaller devices (phones, tablets in portrait) */
@media (max-width: 600px) {
    .odoo {
        padding: 1rem; /* Smaller padding for smaller screens */
    }
}

/* Medium devices (tablets in landscape) */
@media (min-width: 601px) and (max-width: 900px) {
    .odoo {
        padding: 1.5rem 1.5rem 2rem 4rem; /* Slightly larger padding */
    }
}

/** Text Cards **/
 .odoo:not(:has(.experience img)) {
    border: var(--card-border);
    border-radius: 10px;
	  box-shadow: var(--card-shadow);
	  transition-duration:300ms;
    margin-bottom: 1rem;
    text-align: justify;
}
 .odoo:not(:has(.experience img)) * {
    display: inline;
}
/** Text Cards :hover **/
 .odoo:not(:has(.experience img)):hover,
 .odoo:not(:has(.experience img)):active {
	  box-shadow: var(--card-shadow-hover);
}


 .odoo:has(.experience img) {
  /*slanted rainbow background */
  background-image: linear-gradient(45deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  padding:12px 0;
  width:80%;
  margin: 5rem auto 2%;
}
 .odoo:not(:has(.experience img)) {
    background-color: white;
}

 .odoo > .experience img {
  width: 97%;
  height: auto;
  display: block;
  margin:  auto;
  padding: 5%;
  border: 6px double rgba(197,197,197,.7);
  box-shadow:
    /*inside picture frame, after double border */
    0 0 0 2.5vw rgba(193,193,194,.2) inset,

    /*inside picture frame, after double border - inset overlay*/
    0 50px 60px rgba(255,50,20,.75) inset,
    0 -50px 60px rgba(250,250,50,.75) inset,
    50px 0 60px rgba(50,20,250,.75) inset,
    -50px 0 60px rgba(250,50,250,.75) inset,

    /*outer picture frame border*/
    0 0 0 11px rgba(83, 83, 83,.7);

  opacity:.89;
}