/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: ezydraw;
  src: url(ezydraw.regular.ttf);
}

@font-face {
  font-family: poppins;
  src: url(Poppins.Regular.ttf)
}

* {
  box-sizing: border-box;
}

body {
  font-family: Verdana;
  background: #f1f1f1;
  background-image: url("https://i.ibb.co/TD54mqfx/background.png");
  background-size: 400px;
}

/* Container for all of the elements */
.container {
  background-color: rgba(244, 244, 250, 0.555);
  width: 1000px;
  margin: auto;
  border-radius: 25px 25px 25px 25px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

/* Top Header Only */
.header-top {
  padding: 30px;
  text-align: center;
  background: rgb(255, 255, 255);
  border-radius: 25px 25px 0px 0px;
  font-family: ezydraw;
  color: #0040fc;
}

/* Header/Blog Title */
.header {
  font-family: ezydraw;
  background-color: #0040fc;
  border-radius: 10px 10px 0px 0px;
}

.header h1,
.header-top h1 {
  font-size: 50px;
  color: #0040fc;
  font-family: ezydraw;
}

.header h2 {
  color: #0040fc;
  font-family: ezydraw;
}

.card h2 {
  color: #0040fc;
  font-family: ezydraw;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #0040fc;
  background: linear-gradient(
    90deg,
    rgba(0, 64, 252, 1) 0%,
    rgb(17, 47, 218) 100%
  );
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  font-family: ezydraw;
  text-decoration: none;
  transition: 0.45s;
}
/* Change color on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #5982f1;
  transition: 0.45s;
}
.dropdown {
  float: left;
  font-family: ezydraw;
}
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown :last-child {
  border-radius: 0px 0px 10px 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #5982f1;
  min-width: 160px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  z-index: 5;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #0040fc;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.row {
  margin-top: 20px;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 70%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 30%;
}

/* just adding color behind the images in the gallery, and a margin above */
.gallery-bground {
  background-color: #ffffffe8;
  margin-top: 20px;
  margin-bottom: 20px;
}
/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: #0040fc;
  margin: 20px 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background-color: #ffffff;
  font-family: "Poppins", sans-serif;
}

.card-body {
  padding: 20px;
  background-color: white;
}

.card-body a {
  color: #0040fc;
  font-family: ezydraw;
  transition: 0.2s;
}

.card-body a:hover {
  color: #5982f1;
}

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

.next a:link {
  border-radius: 25px;
  float: right;
  background-color: #0040fc;
  color: white;
  text-align: center;
  font-family: ezydraw;
  padding: 14px 25px;
  text-decoration: none;
  display: inline-block;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 20px;
  transition: 0.3s;
}
.next a:visited {
  float: right;
  background-color: #0040fc;
  color: white;
  text-align: center;
  font-family: ezydraw;
  padding: 14px 25px;
  text-decoration: none;
  display: inline-block;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 20px;
}
.next a:hover,
.next a:active {
  background-color: #759aff;
  box-shadow: 0 0 0 5px #3b83f65f;
}
.prev a:link {
  float: left;
  background-color: #0040fc;
  color: white;
  text-align: center;
  font-family: ezydraw;
  padding: 14px 25px;
  text-decoration: none;
  display: inline-block;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 20px;
  margin-left: 25px;
  border-radius: 25px;
  transition: 0.3s;
}
.prev a:visited {
  float: left;
  background-color: #0040fc;
  color: white;
  text-align: center;
  font-family: ezydraw;
  padding: 14px 25px;
  text-decoration: none;
  display: inline-block;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 20px;
  margin-left: 3px;
}
.prev a:hover,
.prev a:active {
  background-color: #759aff;
  box-shadow: 0 0 0 5px #3b83f65f;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background-color: #0040fc;
  background: linear-gradient(
    90deg,
    rgba(0, 64, 252, 1) 0%,
    rgb(17, 47, 218) 100%
  );
  color: white;
  border-radius: 0px 0px 25px 25px;
}

.footer h2 {
  font-size: 1em;
}

/* Responsive layout - when the screen is less than 1000px wide, make the container width 100% */
@media screen and (max-width: 1000px) {
  .container {
    width: 100%;
  }
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
div.box {
  padding: 55px;
}

h5 {
  color: rgba(0, 0, 0, 0.603);
}

h {
  text-align: center;
  text-transform: uppercase;
  color: #0040fc;
  font-family: ezydraw;
}
div.header img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0px 0px;
}
div.banner img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 50%;
}

.center {
  display: block;
  margin: auto;
}

div.center {
  text-align: center;
  color: #0040fc;
  font-family: ezydraw;
}
div.center a {
  display: inline-block;
  margin: 0 10px;
}
div.center img {
  display: block;
  margin: auto;
}
div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #ffffff;
  float: left;
  width: 200px;
  z-index: 1;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: 0.2s;
}
div.gallery:hover {
  border: 2px solid #0040fc;
  box-shadow: rgba(194, 200, 255, 0.35) 0px -50px 36px -28px inset;
  transform: translate(1px);
}
div.gallery img {
  display: block;
  margin: auto;
  height: auto;
  width: auto;
  max-width: 180px;
  max-height: 150px;
}
div.desc {
  padding: 5px;
  text-align: left;
  color: #0040fc;
}

.desc {
  color: #0040fc;
}

div.id {
  font-family: ezydraw;
}
div.image-row {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}

/* text shadow for title */
h1 {
  font-size: calc(1em + 30vmin);
  font-weight: 900;
  color: tomato;

  --x-offset: -0.0625em;
  --y-offset: 0.0625em;
  --stroke: 0.025em;
  --background-color: rgb(209, 234, 255);
  --stroke-color: rgb(123, 193, 216);

  text-shadow: var(--x-offset) var(--y-offset) 0px var(--background-color),
    calc(var(--x-offset) - var(--stroke)) calc(var(--y-offset) + var(--stroke))
      0px var(--stroke-color);
}
/* for browsers that support spread, added in
https://drafts.csswg.org/css-text-decor-4/#text-shadow-property
currently: none browsers! 
https://wpt.fyi/results/css/css-text-decor */
@supports (text-shadow: 1px 1px 1px 1px black) {
  h1 {
    text-shadow: var(--x-offset) var(--y-offset) 0px 0px var(--background-color),
      var(--x-offset) var(--y-offset) var(--stroke) 0px var(--stroke-color);
  }
}

.profileid {
  color:#0040fc;
  font-family:ezydraw;
}

.p-4 {
  padding: 40px;
}

.mb-1 {
  margin-bottom: 10px;
}

.white img {
  filter: grayscale(100%) brightness(400%);
}

.muted {
  color: rgba(0, 0, 0, 0.603);
}

.muted-white {
  color: rgba(255, 255, 255, 0.801);
}

.archive h2 {
  color: #0040fc;
  font-family: ezydraw;
  padding-left:40px;
  padding-top:40px;
}

.archiveFlex {
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}

.archiveFlex a {
  color:#0040fc;
  display:block;
  width:100%;
  height:100%;
  text-align: center;
  font-family: ezydraw;
  padding:10px;
  text-decoration: none;
}

.archiveFlex a:visited {
color: #0040fc;
text-decoration: none;
}

.archiveFlex a:hover {
color: #5982f1;
text-decoration: none;
}

#loading {
  color:#0040fc;
  padding:10px;
  font-family:ezydraw;
}