/* Set variables */
:root{
    --banner-border-color: rgb(158, 145, 97);  /* top and bottom borders of the banner */
    --body-color: rgb(247, 226, 151);
    --vp-color: #5d5638;             /* view port background color */

    --fs-xl: clamp(3.1vw, 2vw + 1rem, 3.2vw);
    --fs-600: 2rem;
    --fs-400: 1rem;

    --step--2: clamp(0.69rem, calc(0.59rem + 0.52vw), 0.96rem);
    --step--1: clamp(0.83rem, calc(0.69rem + 0.72vw), 1.20rem);
    --step-0: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem);
    --step-1: clamp(1.20rem, calc(0.94rem + 1.32vw), 1.88rem);
    --step-2: clamp(1.44rem, calc(1.09rem + 1.76vw), 2.34rem);
    --step-3: clamp(1.73rem, calc(1.26rem + 2.35vw), 2.93rem);
    --step-4: clamp(2.07rem, calc(1.45rem + 3.10vw), 3.66rem);
    --step-5: clamp(2.49rem, calc(1.67rem + 4.08vw), 4.58rem);
    --step-6: clamp(2.99rem, calc(1.92rem + 5.34vw), 5.72rem);
/* End variables */
}

/* Resets */
*, *::before, *::after {
    box-sizing: border-box;
}

h1 h2 h3 ul p {
    margin: 0 0;
    padding: 0 0;
}

main h1  {
    font-size: var(--step-3);
}

section h1  {
    font-size: var(--step-3);
    /* margin-bottom: 5rem; */
}


p{
        font-size: clamp(1.1em, 1vw + 1rem, 1.5rem);
}

a   {
    text-decoration: none;
}

body {
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    background-color: var(--body-color);
}

.bold  {
    font-weight: bold;
}

img    {
    max-width: 100%;
}

.item-pic  {
    width: 75%;
    object-fit: fill;
    margin-inline: auto;
}

.banner  {
    background-color: #000;
    border-top: 1.25em solid var(--banner-border-color);
    /* border-bottom: 1.25em solid var(--banner-border-color); */
    width: 100%;
    margin-inline: auto;
    padding: 0 0 0em 0em;
    gap: .5em;
}

.banner__heading    {
    font-size: var(--step-0);
    color: crimson;
    text-align: center;
    margin: .5em 0 .5em 0;
}

.banner__pics   {
    width: clamp(50%, 40rem, 50rem) ;
    width: 100%;
}

.banner__pics img  {
    width: 22%;
}

.logo   {
    display: block;
    color: crimson;
    font-family: 'Satisfy', cursive;
    width: 50%;
    font-size: var(--step-2);
    margin-top: 2%;
    text-align: center;
    line-height: 1.75rem;
    ;
}

.logo,
.banner__pics {
    margin-inline: auto;
}

.logo_offset  {
    padding-left: 2em;
}

/* MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */
@media screen and (max-width: 600px) {
    .logo {
        font-size: var(--step-1);
        
    }

    .row{
        flex-direction: column;
        /* display: block; */
        /* text-align: center; */
        /* font-size: .5rem; */
    }

    .logo_offset  {
        padding-left: 0;
    }
    
}
/* MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */

.pics{
    text-align: center;
    object-fit: fill;
}


.section    {
    display: inline-block;
    align-items: flex-start;
    gap: 10px;
}

 /* Add background color to the top navigation */
 .topnav {
    background-color: var(--banner-border-color);
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    /* color: #f2f2f2; */
    text-align: center;
    padding: 0px 0px;
    text-decoration: none;
    font-size: 1.75vw;
    font-weight: 600;
  }

  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: var(--body-color);
    color: black;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: var(--body-color);
    color: black;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

   /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    /* Removes all links except the firs one on small screens */
    /* .topnav a:not(:first-child) {display: none;}  */

      /* Removes all links on small screens */
    .topnav a {display: none;}

    .topnav a.icon {
      float: right;
      display: block;
      font-size: 1rem;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      font-size: 1rem;
    }
  } 



main {
   /* width: 80%; */
   /* margin: 0 auto; */
   width: min(100% - 2rem, 900px);
   margin-inline: auto;
}


.left   {
    width: 100%;
    align-self: start;
    border: 3px solid blue;
}

.right  {
    flex-grow: 1;
}

.center {

    text-align: center;
    /* margin: 1rem auto; */
    /* margin-top: 2rem; */
    /* margin-bottom: 2rem; */
}




/* #nav*/ a:link		{ 
    color:#000000;
    padding: 0 14px 3px 14px;
}
/* #nav*/ a:visited	{ 
    color:#000000;
    padding: 0 14px 3px 14px;
}

/* #nav*/ a:hover { 
    color: #fff;
    margin: 0 0;
    padding: 0 14px 3px 14px;
    border-radius: 10px 10px 0 0;
}

/* #nav */ a:active	{ 
    color:#000000;
    padding: 0 14px 3px 14px;
}

.active {
    color: #fbfafa;
    margin: 0 0;
    background-color: var(--body-color);
    padding: 0 14px 3px 14px;
    border-radius: 10px 10px 0 0;
}

table  {
   margin-top: 2rem;
}

td:first-child {
   font-weight: 700;
   justify-content: flex-start;
   padding-right: 1.5rem;
}

.footer {
    font-family: 'Satisfy', cursive;;
    text-align: center;
    padding-top: 2em;
    font-weight: 800;
    line-height: 0.5em;
}

