@font-face {
  font-family: Montserrat-Bold;
  src: url('/fonts/Montserrat-Bold.ttf?') format('truetype');
}

@font-face {
  font-family: JetBrains-Mono;
  src: url('/fonts/JetBrainsMono-Regular.woff2?') format('woff2');
}

body {
  --bluck:#0C0F1E;
  --orange:#EE8732;
  --yellow:#F5C749;
  --sky:#00A3FF;
  --dark-blue:#225288;
  
  background-color: var(--sky);  
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, white, transparent 1px),
    linear-gradient(to bottom, white, transparent 1px);
  margin: 0;
}

h1 {
  background-color: var(--sky);
  padding: 10px;
  border: 1px dashed white;
  color: white;
  font-family: Montserrat-Bold;
  margin: 10px;
}

img {
  margin: 20px;
}

p, ul {
  font-family: JetBrains-Mono;
  background-color: white;
  padding: 10px;
  border-bottom: 2px solid var(--dark-blue);
  border-right: 2px solid var(--dark-blue);
  margin: 20px;
}

li {
  margin-left: 20px;  
}

.hero {
  font-size: 400%;
}

.dark {
  background-color: var(--bluck);
  color: white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.dark h1, .dark p {
  background-color: var(--bluck);
  border: none;
  padding: 0;
  border-bottom: 2px solid var(--dark-blue);
}


.code {
  font-family: JetBrains-Mono;
  
  margin: 20px;
  padding: 10px;
  border: 2px solid var(--dark-blue);
  border-top: 2px solid var(--sky);
  border-left: 2px solid var(--sky);
  
  outline: 2px solid var(--bluck);
  border-radius: 10px;
  
  box-shadow: inset -0px -30px 70px 0px var(--dark-blue),
              -0px 10px 40px 0px var(--dark-blue);
  background-image: linear-gradient(var(--bluck), black);
  
  color: var(--yellow);
  text-shadow: var(--orange) 0 2px 5px;
}

.code-comment {
  color: lightgrey;  
  text-shadow: var(--sky) 0 2px 5px;
}