/* I used an extension called Alphabetical Sorter.  */

/* Font Montserrat- ımported from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/* Pacifico - I plan to use this for the quotes. */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

* {

  font-family: Montserrat;
  font-weight: 500;
}

body {
  background-color: rgb(2,0,36);
  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 22%, rgba(0,212,255,1) 90%);
  margin-left: 10%;
  margin-right: 10%;
}



p, h1, h2,h3,h4, h5, h6 {

  color: black;
  text-align: left;
  
}


#h1centered {

  font-size: 1.5em;
  font-weight: bold; 
  text-align: center; 
}

#h2centered {
  font-size: 1.5em;
  font-weight: bold; 
  text-align: center;
}

.clear {

  clear: left;
}




/* ---------------------------Navigation Styling ------------------------------------------------------------------*/
.topnav {

  background-color: aliceblue;
  border-radius: 7px;
  border: 1px;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.90);
  color: black;
  margin: 50px auto 10px auto;
  overflow: hidden;
  padding: 30px;
  text-align:left;
  
}

.topnav a {
  
  
  color: black;
  font-size: 1.2em;
  font-weight:1000;
  padding: 30px;
  text-align: center;
  text-decoration: none;
}

.topnav a:hover {

  
  background-color: darkblue;
  border-radius: 7px;
  color: aliceblue;
  transition: 700ms;
  
}

.active {
  background-color: darkblue;
  
}

.topnav a.active {
  
  border-radius: 7px;
  color: white;
    
}




/* ---------------------Grid containers ------------------------------*/
.container-a {
  background-color: aliceblue;
  border-radius: 7px;
  border: 1px;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.90);
  color: black;
  margin: 0 auto 10px auto;
  padding: 10px;
  text-align:left;
  
  
}


 .grid-container {
  background-color: darkblue;
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* I got some help from ChatGPT to make it more responsive*/
  padding: 20px;
  
  
}

.grid-container > div {
  background-color: aliceblue;
  border-radius: 7px;
  overflow: hidden;
  padding: 10px;
  text-align: left;
 
}

/* Columns in Different Sizes */

.grid-container-2 {
  background-color: darkblue;
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: 66% 34%;
  padding: 20px;
  
  
}

.grid-container-2 > div {
  background-color: aliceblue;
  border-radius: 7px;
  overflow:auto;
  padding: 10px;
  text-align: left;
 
}

@media (max-width:1000px) {
  .grid-container-2 {
    grid-template-columns: auto; 
  }
}

/* Image selectors for images in the grid content */

.left {
  
  float: left;  
  height: auto;
  padding: 3px;
  width: 50%;
}




/* Quotes Section Styling */


#quotes {
  
  background-color: darkblue;
  border-radius: 7px;
  margin-top: 10px;
  padding: 40px;

}

#quotes p {
  color: ivory;
  font-family: "Pacifico", cursive;
  font-size: 1.2em;
  font-weight: 400;
  margin-left: 140px;
}

#authorname {
  color: ivory;
  text-emphasis-style:inherit;
}


/* Image selector for the quotes */

.authorpic {
  border-radius: 50%;
  float: left;
  height: 120px;
  padding-top:20px;
  width: auto;
 
}