/* .rule   {
    margin: 0 auto;
    background-color:#000;
    width: 50%;
    height: 1px;
} */

/* ------ LITTER STYLES GRID -------- */
/* .container  {
    margin: 5rem auto;
    width: min(90%, 75rem);
    display: grid;
    grid-template-columns: 30% 70%; */
    /* border: solid black; */
    /* grid-template-columns:
        repeat(auto-fit, minmax(15rem, 1fr)); */
    /* grid-auto-flow: column; */

   /*  column-gap: 2em;
}

.item_left   {
    /* max-width: 50%; */
    /* justify-self: center; */
    /* align-content: baseline; */
/* } */

/* .item_right   {
   margin: 1em auto;
}


.card__img   {
    width: 190%;
    aspect-ratio: 1.5/2;
    object-fit: scale-down;
}

@media (max-width: 420px) {
    .container {
        grid-template-columns: none;
    }
    .right{
        padding: 0;
    }
    table   {
        font-size: 0.75rem;
    };

    h2{
       text-align: center;
    }
} */


/* ------ LItTER STYLES FLEX ----==- */

.sire-dam-container  {
    margin: 2ch auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    gap:clamp(.5rem, 1rem, 3vw);
    font-size: clamp(.75rem, .1rem, 3vw);
    /* border:solid 2px red; */
    
}

.picture    {
    display: block;
    margin: 0 auto;
    /* border: solid black; */
}

table   {
    margin: 0 auto;
    font-size: clamp(1vw, 10vw + 1rem 5rem);
        flex: 1 1 50ch;
    }

table>td {
    font-size: clamp(1rem, 10vw + 1rem, 5rem);
}

.content    {
    margin: 0 auto;
    font-size: clamp(.75rem, .1rem, 3vw);
    flex: 1 1 50ch;
    /* border:solid red; */
}

.content>p{
    font-size: 1rem;
}

.reverse    {
    flex-direction: row-reverse;
}

.rule   {
    margin: 2em auto;
    background-color:#000;
    width: 50%;
    height: 2px;
}


.gallery {
    display: grid;
    grid-template-columns: 
        repeat(auto-fit, minmax(5rem,1fr));
        gap: 1rem;
}


.card__name {
    color: white;
}
.litter-para  {
    width: min(100% - 2rem, 900px);
    margin-inline: auto; 
}

/* Style contact page */
.title {
    margin: auto;
    text-align: center;
}

/* Tributes, Girls and Boys page styling */

.wrapper  {
    padding: 1em;
    display: grid;
    width: min(100% - 2rem, 900px);
    /* width: min(90%, 75rem); */
    /* grid-template-columns: 1fr 1fr 1fr */
    grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1em;
    margin: 0 auto;
    /* border: 3px solid black; */
}

.wrapper img  {
    max-width: 100%;
}

.name  {
    text-align: center;
    display: block;
}

.puppy_gallery  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* column-gap: 1rem; */
}

.puppy_card_left {
    grid-column-start: 1;
    grid-column-end: 2;
    justify-self: center;

}

.puppy_card_right {
    grid-column-start: 2;
    grid-column-end: 3;
    justify-self: center;
}

.card__img   {
    width: 100%;
    aspect-ratio: 1.5/2;
    object-fit: scale-down;
    
}

/* Carousel Styles */
.carousel {
    width: 20vw;
    min-width: 15em;
    height: 25vh;
    position: relative;
    margin-inline: auto;
    border: 4px solid violet
  }
  
  .carousel > ul {
    margin: 0;
    list-style: none;
  }
  
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
  }
  
  .slide > img {
    display: block;
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
    object-position: center;
  }
  
  .slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
  }
  
  .carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 3rem;
    top: 50%;
    /* transform: translateY(-50%); */
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(0, 0, 0, .1);
  }
  
  .carousel-button:hover,
  .carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
  }
  
  .carousel-button:focus {
    outline: 1px solid black;
  }
  
  .carousel-button.prev {
    left: 0rem;
  }
  
  .carousel-button.next {
    right: 0rem;
  }

  .item-desc  {
    padding: 0 3rem;
    width: min(100% - 2rem, 900px);
    margin-inline: auto;
    border: 1px solid black;
  }

/* MMMMMMMcheck container settingMMMMMMMMMMMMMMM */
@media screen and (min-width: 620px) {
     .container  {
        display: flex;
        border: solid black;
    }
    .row  {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    .row-reverse  {
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .item  {
        flex-grow: 1;
        flex-basis: auto;
    } */

    .carousel  {
        width: 75%;
        min-width: none;
    }

    .carousel-button  {
        display: none;
    }

    .slide  {
        opacity: 1;
        position: relative;
    }

   ul {
        display: flex;
        flex-direction: row;
        padding: 0;
        gap: 20px;

    }
}

/* MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */

/* new contact page style */
.wrap{
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
    justify-content:start;
    margin-inline: auto;
}

.wrap :first-child {
    width: 12ch;
    flex: 0 1 auto;
    font-weight: 700;
}

.wrap > *   {
    margin-left: 0;
    margin-top: 1em;
}

.pictures  {
    display: flex;
}



.grid_even_columns{
    /* margin: 0 auto; */
    display: grid;
    row-gap: .5rem;
    column-gap: 5rem;
    grid-template-columns: 1fr 1fr;
}

.flow img, video{
    border: solid red .5rem;
    border-radius: 1rem;
    border-style: inset;
}

.flow   {
    /* border: solid black 2px; */
    justify-content: center;
}