@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
  --bg-color: #eee;
}

html {
  /* Main HTML CSS */
  background: var(--bg-color);
  color: black;
  font-family: "Ubuntu", sans-serif;
  text-align: center;
}

* {
  /* Makes sure all default elements have a font and aligned center */
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(100px);}
  100% { opacity: 1; }
}

/* 
Above are some general CSS,
Below are the CSS defined for various pages.
*/

body > div:first-child {
  background-image: url("header_img/default.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-part > nav {
  /* The navigation bar itself */
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  position: fixed;
  padding: 10px;
  overflow: hidden;
}

nav #icon {
  /* The icon in the navigation bar */
  float: left;
}

nav #icon img {
  /* The image of the icon in the navigation bar */
  transition: 500ms;
  width: 45px;
  filter: invert(1);
}

nav a {
  /* li is the list, and a is the buttons. */
  transition: 500ms;
  float: right;
  padding: 25px 30px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  margin: 0;
  border-radius: 12px;
  background-color: transparent;
  text-shadow: 0 0 25px black;
}

.adiv a:hover {
  /* .page-selected is used to make a button have the hover css but its when they are on the page
  Example: if you are at the contact me page, you will see the contact me button with the hover css */
  /* CSS that applies when button is hovered */
  transition: 500ms;
  text-shadow: 0 0 25px black;
  color: blue;
  font-weight: bolder;
  text-decoration: underline;
}

.adiv a:focus {
  /* CSS when the button is focused, like clicked */
  transition: 500ms;
  display: none;
}

.adiv.invert a {
  /* The CSS that appears in the JS code, to make the navbar black whenever you scroll somewhere else */
  transition: 500ms;
  color: black;
  text-shadow: 0 0 10px white;
}

.adiv.invert a:hover {
  /* The CSS that appears in the JS code, to make the navbar black whenever you scroll somewhere else */
  transition: 500ms;
  color: blue;
  text-shadow: 0 0 10px white;
}

br {
  /* Break Tags, makes it unselectable */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

header {
  /* The Header, aka the one with "Cybersecurity" on it */
  color: white;
  text-shadow: 0 0 5px black;
}

header h1 {
  font-size: 6em;
}

.link {
  /* Original a tag, without it looking like a button. */
  text-decoration: underline;
  color: blue;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
}

.breadcrumb * {
  /* The breadcrumb, like the one that says main/page */
  margin: 0;
  display: inline;
  font-family: monospace;
}

.breadcrumb p,
.breadcrumb .link {
  /* Makes the Children of the Breadcrumb look bigger */
  font-size: 2.6em;
}

a {
  /* Gets all other a tags except the navigation bar */
  transition: 0.5s;
  text-decoration: none;
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0px 12px;
  background-color: #0d6efd;
}

a:hover {
  /* Gets all other a tags except the navigation bar */
  transform: translateY(10px);
  transform: scale(1.1);
  transition: 0.5s;
  padding: 16px 20px;
  font-weight: bold;
}

a:focus {
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
}

main div img {
  /* Get all imgs inside certain divs*/
  height: 200px;
  width: 300px;
  border-radius: 12px;
}

main .antivinfo img {
  /* Get only imgs inside the antivirus info div */
  height: 100px;
  width: 100px;
}

p {
  /* Makes the paragraphs not stretch out, and make them much closer */
  margin: 0 25vw;
  font-size: 1.3em;
}

p i, p em {
  /* Targets some text with an italic font */
  color: #aaa;
  font-size: 0.7em;
}

code {
  /* This is used for stuff like Password Generator, and the email info */
  font-family: monospace;
  font-size: 200%;
  background-color: #555;
  width: max-content;
  border-radius: 6px;
  border: 3px solid #555;
  color: white;
  margin: 0 auto;
}

button {
  /* This is used to style the button that you click to generate a password. */
  transition: 0.5s;
  text-decoration: none;
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 12px;
  border: none;
  background-color: #0d6efd;
}

button:hover {
  /* Style will apply when the button is hovered. */
  transition: 0.5s;
  transform: translateY(10px);
  transform: scale(1.1);
  transition: 0.5s;
  padding: 24px 32px;
  font-weight: bold;
}

th,
td {
  /* Get the table row & table data */
  padding: 5px;
}

tr:nth-child(even) {
  /* Makes the table look in a pattern of white and grey. */
  background-color: #ddd;
}

table,
th,
td {
  /* CSS that applies for table, table row & table data */
  margin: 0 auto;
  border: 1px solid black;
  border-collapse: collapse;
}

.card-container {
  /* Card Container, has Cards in it */
  display: grid;
  justify-content: space-around;
  margin: 0 50px;
  grid-template-columns: auto auto auto;
}

.card {
  /* Card is the little card you see in the homepage, like the "History" card */
  transition: 0.3s;
  width: 250px;
  height: 400px;
  margin: 50px 50px;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  padding: 10px;
}

.card:hover {
  /* Style will apply when the Card is hovered */
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.5);
  background-color: #ddd;
  transition: 0.3s;
  width: 275px;
  height: 440px;
}

.card img {
  /* Card Images */
  width: 250px;
  height: 250px;
  border-radius: 12px;
  object-fit: cover;
  object-position: right;
}

.card p, .vidcard p {
  /* The Text in the Card */
  margin: 0;
  font-size: 1em;
}

footer {
  /* The footer, the bottom of the page */
  background-color: slateblue;
  display: flex; 
  justify-content: space-around;
}

footer > div {
  /* The sections in the footer */
  padding: 20px;
  text-align: left;
  width: 500px;
}

footer > div > * {
  /* The Text in the footer */
  margin: 0;
  color: white;
}

footer > div > p {
  /* The Text in the footer */
  margin: 0;
  font-size: 1em;
  color: white;
}

footer > div > code {
  /* The Text in the footer */
  margin: 0;
  font-size: 1em;
  color: white;
  display: block;
}

.vidcard {
  /* Vidcard is a special card for the resources.html, to display videos */ 
  transition: 0.3s;
  width: 350px;
  height: 400px;
  margin: 50px 50px;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  padding: 5px;
}

.vidcard iframe {
  /* Card iframes, for the youtube video embed */
  height: 200px;
  width: 320px;
  border-radius: 12px;
  object-fit: cover;
  object-position: right;
}

details {
  /* a part of the Accordion */
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 75%;
}

summary {
  /* The Text in a Accordion */
  cursor: pointer;
  font-weight: bold;
  outline: none;
}

summary:hover {
  /* Applies when you hover over The Text */
  color: #007BFF;
}

.contents {
  /* The Content after you click on it */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*
Above is just some CSS used normally
Below is the CSS used for responsive design
*/

@media screen and (max-width: 1200px) {
  p {
    margin: 0 0;
  }

  header>h1 {
    font-size: 50px;
  }

  .card-container {
    display: grid;
    grid-template-columns: auto;
  }
}

@media screen and (max-width: 500px) {
  header>h1 {
    font-size: 35px;
  }

  #icon {
    float: none;
  }

  .adiv {
    display: flex;
  }

  #topicele, #funele {
    display: none;
  }

}