/*Document font*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;500;700&display=swap');

/* CSS Variables */
:root {
  --background-colour: white;
  --text-colour: black;
  --link-colour: red;
  --secondary-text-colour: darkgrey;
  --divider-colour: lightgrey;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-colour: #121212;
    --text-colour: white;
    --link-colour: red;
    --secondary-text-colour: darkgrey;
    --divider-colour: lightgrey;
  }
  body {
    background-color: var(--background-colour);
    color: var(--text-colour);
  }
}

/*box sizing*/
* {
  box-sizing: border-box;
  margin:0;
}

html {
  font-family: "Roboto Mono", monospace;
}

a {
  text-decoration: none;
  color: var(--link-colour);
  font-size: 14px;
  padding: 0;
  margin: 0;
}
li+li:after{
  padding-right: 2em;
  content: "\0020";
}
img,video {
  display: block;
  height: auto;
  margin-bottom: 0.25em;
  border-radius: 0.5em;
}

}
nav>a{
  padding-right: 2em; 
}
.nobreak {
  white-space: nowrap;
}

ul.quickjump {
  padding: 16px 10px;
  list-style: none;
}
ul.quickjump li {
  display: inline-block;
  font-size: 12px;
}
ul.quickjump li a {
  color: var(--secondary-text-colour);
  text-decoration: none;
}

/*Navigation*/
.navbar {
  margin: 20px 10px 100px;
}
/*page max width 1200px*/
.page-width {
  max-width:1200px;
  margin: auto;
}
.site-footer {
  margin-top: 2em;
  padding-bottom: 3em;
}
.footer-divider {
  border-top: 1px solid var(--divider-colour);
}
.footer-nav {
  display: flex;
  gap: 2em;
  padding: 1em 0;
}
.footer-nav a {
  color: var(--link-colour);
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}
/*project containers*/
.section-container {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
.image-container {
  position: relative;
}
.proj-title {
  margin:2vw 3% 0 0;
  flex-basis: 35%;
}
.proj-intro{
  margin:2vw 0 5vh 0;
  flex-basis: 60%;
}
/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Create equal columns */
.column {
  flex-basis: 50%;  
  padding:0 1em 0 0;
  margin-bottom: 2em;
}

/************************** MEDIA QUERIES **********************/
@media screen and (max-width: 768px) {
  .proj-title {
    flex-basis: 80%;
  }
  .proj-intro {
    flex-basis:80%;
  }
  .row {
    flex-flow: column;
  }
  .column {
    padding:0;
  }
}
@media screen and (max-width: 414px) {
  .proj-title {
    flex-basis: 100%;
  }
  .proj-intro {
    flex-basis:100%;
  }
  .row {
    flex-flow: column;
  }
  .column {
    padding:0;
  }  
}
/**************************** typography **********************/

hr {
  border-top: 1px solid var(--divider-colour);
  margin: 0 10px;
}
p {
  font-size: 14px;
  display: block;
  font-weight: normal;
  color: var(--text-colour);
  padding-right: 4vw;
}
h1 {
  font-size: 36px;
  display: block;
  font-weight: bolder;
   color: var(--text-colour);
}

h2 {
  font-size: 18px;
  display: block;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--link-colour);
}

h3 {
  font-size: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--link-colour);
}

h4 {
  font-size: 18px;
  display: block;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-colour);
}
  
h5 {
  font-size: 18px;
  font-weight: 300;
}

h6 {
  font-size: 10px;
  display: block;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--secondary-text-colour);
  margin-bottom: 5em;
}