body{
    background-color: #121212;
    font-family: poppins;
    color: white;
    padding: 10px;
    padding-top: 3em;
    height: 100%;
}

a{
    text-decoration: none;
    color: white;
    font-size: 20px;
}

header{
    grid-area: header;
}

main{
    grid-area: main;
}

footer{
    grid-area: footer;
}

h1{
    margin: 0px;
    font-size: 40px;
}

h2{
    margin: 0px;
}

h3{
    margin: 0px;
    font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;

}

li{
  list-style: none;
}

iframe{
    width: 100%;
    border: none;
    border-radius: 10px;
    height: 100%;
}

button{
  display: flex;
  border-radius: 50%;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0px;
  margin: 0px;
}

.carousel-button{
  padding: 10px 20px;
  background-color: #1D1D1D;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.container-nav-desktop{
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
  margin-bottom: 2em;
}

button:hover {
  background-color: #333;
}

.grid-container-body{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(3,auto);
    grid-template-areas:
    "header"
    "main"
    "footer";
    gap: 10px;
}


.flex-container-logo-name{
    display: flex;
    align-items: center;
}

.grid-container-dashboard-top{
    display: grid;
    grid-template-columns: repeat(9, 1fr) minmax(80px, 1fr)  minmax(80px, 1fr)  minmax(80px, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
    "steps-dashboard steps-dashboard steps-dashboard readiness-dashboard readiness-dashboard level-dashboard level-dashboard mood-dashboard mood-dashboard dog-dashboard dog-dashboard dog-dashboard"
    "temp-dashboard temp-dashboard location-dashboard location-dashboard location-dashboard level-dashboard level-dashboard mood-dashboard mood-dashboard dog-dashboard dog-dashboard dog-dashboard";
    gap: 10px;
    margin-bottom: 10px;
}

.grid-container-dashboard-bottem{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* This allows proper scaling */
    grid-template-rows: auto;
    grid-template-areas:
    "graph-dashboard map-dashboard timeline-dashboard";
    gap: 10px;
}

.medium-logo{
  margin-left: 10px;
  width: 50px;
}

.steps-dashboard {
    grid-area: steps-dashboard;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  
  .readiness-dashboard {
    grid-area: readiness-dashboard;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  
  .level-dashboard {
    grid-area: level-dashboard;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  
  .mood-dashboard {
    grid-area: mood-dashboard;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  
  .dog-dashboard {
    grid-area: dog-dashboard;
    display: flex;
    flex-direction: column;
    align-items: end;
  }
  
  .temp-dashboard {
    grid-area: temp-dashboard;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  
  .location-dashboard {
    grid-area: location-dashboard;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  
  .graph-dashboard {
    grid-area: graph-dashboard;
    position: relative;
  }
  
  .map-dashboard {
    grid-area: map-dashboard;
  }
  
  .timeline-dashboard {
    grid-area: timeline-dashboard;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .standard-cell{
    background-color: #1D1D1D;
    border-radius: 10px;
    padding: 10px;
  }

  #standard-cell-dog{
    background-color: #1D1D1D;
    border-radius: 10px;
    padding: 10px;
  }

  .mood-icon{
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    margin-top: auto;
    margin-bottom: auto;
  }

  .dog-pfp{
    margin-top: auto;
    width: 100%;
    height: auto; 
    object-fit: cover; 
    border-radius: 10px;
    max-width: 100%;
  }

.history-grid-container{
  flex: 0 0 100%;
  transition: transform 0.5s ease-in-out; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
  "steps-history readiness-history"
  "level-history mood-history"
  "temp-history location-history";
  gap: 5px;
}

.steps-history {
  grid-area: steps-history;
  display: inline;
  background-color: #121212;
  border-radius: 10px;
  padding: 10px;
}

.readiness-history {
  grid-area: readiness-history;
  background-color: #121212;
  border-radius: 10px;
  padding: 10px;
}

.level-history {
  grid-area: level-history;
  background-color: #121212;
  border-radius: 10px;
  padding: 10px;
}

.mood-history {
  grid-area: mood-history;
  background-color: #121212;
  border-radius: 10px;
  padding: 10px;
}

.temp-history {
  grid-area: temp-history;
  background-color: #121212;
  border-radius: 10px;
  padding: 10px;
}

.location-history {
  grid-area: location-history;
  background-color: #121212;
  border-radius: 10px;
  padding: 10px;
}

.carousel-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

#date-history{
margin-right:auto
}

#buttons-history{
  display: flex;
  background-color: aqua;

}
.carousel {
  display: flex; 
    transition: transform 0.5s ease-in-out; 
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; 
}

/* index start */

.index-grid-container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(2,1fr);
  grid-template-areas: 
  "index-image-one index-image-one index-image-one index-about"
  "index-play index-image-two index-image-two index-image-two";
  gap: 10px;
}

.index-image-one{
  grid-area: index-image-one;
  display: flex;
  align-items: center;
}

.index-image-one > img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.index-about{
  grid-area: index-about;
}

.index-play{
  display: flex;
  grid-area: index-play;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}



.index-image-two{
  grid-area: index-image-two;
  display: flex;
  align-items: center;
}

.index-image-two > img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* index end */

/* news letter start */

.standard-form-input{
  background-color: #1D1D1D;
  border: none;
  color: white;
  height: 25px;
  width: 500px;

  border-radius: 2000px;
  padding: 15px;
  font-family: poppins;
  margin-bottom: 15px;
}

.standard-form-select{
  background-color: #1D1D1D;
  border: none;
  color: white;
  height: 55px;
  width: 530px;
  border-radius: 2000px;
  padding: 15px;
  font-family: poppins;
  margin-bottom: 15px;
}

.form-cell{
  display: flex;
  flex-direction: column;
}

.form-cell > label{
  padding-left: 5px;
  margin-bottom: 5px;
  margin-top: 10px;
}

.form-submit-button{
  margin: 15px;
  font-size: 20px;
  font-family: bold;
  color: white;
  background-color: transparent;
  background-image: linear-gradient(120deg,#7955CA,#BB86FC);
  border-radius: 9999px;
  border: none;
  height: 60px;
  width: 250px;
  box-shadow: 0 0 20px #BB86FC; /* Initial glow */
    animation: pulsate 1.5s infinite; /* Pulsate animation */
    transition: transform 0.2s; /* Smooth scale effect */
}

.form-submit-button:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

#newsletter-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 90px;
}

.radio-group {
  display: flex;
  gap: 20px; /* Adjust spacing between options */
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between radio and text */
  font-size: 14px; /* Adjust text size */
}

.form-radio-group{
  margin-bottom: 30px;
}

.form-radio-group label.red {
  color: red;
}

.form-radio-group label.green {
  color: #53FF6F;
}

.small-icon{
  width: 15px;
  margin-left: 5px;
  height: 100%;
}

.tc-button{
  margin-top: 30px;
  display: flex;
  align-items: center;
  background-color: #1D1D1D;
  padding: 15px;
  border-radius: 9999px;
  font-size: 12px;
  margin-bottom: 15px;
}

/* new letter end */

#footer-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: auto;
  background-color: #1D1D1D;
  grid-template-areas:
  "footer-left footer-right"
  "footer-bottem footer-bottem";
  border-radius: 10px;
  font-family: poppins;
  grid-gap: 15px;
  padding: 15px;
}

#footer-left{
  grid-area: footer-left;
  display: flex;
  align-items: center;
  height: fit-content;
  padding: 0%;
  margin: 0%;
}

#footer-right{
  grid-area: footer-right;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto;
  margin-left: auto;
}

#footer-bottem{
  grid-area: footer-bottem;
  display: flex;
  justify-content: center;
  color: white;
}

