styles.css

/* ===========
    General
==============*/
:root {
  --dark-purple: #6271ff;
  --med-purple: #ccd3ff;
  --light-purple: #f2f4ff;
  --white: #ffffff;
  --green: #d3ffcc;
  --red: #da2720;
  --black: #020202;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  /* overflow-x: hidden; */
}

/* Stop Animations on window resize */
.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}
/* ===========
    End General
==============*/
/* ============
    Typography
===============*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Prata', serif;
}

#nav,
#footer,
.todo-header,
.notes-header,
.timer-header {
  color: var(--white);
}
/* Name Input */
.name-input {
  color: var(--white);
  background-color: transparent;
  max-width: 350px;
  border: none;
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--white);
  opacity: 1; /* Firefox */
  text-align: center;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--white);
  text-align: center;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--white);
  text-align: center;
}
/* End Name Input */

/* Font Awesome Icons */
.fa-check-circle,
.fa-sticky-note,
.fa-stopwatch,
.fa-plus-square,
.fa-minus-square,
.fa-star {
  color: var(--dark-purple) !important;
  cursor: pointer;
}

/*End Font Awesome Icons */
/* ============
    End Typography
===============*/
/* ===========
    Layout
==============*/
/* Main Layout */
.main-container {
  min-width: 338px;
}
#nav {
  background-color: var(--dark-purple) !important;
}

#main {
  background-color: var(--light-purple);
  min-height: calc(100vh - 68.8px);
}

#footer {
  background: var(--dark-purple) !important;
}

/* Media Query Tablets and up */
@media (min-width: 768px) {
  #main {
    min-height: 100vh;
  }

  #nav {
    min-height: 100%;
  }
  #todo {
    margin-right: 1rem;
  }
  #nav-btn {
    display: none;
  }
}
/* End Media Query */
/* End Main Layout */

/* Nav bar */
.ham-menu {
  height: 0;
  overflow: hidden;
  transition: 0.3s linear all;
}

.ham-menu.active {
  height: 70px;
}

.ham-menu ul li {
  cursor: pointer;
}
/* End Nav bar */

/* Main Content */
.main-header-wrapper {
  background-color: var(--dark-purple) !important;
  color: var(--white);
  min-height: 20vh;
  display: none;
}

.main-content-wrapper {
  min-height: 85vh;
}

.content-main {
  height: 85vh;
  background-color: var(--med-purple);
  overflow: auto;
}

.content-aside {
  height: 85vh;
  background-color: var(--med-purple);
  overflow: auto;
}

/* Tablets and up */
@media (min-width: 768px) {
  .main-header-wrapper {
    display: flex;
  }

  .main-content-wrapper {
    min-height: 75vh;
  }

  .content-main {
    height: 55vh;
    overflow: auto;
  }

  .content-aside {
    background-color: var(--med-purple);
    width: 100%;
    height: 17vh;
    overflow: auto;
  }

  /* weather API */
  #weather-icon {
    height: auto;
    max-width: 75px;
  }

  #temperature-section {
    cursor: pointer;
  }
  #todo {
    margin-right: 1rem;
  }
  /* Timer Layout */
  .timer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px !important;
  }

  .timer-count {
    margin: 0 2px !important;
  }

  #timer-btns {
    display: flex;
    flex-direction: column;
  }

  .timer-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  #timer-start {
    margin-right: 0 !important;
    margin-bottom: 5px !important;
  }

  .timer-count,
  #timer-btns {
    margin-top: 0 !important;
  }
}
/* End Main Content */
/* ============
    End Layout
===============*/
/* ==============
    Widget Cards
=================*/

.todo-header,
.notes-header,
.timer-header {
  background-color: var(--dark-purple) !important;
}

.timer-count {
  background-color: var(--dark-purple) !important;
}
/* Note Cards */
#add-note,
#notes-expand {
  background-color: var(--dark-purple);
  color: var(--white);
}

.note-collapse-container {
  max-height: 0;
  overflow: auto;
  /* transition: 0.3s linear all; */
}

.note-collapse-container.active {
  /* Using max height to allow auto height expansion */
  max-height: 200px;
}
/* Mobile Only Widget Card View */
@media (max-width: 767px) {
  /* Stack Cards */
  .widget-card-wrapper {
    position: relative;
  }

  .widget-card {
    position: absolute;
  }
  /* End Stack Cards */

  /* Add - Remove Opacity 0 */
  #todo,
  #notes,
  #timer {
    opacity: 0;
    transition: 0.3s ease opacity;
  }

  #todo.active,
  #notes.active,
  #timer.active {
    opacity: 1;
    z-index: 1;
  }
  /* End Add - Remove Opacity 0 */

  /* Add z-index for text input on absolute position */
  .todo-input,
  .fa-plus-square {
    z-index: 1;
  }
  /* End z-index */
}

/* Todo Widget Animation */
.todo-list-item {
  cursor: pointer;
  overflow: hidden;
}

.todo-list-item.background-color {
  background-color: var(--green);
}
@keyframes strike {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/*End Todo Widget Animation */
/* =================
    End Widget Cards
====================*/

/* Swal Alert */
.swal-button {
  background-color: var(--dark-purple);
}
/* End Swal Alert */

/* ========
  Footer
============*/
#footer .social-links a i:hover {
  transform: translateY(-3px);
  color: var(--med-purple);
  transition: all 0.3s ease-in-out;
}
/* ========
  End Footer
============*/