/* Debugging */

/* * {
  border: 1px dotted deeppink;
} */

/*Imports*/

@font-face {
  font-family: 'Product Sans';
  src: url('../fonts/Product Sans Regular.ttf') format('truetype');
}

@font-face {
  font-family: Inter;
  src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Source Code Pro';
  src: url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
}

/* Globals */

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  color: black;
  background-color: white;
  font-family: 'Inter', Arial, sans-serif;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Product Sans';
}

footer div {
  color: lightgray;
}

footer a:hover {
  color: white;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

textarea {
  resize:both;
}

.sitename {
  font-family: "Product Sans", Helvetica, sans-serif;
  font-size: 36px !important;
}
/*Navigation*/

.nav-link {
  color:#e6e6e6 !important;
  font-size:18px;
  font-weight:bold !important;
}

.nav-link:hover {
  color: white !important;
  text-decoration: underline;
  font-weight:bold !important;
}

.nav-link:active {
  color: white !important;
  text-decoration: underline;
  font-weight:bold !important;
}

.main-link {
  cursor: pointer;
}
/* Inputs and buttons */
.round {
  border-radius: 1.5em;
  padding:0.5em 1em;
  border-width: 1.5px;
}

input[readonly] {
  border: 0;
}

button:hover, button:active, button:focus {
  outline: none;
}


.no-border {
  border-style: none;
  outline: none;
}



/* Text and typography */
.line-height-sm {
  line-height: 1;
}


/* Lists */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.plain-list li {
  list-style: none;
  margin: 1rem;
  padding: 0.5rem 0;
}

ul.plain-list li a:hover {
  text-decoration: underline;
}

a.plain-list-link {
  padding: 0;
}

/* Layout */
.main-content {
  min-height: 60vh;
}

hr {
  border-top: 1px solid gray;
}

/* Social Media */
.social-media {
  color: lightgray;
  font-size: 1.5rem;
}

.social-media:hover {
  color: white;
  font-size: 1.5rem;
}