/* Mobile Nav Start */
#mobile-nav-container{
  display: none;
  grid-template-columns: 35% 30% 35%;/*1fr .9fr 1.fr*/
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
  ". mobile-nav2 ."
  "mobile-nav1 mobile-nav2 mobile-nav3";
  position: fixed;

  left:0;
  bottom: 0px;
  height: 110px;
  width: 100%;

  z-index: 1000;

}
  .mobile-nav1{
  display: flex;
  grid-area: mobile-nav1;
  align-items: center;
  justify-content: center;
}

.mobile-nav1 > a{
  display: flex;
}

.mobile-nav2{
  grid-area: mobile-nav2;
  display: flex;
  justify-content: center; 
  align-items: center;
}
.mobile-nav3{
  grid-area: mobile-nav3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav3 > a{
  display: flex;
}

#menu-button{
  height: 100%;
  background-color:#BB86FC;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px #BB86FC; /* Initial glow */
}

#burger-icon{
  width: 50px;
  height: auto;
}

.arrow-icon{
  width: 100%;
  height: auto;
}

/* mobile end */

.map-map{
  height: 75vh;
}

/* start menu.html */
.menu-flex-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 94vh;
}

.menu-link{
  display: flex;
  background-color: #BB86FC;
  box-shadow: 0 0 40px #BB86FC;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  align-items: center;
  justify-content: center;
  margin: 10px;
}
/* end menu.html */

