body {
    background-color: #f8f5f0;
    font-family: "times new roman";
}

h1{
    background-color: #304C53;
    color:white;
    text-align: center;
    padding: 40px;
    font-size: 50px;
    margin: 0;
    border-radius: 5px;
    font-family: "Playfair Display";

}
h2{
    margin: 10px;
}

h3{
  /* margin-left: 200px;*/
  text-align: center;  
  color: #D98A6C
}
.page-title {
    background-color: #DCEFF2;
    color: #52747D;
    padding: 5px;
    font-size: 20px;
    text-align: left;
    margin: 0px;
    border-radius: 5px;
    /*-webkit-text-stroke: 1px #303C6C;*/
}

p{
    font-size: 20px;
}

/* Style the topnav */
ul.topnav {
  display:flex;
  list-style-type: none;
  margin: 0;
  padding: 5px;
  background-color: #BC6C50;
}


/* Style links in topnav */
ul.topnav li a {
  display: block;
  color: #f8f5f0;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  border-radius: 10px;
}

/* Change color on hover */
ul.topnav li a:hover {
  background-color: #DDAD9C;
  color: white;
}

div.flex-container {
  display: flex;
  /* Show the flex items horizontally */
  flex-direction: row;
}

div.flex-container > div {
  margin: 10px;
}

/* Sidebar/left column */
.side {
  flex: 30%;
  /*background-color: #FBE9D0;*/
  padding: 20px;
  font-size: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Main column */
.main2 {
  flex: 70%;
  padding: 20px;
}

table, th, td {
  margin: 10px;
  border: 3px solid white;
  border-collapse: collapse;
  padding: 15px;
}
th{
  background-color: #304C53;
  color: white ;
  font-size: 20px;
  text-align: left;
}
td{
  background-color: #F9F9F9;
  color: black;
  font-size: 18px;
  text-align: left;
}

/* The follwing code is to create "cards" for the assignments tab*/
/* Float four columns side by side */
.column {
  /*float: left;*/
  width: 30%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}

/* Remove extra left and right margins, due to padding */
.row {
  margin: 0 -10px;
  flex-wrap: wrap;
  display:flex
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns 
@media screen and (max-width: 600px) {
  .column{
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}*/

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  padding: 16px;
  text-align: center;
  background-color: #304C53;
  border-radius: 12px;
  flex-grow: 1;
}

/* Optional: Add a hover effect to the card */
.card:hover {
  background-color: #45656E;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /*position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;*/
  text-decoration: none; /* Removes default underline */
  color: inherit;         /* Keeps your text color normal */
}

/* This changes the heading inside the linked card */
.card-link h3, .card-link p {
  color: #f8f5f0 !important; /* Replace with your desired heading color */
} 


/*Assignment 5 */
a:link {
  color: #303C6C;
  background-color: transparent;
}

a:visited {
  color:  #303C6C;
  background-color: transparent;
  text-decoration: none;
}

/*This code is for the clickable box for the Technology Enhanced Activity*/
.clickable-box {
  display: block; /* Makes the link behave like a box */
  max-width: 430px;        /* Sets the width of your box */
  padding: 20px;           /* Adds space inside the box */
  /* margin: 0 auto; */
  background-color: #f8f5f0 !important;
  border: 2px solid #304C53; 
  border-radius: 8px;      /* Slightly rounded corners */
  text-decoration: none;   /* Removes the default underline from the link text */
  color: #D98A6C;             /* Sets the text color */
  transition: all 0.3s ease; /* Makes the hover effect smooth */
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a subtle shadow */
}

/* Changes the style when someone hovers over the box */
.clickable-box:hover {
  background-color: #e0e0e0 !important;;
  border-color: #D98A6C;   /* Highlights the border blue */
  transform: translateY(-2px); /* Slightly lifts the box up */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a subtle shadow */
}
/* Forces headings inside the clickable box to use your color */
.clickable-box h1, 
.clickable-box h2, 
.clickable-box h3, 
.clickable-box p {
  color: #D98A6C; 
}