/* =====================================================
   This is your CSS Stylesheet!
   
   CSS controls how your website looks.

   Try changing some of the numbers and colors below 
   and see what happens!
   
   ===================================================== */


/* =========================
   BASIC PAGE
   ========================= */

body {
  margin: 0;

  /* Background colour */
  background-color: #2b502b;

  /* Font */
  font-family: Arial, sans-serif;

  color: #050805;

  /* Empty space around our webpage */
  padding: 20px;
}


/* =========================
   THE MAIN WEBSITE BOX
   ========================= */

.page {
  max-width: 800px;
  margin: auto;

  background-color: #52781a;

  border: 5px solid #1b2417;

  /* Rounded corners! Try changing 20px to 0px */
  border-radius: 20px;

  box-shadow: 0 0 30px #39ff14;
}


/* =========================
   HEADER
   ========================= */

header {
  text-align: center;

  /* Colour of the title box at the top */
  background: linear-gradient(
    135deg,
   #0a1c18,
    #76ff03
  );

  color: white;

  padding: 35px 20px;

  border-radius: 14px 14px 0 0;
}

h1 {
  margin: 10px 0;

  font-size: 2.5em;

  /* Makes the letters look like they glow */
  text-shadow: 3px 3px 0 #552080;
}

.subtitle {
  font-size: 1.1em;
}

.sparkles {
  letter-spacing: 10px;
}


/* =========================
   NAVIGATION
   ========================= */

nav {
  text-align: center;

  background-color: #29203d;

  padding: 12px;
}

nav a {
  color: #ffffff;

  text-decoration: none;

  font-weight: bold;

  margin: 0 10px;
}

/* This change the link colour when you put your cursor over it*/
nav a:hover {
  color: #39ff14;

  text-decoration: underline;
}


/* =========================
   MAIN CONTENT
   ========================= */

main {
  padding: 20px;
}


/* =========================
   CARDS
   ========================= */

.card {
  background-color: white;

  border: 3px dashed #1b2417;

  border-radius: 15px;

  padding: 20px;

  margin-bottom: 20px;
}

.card h2 {
  color: #4d6b3f;

  margin-top: 0;
}


/* =========================
   ABOUT ME
   ========================= */

.about-layout {
  display: flex;

  align-items: center;

  gap: 20px;
}

.avatar {
  min-width: 100px;
  height: 100px;

  background-color: #ffe066;

  border: 4px solid #13332c;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 50px;
}

.highlight {
  background-color: #fff0a8;

  padding: 10px;

  border-radius: 8px;

  font-weight: bold;
}


/* =========================
   FAVORITES
   ========================= */

.favorites {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 15px;
}

.favorites > div {
  text-align: center;

  background-color: #aac59d;

  padding: 15px;

  border-radius: 12px;

  border: 2px solid #4d6b3f;
}

.big-emoji {
  display: block;

  font-size: 40px;

  margin-bottom: 5px;
}

.favorites p {
  margin-bottom: 0;
}


/* =========================
   MAGIC ANIMATION
   ========================= */

/*
   :hover means
   "when the mouse is over this element"

   animation tells the browser to use
   the wiggle animation below.
*/

.wiggle {
  display: inline-block;

  background-color: #84e1a8;

  color: #1b2417;

  padding: 15px 25px;

  border-radius: 10px;

  font-weight: bold;

  cursor: pointer;

  /* THE ANIMATION */
  animation: wiggle 0.8s ease-in-out infinite;

  /* We don't want it moving all the time,
     so we pause the animation */
  animation-play-state: paused;
}


/* Start the animation when we hover */
.wiggle:hover {
  animation-play-state: running;
}


/*
   @keyframes describes what the animation does.
*/

@keyframes wiggle {

  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }

}


.tiny {
  font-size: 0.8em;

  color: #777;

  margin-top: 15px;
}


/* =========================
   LINKS
   ========================= */

.links a {
  color: #8b3dba;

  font-weight: bold;
}

.links a:hover {
  color: #ff1493;
}

/* =========================
   ????
   ========================= */

.secret-message {
    color: green;
}


/* =========================
   FOOTER
   ========================= */

footer {
  text-align: center;

  background-color: #29203d;

  color: white;

  padding: 20px;

  border-radius: 0 0 14px 14px;
}

.footer-decoration {
  color: #39ff14;

  letter-spacing: 8px;
}


/* =========================
   MOBILE PHONES
   ========================= */

/*
   This makes the website work better
   on a small screen.
*/

@media (max-width: 600px) {

  body {
    padding: 5px;
  }

  h1 {
    font-size: 1.8em;
  }

  .about-layout {
    flex-direction: column;
  }

  .favorites {
    grid-template-columns: 1fr;
  }

  nav a {
    display: inline-block;

    margin: 5px;
  }

}