/**
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


body {
  font-family: "helvetica", Arial, sans-serif;
  font-size: 16px;
}

#logo {
  margin-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

.card {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px; /* Rounds the corners of the cards */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Example subtle shadow */
}

.card-title {
  font-size: 24px;
}

.card-content {
  font-size: 16px;
}

.card:hover {
  background-color: rgba(255, 255, 255, 0.9); /* Make the card solid on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow on hover */
}

.card img {
  width: 75%; /* Reduce image size slightly */
  height: auto; /* Maintain image proportions */
  object-fit: contain; /* Ensure images cover the area without distortion */
  display: block; /* Remove extra space below the image */
  margin: 0 auto; /* Center the image horizontally */
}

#site-title {
  font-family: "Montserrat", sans-serif; /* Apply a nicer font */
  font-weight: bold; /* Make the font bold */
  font-size: 1.3em; /* Make the title card slightly larger */
  text-transform: lowercase;
  max-width: 1540px; /* match the max width of the cards below */
  margin-left: auto;
  margin-right: auto;
}

#site-title:hover {
  background-color: white;
}

#site-title .card-title {
  font-size: 34px;
}

#navbarSupportedContent {
  font-size: 16px;
}


/* GCA Prompts:
I want all of the cards to be slightly transparent, and for their general sizes to change but maintain proportion of their contained images.
Make the card slightly more solid colored when hovering. I'd like the image to be a big smaller but maintain proportions.
I want the title card to slightly larger and nicer font. the background image color is too strong. can i make it less saturated? */