@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Jersey+10&family=Quicksand:wght@300..700&display=swap');
@import "tailwindcss";

body {
  font-family: "Comfortaa";
  text-align: center;
  color: #EFF0F5;
  background-image: linear-gradient(to top, #0d3080 10%, #0A0B10 90%);
  place-items: center;
}
nav {
  margin-bottom: 1em;
}
nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  text-align: center; 
}
nav a{
  font-size: 18px;
  font-weight: bolder;
  text-decoration : none;
  color: #b2b4b9;
}
nav a:hover {
  scale: 110%;
}
.logo {
  margin-top: 1em;
  filter: drop-shadow(0px 5px 5px #0A0B10);
  border-radius: 100%;
  max-width: 200px;
}
p {
  color: #d8dde2;
  font-weight: light;
  font-size: 14px;
  margin-left: 1em;
  margin-right: 1em;
}
h1, h2 {
  font-family: "Quicksand";
  font-weight: bolder;
  text-shadow: 0px 5px 5px #0A0B10;
}
h1 {
  font-size: 36px;
  margin-bottom: 0.25em;
}
h2 {
  font-size: 32px;
  text-decoration: underline;
}
section > p {
  font-size: 18px;
  text-align: left;
  padding-bottom: 0.5em;
}
section > p > a {
  color:#EFF0F5
}
.wrapper {
  background-image: linear-gradient(to bottom, #2C2F45 10%, #1C1E2C 90%);
  border-radius: 2em;
  margin: 0.25em;
  padding: 0.25em;
  padding-bottom: 3em;
  box-shadow: 0px 2.5px 5px black;
  max-width: 100%;
}
.container {
  background-image: linear-gradient(to bottom, #1C1E2C 10%, #0A0B10 90%);
  background-color: #1C1E2C;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  border-radius: 1em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.dotted-line {
  margin-bottom: 1em;
  border-bottom: 5px dotted #EFF0F5;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.current-page {
  color: white;
  scale: 110%;
}
footer a {
  text-decoration: none;
  color: #EFF0F5;
}
.edit {
  font-size: 18px;
  font-weight: bolder;
}
code {
      font-family: Consolas, "courier new";
      color: rgb(190, 33, 64);
      background-color: #0A0B10;
      padding: 0.25em;
      padding-top: 0.75px;
      padding-bottom: 0.75px;
      font-weight: bold;
      border-radius: 5px;
} 

/* Medium Display */
@media (min-width: 1000px) {
    .wrapper { max-width: 50%; }
}


  /* Large Display */
@media (min-width: 1500px) {
  h1 { font-size: 48px; }
  .wrapper { max-width: 40%; }
  .logo { max-width: 400px; }
  .container {
    margin-left: 3em;
    margin-right: 3em;
  }
  .dotted-line {
    margin-left: 3.5em;
    margin-right: 3.5em;
  }
}