/*  GSD  */

@import url('https://fonts.googleapis.com/css2?family=Roboto');

:root {
  --dark:    #F4F9F9;
  /*--blue-dark:    #125D98;*/
  /*--blue-light:    #3C8DAD;*/
  --gray: #DDDDDD;
  --gray-dark: #A8A196;
  --orange: #F5A962;
  --brown: #454545;

  --blue_dark:#0c1237;
  --blue_light: #344ffa;
  --blue: #0d21a1;
  --purple: #4d2db7;
  --pink_dark: #9d45c0;
  --pink: #eb53b1;
  --pink_light: #f194cb;
  --pink_lighter: #fbaed8;

  --title-color: var(--gray);
  --title-bg-color: var(--purple);
  --menu-color: var(--pink_lighter);
  --menu-bg-color: var(--pink);
  --menu-hover-color: var(--gray);
  --default_text_color: var(--brown);
  --default_bg_color: var(--gray-dark);
  --menu-size: 2.5vw;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Verdana";
  background: var(--default_bg_color);
  overflow: hidden;
}
h1{
  font-family: "Verdana";
  font-size: var(--menu-size);
}
a {
  color: var(--default_text_color);
  text-decoration: none;
}
a:hover {
  color: var(--gray);
}
p {
  padding-left: 40px;
  padding-right: 40px;
}
ul{
  text-align: left;
  margin-left: 80px;
  margin-right: 80px;
}
img{
  /* aspect-ratio: 9/12; */
  border-radius: 20px;
  box-shadow:
    rgba(255,255,255,0.3) 0 5px 6px -8px,
    rgba(255,255,255,0) 0 4.5px 5px -6px,
    rgba(50, 50, 80, 0.5) 0px 3px 3px -2px,
    rgba(0, 0, 0, 0.8) 0px 4px 5px -3px;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0); /* sometimes forces Safari to render properly */
}

#title_div {
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    background: var(--title-bg-color);
    border: 0px solid red;
}

#menu_div {
  width: 100%;
  text-align: center;
  background: var(--menu-bg-color);
  border: 1px solid var(--menu-color);;
  padding-top: 7px;
  padding-bottom: 7px;
  box-shadow: 0px 15px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
}
#menu_div a {
  display: inline-block;
  color:  var(--menu-color);
  font-size: var(--menu-size);
  text-decoration: none;
  transition: 0.1s all;
  border: 0px solid blue;
}
#menu_div a:hover {
  color:  var(--menu-hover-color);
}
#center_div {
    width: 100%;
    background: var(--default_bg_color);
    color: var(--default_text_color);
    font-size: 23px;
    text-align: center;
    height: 95%;
    overflow: auto;
    border: 0px solid red; /* Change color and width as needed */
    display: inline-block; /* Keeps the container size minimal */
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

#center_div a {
  font-size: 40px;
}
#center_div #rescueme-link {
  font-size: 100px;
  color:  var(--gray);
}
#center_div #rescueme-link:hover {
  color:  var(--pink);
}

.donate-text{
  margin-left: 3vw;
  margin-right: 3vw;
}

/* Apply rounded corners to the button */
.rounded-button {
    border-radius: 10px; /* Adjust the value to control the roundness of the corners */
    display: inline-block;
    color:  var(--menu-color);
    background: var(--menu-bg-color);
    font-size: 6vw;
    text-decoration: none;
    border: 1px solid var(--menu-color);
    width: 80vw;
    padding: 10px 20px; /* Adjust padding to control the button's size */
    cursor: pointer; /* Add a pointer cursor on hover for a button-like feel */
}

/* Style the button on hover */
.rounded-button:hover {
    background-color: var(--purple); /* Change the background color on hover */
}

#home_pic_div{
  height: auto;
  border: 0px solid red;
  align-items: center;
  padding: 20px;
}

#home_pic_div img{
  width: 80vw;
  height: auto;
  margin-bottom: 10px; /* Adjust the gap between items */
}

.rescue_dogs_div{
  height: auto;
  border: 0px solid red;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  gap: 10px;
  justify-content: center; /* Adjust as needed */
  padding: 20px;
  /*spacing: 20px; */
}

.dog-pic{
  float: left;
  height: auto;
  padding: 10px;

}

.dog-pic-urgent img{
  color: var(--pink);
  border: 5px solid yellow;
}
.dog-pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;       /* 9:12 simplified */
  object-fit: cover;
  display: block;
  max-height: 300px;
}


#title_text {
    color: var(--title-color);
}
/* Desktop Styles */
@media (min-width: 1170px) {
  #title_text {
      font-size: 2.5vw;
  }
  #menu_div a {
    font-size: 1.5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
  }
  #home_pic_div img{
    width: 50vw;
  }
  .rounded-button {
      border-radius: 10px; /* Adjust the value to control the roundness of the corners */
      font-size: 3vw;
      width: 40vw;
      padding: 10px 20px; /* Adjust padding to control the button's size */
  }

}
/* Mobile Styles */
@media (max-width: 1170px) {
  #title_text {
      font-size: 5vw;
  }

  #menu_div a {
    font-size: 4vw;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
  }
}