/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNS-Light"), local(".SFNSText-Light"),
    local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"),
    local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 300;
  src: local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"),
    local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"),
    local("Segoe UI Light Italic"), local("Ubuntu Light Italic"),
    local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 400;
  src: local(".SFNS-Regular"), local(".SFNSText-Regular"),
    local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"),
    local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 400;
  src: local(".SFNS-Italic"), local(".SFNSText-Italic"),
    local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"),
    local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 500;
  src: local(".SFNS-Medium"), local(".SFNSText-Medium"),
    local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"),
    local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 500;
  src: local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"),
    local(".HelveticaNeueDeskInterface-MediumItalicP4"),
    local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"),
    local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 700;
  src: local(".SFNS-Bold"), local(".SFNSText-Bold"),
    local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"),
    local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 700;
  src: local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"),
    local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"),
    local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"),
    local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}

:root {
  font-family: system-ui;
  /* (62.5/100) * 16px = 10px */
  font-size: 62.5%;
  /* 14px */
  --font-size--small: 1.4rem;
  /* 16px */
  --font-size--default: 1.6rem;
  /* 24px */
  --font-size--large: 2.4rem;
}

body {
  font-size: var(--font-size--default);
  min-height: 100vh;
}

.container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
}

.dashboard {
  display: grid;
  grid-template-rows: auto 1fr;
}

.content {
  display: grid;
  grid-template-columns: 4fr 1fr;
  background-color: rgb(230, 225, 225);
  padding: 1rem;
}
.side-piece {
  padding: 0.5rem;
  gap: 1rem;
  align-content: start;
  display: grid;
  grid-template-rows: auto auto auto auto;
}

.bt-separator {
  padding-bottom: 1rem;
  border-bottom: 1px solid;
}

.no-margin {
  margin: 0;
}

.actions {
  display: grid;
  grid-template-rows: auto auto;
  box-shadow: 2px 5px 5px gray;
  z-index: 0;
  padding: 0.5rem;
}

.sidebar {
  background-color: seagreen;
  color: white;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4rem;
  padding: 1rem;
  align-content: start;
}

.projects {
  padding: 0.5rem;
  gap: 1rem;
  align-content: start;
  display: grid;
  grid-template-rows: auto auto;
}

.title-style-one {
  font-size: 2.2rem;
  margin: 0;
}

.title-style-two {
  font-size: 1.8rem;
  margin: 0;
  padding-bottom: 0.5rem;
}

.cardboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.cards {
  display: grid;
  grid-template-rows: auto auto auto;
  background-color: seagreen;
  color: white;
  padding: 1rem;
  border-radius: 10px;
  gap: 1rem;
  border-left: 0.5rem solid orange;
  align-content: space-between;
}

.header-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.hd-tp-one {
  display: grid;
  grid-template-columns: 1fr 5fr;
  align-items: center;
}

.hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(
    1px 1px 1px 1px
  ); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(
    1px,
    1px,
    1px,
    1px
  ); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(
    50%
  ); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

.transparent {
  background-color: transparent;
  border: transparent;
  padding: 0 0.5rem;
  width: 35px;
  cursor: pointer;
  text-align: center;
}

.center-align {
  justify-self: center;
}

.end-align {
  justify-self: end;
}

.align-pad {
  padding-top: 0.5rem;
}

.space-pad-one {
  padding-left: 1rem;
}

.space-pad-two {
  padding-top: 0.5rem;
}

.bold {
  font-weight: bold;
}

.hd-tp-two {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.header-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.hd-bt-one {
  display: grid;
  grid-template-columns: 1fr 5fr;
  align-items: center;
}

.hd-bt-two {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
}

.green-button {
  border: none;
  background-color: seagreen;
  color: white;
  border-radius: 15px;
  padding: 0.5rem 0;
}

.gray-bar {
  background-color: rgb(230, 225, 225);
  border-radius: 15px;
  width: 50ch;
  border: none;
  padding: 0.5rem;
}

.gray-bar:focus-visible {
  outline: 2px solid black;
}

.round-img {
  border-radius: 50%;
}

.small-img {
  width: 50px;
  padding: 0.5rem;
}

.big-img {
  max-width: 80px;
  padding: 0.5rem;
}

.large-text {
  font-size: var(--font-size--large);
  font-weight: bold;
}

.links,
.settings {
  display: grid;
  gap: 1rem;
}

.grid-links {
  gap: 1rem;
  grid-template-columns: auto auto;
  display: grid;
  align-items: center;
  justify-content: start;
  text-decoration: none;
  color: inherit;
}

.grid-links:focus-visible,
.title-links:focus-visible {
  text-decoration: underline;
}

.title-links {
  text-decoration: none;
  color: inherit;
}

.card-logo-justify {
  justify-self: end;
  gap: 1rem;
  display: grid;
  grid-template-columns: auto auto auto;
}

.white-card-one,
.white-card-two {
  background-color: white;
  border-radius: 10px;
  padding: 1rem;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

.white-card-two {
  grid-template-rows: auto auto auto auto;
}

/* Attributions:

- Orange Tabby Kitten on Green Plant, Photo by Chris Clark: https://www.pexels.com/photo/orange-tabby-kitten-on-green-plant-12109413/
- Icons from materialdesignicons.com
- Photo by Rémi Rémino: https://unsplash.com/@remino?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
- Photo by Cédric VT: https://unsplash.com/@cedric_photography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
- Photo by Melanie Andersen: https://unsplash.com/@frolleinandersen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
- Photo by The Lucky Neko: https://unsplash.com/@theluckyneko?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText

*/