/*
  Additional CSS Styles for CSE 412 Course Website
  @author: Tal Wolman
  @attributions
    - portions of this site adapted from previous course website built by Hawk Ticehurst
    - calendar design inspired by Wen Qiu
*/

html {
  scroll-behavior: smooth;
}

body {
  width: 85%;
  margin: auto auto;
}

/* welcome container */
#welcome-container img {
  flex-direction: row;
  height: 35em;
  width: 30em;
}

/* quick links */
.buttons a {
  width: 16em;
  margin: 12px;
}

/* ta/instructor cards */
.card {
  width: 14em;
  margin: 1em;
}

.image {
  width: 14em;
  height: 14em;
}

.card-content a {
  padding-top: 0px;
  padding-right: 0px;
}

/* course calendar additional styles */
#calendar {
  width: 100%;
}

table .notification {
  padding: 4px;
  text-align: center;
  margin: 3px;
}

caption {
  text-align: left;
  padding-left: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 1rem;
  font-weight: 700;
  background-color: #485fc7;
  border-top: 0.5px solid lightgray;
  border-left: 0.5px solid lightgray;
  border-right: 0.5px solid lightgray;
  color: white;
}

aside {
  font-weight: 700;
  width: 10%;
}

.selected {
  background-color: #adb3b84d;
}

.assignment {
  width: 50%;
}

.sticky {
  position: sticky;
  top: 3.25rem;
  overflow-x: hidden;
}

.active {
  background-color: lightgray;
}

#calendar thead tr th {
  width: 37.5%;
}

#calendar thead tr th:first-child {
  width: 12.5%;
}

#calendar thead tr th:last-child {
  width: 12.5%;
}

/* office hours */
.important {
  color: red;
  font-weight: bold;
}

.day {
  background-color: #eef6fc;
  border-radius: 0.5em;
  padding: 10px;
  margin: 7px;
}

.time {
  display: inline-block;
  margin-left: 0.5em;
}

.names {
  margin-left: 1.5em;
}

.dot {
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: #485fc7;
}

.active-dot {
  background-color: #f14668;
}

#office-hours p {
  font-size: 14px;
}

#office-hours h2 {
  text-align: center;
}

/* resources */
.resources article {
  width: 300px;
  height: 450px;
}

.hidden {
  display: none !important;
}

/* responsive mobile/small screen additional styles */

@media screen and (max-width: 800px) {

  /* home page small screen/mobile additional styles */
  #welcome-container {
    flex-direction: column;
    align-items: center;
  }

  /* general table styles for small screen/mobile */
  table tr {
    display: flex;
    flex-direction: column;
  }

  table td {
    width: 100%;
    height: auto;
  }

  /* calendar page small screen/mobile additional styles */
  #cal-container {
    flex-direction: column;
  }

  #cal-container aside {
    width: 100%;
  }

  #cal-container .table td:empty {
    display: none;
  }

  #cal-container table thead {
    display: none;
  }

  #cal-container table tbody tr td:nth-child(1) {
    background-color: lightgray;
  }
}

/** GRAFFITI STYLES **/
#favorite-nav {
  background-color: cornflowerblue;
  color: #ffe8f3;
  font-family: 'Comic Sans MS', cursive;
  transition: 1s all ease-out;
}

#favorite-nav:hover {
  background-color: rgb(128, 0, 6);
  color: white;
}

#favorite-nav::after {
  content: "😈";
  margin-left: 10px;
  display: none;
}

#favorite-nav:hover::after {
  display: block;
}

.autograph:hover,
.graffiti img:hover {
  transform: scale(1.3);
}

.autograph,
.graffiti img {
  transition: 1s ease-out;
}

.autograph {
  position: absolute;
  transform: rotate(-10deg);
  filter: drop-shadow(0 0 5px #0000007d);
  z-index: 10;
}

#title {
  display: flex;
  align-items: flex-end;
}

#title-graffiti {
  display: flex;
  flex-direction: column;
}

#welcome-container {
  position: relative;
}

#welcome-img {
  flex-direction: row;
  height: 35em;
  width: 30em;
}

.strikethrough {
  text-decoration: line-through;
}

#title h1 {
  font-weight: 600;
  position: relative;
  margin-bottom: 1em;
}

#revenge {
  position: absolute;
  right: 0;
  display: block;
  font-family: 'Rubik Bubbles';
  color: crimson;
  font-weight: normal;
}

.graffiti img {
  position: absolute;
}

.card {
  overflow: visible;
}

.snowflake {
  position: absolute;
  top: 0px;
  transition: all .2s ease-out;
}

.snowflake {
  display: flex;
  align-items: flex-start;
}

.snowflake:hover img {
  transform: scale(2);
}

.snowflake p {
  padding: 0.2em;
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  margin: 0.3em 0.5em;
  max-width: 200px;
}

.snowflake img {
  width: 25px;
  transition: transform 0.5s ease-out;
}


/** INDIVIDUAL GRAFFITI **/
#elias-1 {
  right: -51px;
  bottom: 48px;
  width: 100px;
}

#allison-1 {
  width: 400px;
  left: 400px;
}

#marina-1 {
  top: 1em;
  height: 132px;
}

#marina-2 {
  width: 200px;
  margin: 0 auto;
}

#marina-3,
#marina-4 {
  width: 200px;
}

#kathryn-1 {
  height: 93px;
  right: 0;
}

#kathryn-2 {
  width: 200px;
  left: 207px;
  bottom: 113px;
}

#kathryn-3 {
  height: 100px;
  bottom: 100px;
}

#allan-autograph {
  bottom: -10px;
  right: -61px;
}

#elias-autograph {
  right: -11px;
  bottom: -13px;
  width: 138px;
}

#rasmus-autograph {
  left: 35px;
  bottom: -40px;
}

#marina-autograph {
  width: 150px;
  bottom: -21px;
  left: 83px;
  z-index: 10;
}

#donovan-autograph {
  bottom: -32px;
  right: -44px;
}

#kasten-autograph {
  width: 105px;
  bottom: -25px;
  right: -49px;
}

#kathryn-autograph {
  width: 100px;
  bottom: -27px;
  right: 0;
}

#kevin-autograph {
  bottom: -36px;
  right: -47px;
}

#tara-autograph {
  bottom: -49px;
  left: 34px;
}

#allison-autograph {
  bottom: -13px;
  left: 34px;
}

@media screen and (max-width: 800px) {
  #welcome-img {
    max-width: 500px;
  }

  #welcome-container .graffiti {
    display: none;
  }
}