/* fonts start */
.poppins-thin {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: italic;
}
/* fonts end */

.green-border{
  border-style: solid;
  border-color: #53FF6F;
  border-width: 1px;
}

.amber-border{
  border-style: solid;
  border-color: #FF9900;
  border-width: 1px;
}

.red-border{
  border-style: solid;
  border-color: #FF2C2C;
  border-width: 1px;
}

/* Tablet (601 pixels x 962 pixels) */
@media only screen and (max-width: 602px){
  .grid-container-dashboard-top{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
    "steps-dashboard steps-dashboard readiness-dashboard readiness-dashboard"
    "temp-dashboard temp-dashboard location-dashboard location-dashboard"
    "level-dashboard mood-dashboard dog-dashboard dog-dashboard";
  }

  .grid-container-dashboard-bottem{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
    "graph-dashboard map-dashboard"
    "timeline-dashboard timeline-dashboard ";
  }
  .index-grid-container{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
    "index-image-one index-image-one"
    "index-about index-about"
    "index-play index-image-two";
  }
}

/*[Mobile (360 pixels x 640 pixels)*/
@media only screen and (max-width: 361px){
  body{
    padding:0px;
  }
  .readiness-dashboard{
    display: none;
  }
  .steps-dashboard{
    display: none;
  }
  .grid-container-dashboard-top{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto) 92px;
    grid-template-areas:
    "dog-dashboard dog-dashboard"
    "location-dashboard location-dashboard"
    "mood-dashboard temp-dashboard"
    "level-dashboard level-dashboard";
    height: auto;
  }
  .grid-container-dashboard-bottem{
    display: none;
  }
  .container-nav-desktop{
    display: none;
  }
  #mobile-nav-container{
    display: grid;
  }
  #mobile-nav-bg{
    display: block;
  }
  #footer-grid{
    display: none;
  }
  .grid-container-dashboard-top{
    height: 10px; 
  }
  .grid-container-body{
    display: grid;
    grid-template-rows:auto ;
    grid-template-areas:
    "main";
    gap: 10px;
}
.mood-icon{
  width: 50%; 
}

header{
  display: none;
}

.dog-dashboard .standard-cell{
  padding: 0px
}

#standard-cell-dog{
  padding: 0px;
  background-color: transparent;
}

.standard-form-input{
  width: 200px;
  }
  
  .standard-form-select{
    width: 230px;
  }

/* start map */
.map-map{
  height: 90vh;
}
/* end map */

.graph-dashboard{
  height: 265px;
  margin-bottom: 10px;
}

.index-play{
  display: none;
}

.index-grid-container{
  height: 88vh;
  grid-template-areas:
  "index-image-one index-image-one"
  "index-about index-about"
  "index-image-two index-image-two";
}

.carousel-button{
  z-index: 1100;
}

.hide{
  display: none;
}
}