/* Setup */
.float {
  box-shadow: 0px 0px 0.6rem 0px #ccc;
  border: 1px solid black;
}

html {
  margin: 0rem 1rem;
  max-width: 100vw;
  overflow: scroll;
  background-color: #eee;
}

body {
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  max-width: inherit;
  min-width: 90vw;
  justify-content: center;
}

/* Side Panel */

.aside {
  display: flex;
  flex-direction: column;
  margin: 1rem;
}

.profile-panel {
  background-color: white;
}

.profile {
  display: flex;
  flex-direction: column-reverse;
  padding: 1rem 0rem 0rem 0rem;
}

.profile > * {
  align-self: center;
}
.profile h1 {
  margin: 0;
}

.profile-panel {
  position: sticky;
  top: 1rem;
  margin: 1rem 1rem 0rem 1rem;
  padding: 1rem;
  min-width: 20rem;
}
.profile-panel .links {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.links a {
  display: block;
  margin: 0rem 0.5rem;
  text-align: center;
}

a {
  text-decoration: #49bfff dotted underline;
  text-decoration-thickness: 2px;
  background: transparent;
  color: black;
}

a:hover {
  text-decoration: #49bfff solid underline;
  text-decoration-thickness: 2px;
}

a:focus {
  text-decoration: #49bfff solid underline;
}

/* Content */
.content {
  min-width: auto;
  margin: 0rem 1rem;
  flex-basis: 100%;
  max-width: 51rem;
  width: inherit;
}

.section {
  display: flex;
  flex-direction: column;
  padding: 0rem;
  margin: 1rem auto;
  /* max-width: 50rem; */
  width: inherit;
  background-color: white;
}

.section hr {
  background: #89bbd8;
  background-size: 1rem;
  height: 2px;
}

.section h1,
h2.week {
  padding: 0rem 1rem;
  width: inherit;
  background-color: #89bbd8;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  border-color: #000;
}

.row {
  background-color: white;
  padding: 1rem;
}

div .hr {
  padding: 0rem 0rem;
}
.section h1,
h2,
h3,
h6 {
  margin: 0;
}

.row .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.row .title > * {
  align-self: baseline;
}

.row .title > h3 {
  margin: 0rem 0rem 0rem 2rem;
}

/* Project Page */

.blog-type p {
  font-size: 1.5rem;
  padding: 1rem;
}

.blog-type img {
  max-width: 100%;
  width: inherit;
}

.blog-type table {
  font-size: 1.5rem;
  margin: auto;
  border-collapse: collapse;
}

.blog-type tr:nth-child(odd) {
  background-color: rgba(73, 191, 255, 0.25);
}

.blog-type td:first-child {
  font-family: monospace;
  text-align: center;
}
.blog-type th:first-child {
  text-align: center;
}

.blog-type tr:first-of-type {
  background-color: #89bbd8;
  font-size: 1.25em;
}

.blog-type th:nth-child(2),
.blog-type td:nth-child(2) {
  text-align: left;
}

.blog-type td,
.blog-type th {
  border: 1px solid #444;
  padding: 0.5rem;
}

/* CPSC457 W20 Stuff */
#maintitle {
  text-align: center;
}
.week-title {
  min-width: 9rem;
  border-color: #89bbd8;
  border-width: 0px;
  border-style: solid;
  padding: 0.15rem;
}
.week-title h2 {
  text-align: left;
}
.title .hr {
  flex-basis: 100%;
}

div.day-container {
  display: flex;
  justify-content: space-evenly;
}

div.day {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(73, 191, 255);
  background: rgba(73, 191, 255, 0.05);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  flex-basis: 45%;
}

div.day h3 {
  margin: 0rem 0rem 1rem 0rem;
  border-style: dashed;
  border-width: 0px 0px 1px 0px;
  border-color: rgb(73, 191, 255);
  width: inherit;
  text-align: center;
  color: #444;
  padding: 0.25rem;
}

div.day-content {
  padding: 0rem 1rem 1rem 1rem;
  font-size: 1.25rem;
}

/* Making sure things fit in the screens */
@media screen and (max-width: 1920px) {
  body {
    flex-direction: row;
  }
}

@media screen and (max-width: 960px) {
  html {
    margin: 0rem;
  }
  .profile-panel {
    position: relative;
    top: auto;
    margin: 0rem;
    min-width: 10rem;
  }
  aside {
    flex-basis: 100%;
  }
  body {
    flex-direction: column;
    margin: 1em;
  }
  .content {
    margin: 0rem;
    max-width: unset;
  }
}
@media screen and (max-width: 600px) {
  html {
    background-color: white;
  }
  .float {
    border: none;
    box-shadow: none;
    margin: 1rem 0rem;
  }
  .profile-panel .links {
    justify-content: space-around;
    flex-flow: wrap;
  }
  body {
    margin: 0em;
  }
  .row .title > h3 {
    margin: 0rem;
  }
  div .day-container {
    flex-direction: column;
  }
  div.day {
    width: inherit;
    margin: 1rem 0rem;
  }
  .blog-type table {
    width: 100%;
  }
}

hr {
  border: none;
  background: black;
  height: 2px;
}

/*
  Custom icons for bullets
*/
.ul-icons {
  list-style: none;
  padding: 0;
  margin: 0;
}

li.icon {
  display: flex;
}

li.icon:before {
  align-self: baseline;
  content: "";
  height: 1em;
  width: 1em;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 0.5rem;
}

.pdf:before {
  clear: left;
  background-image: url("/svgs/light/file-pdf.svg");
}

.src:before {
  clear: left;
  background-image: url("/svgs/light/file-code.svg");
}

/* image-cropper and profile-pic css was taken from
https://medium.com/@biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd30
*/
.image-cropper {
  height: 10rem;
  width: 10rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.image-cropper img {
  display: inline;
  margin: 0 auto;
  margin-top: -17%;
  margin-left: -5%;
  height: 125%;
  width: auto;
}