html, body {
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: 'Hind', sans-serif;
    transition: background-color 0.5s ease;
}
nav {
    top: 0;
    left: 0;
    width:100%;
    font-size:22px;
    background-color: #121212;
    color: #FFFFFF;
    margin:0;
    padding:6px 0;
    height:45px;
}
hr {
    max-width: 50%;
    opacity: 0.8;
}
.left-nav{
    float: left;
    width: 100px;
}
.right-nav{
    float: right;
    width: 100px;
}
.icon-menu, .icon-info{
    float: left;
    margin:0;
    padding:12px 6px 0 6px;
}
.icon-resize-full,.icon-resize-normal, .icon-volume-high, .icon-volume-off {
    float: right;
    margin:0;
    padding:12px 12px 0 6px;
    display: none;
}
h1{
    font-size:22px; 
    display: inline-block;
    margin:0 auto;
    padding:6px 0;
}
h2{
    text-transform: capitalize;
    margin-bottom:20px;
    display: block;
    margin: 20px 0 0 0;
}
#color{
    display:block;
    width:80px;
    height:80px;
    border-radius:40px;
    margin:0 auto 20px;
}
button {
    margin: 25px auto 0;
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    text-decoration: none;
    background: #3b94ff;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 4px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
button:hover, button:focus {
    background: #0053ba;
}
button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}
button:active {
    transform: scale(0.99);
}
.slim{
    padding:8px 18px;
    border-radius: 0.8rem;
    background: #3d83d886;
    display: block;
    min-width: 200px;
}
.slim i{
    color: rgba(255,65,54,1);
}
.active {
    background: #0069ed;
}
.active i{
    color: rgba(46,204,64,1);
}
.secondary {
    border: 2px solid rgb(165, 3, 3);
    color: rgb(165, 3, 3);
    background: #FFF;
    display: none;
}
.secondary:hover, .secondary:focus {
    background: #fcc2c2;
}
.holder{
    width: 90%;
    padding: 0 5%;
}
section, aside div {
    display:inline-block;
    width:100%;
    border-radius:5px;
    background: #F9F9F9;		
/*    display: none;*/
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
.shrink{
    transform: scale(70%);
}
h3 {
    font-size:60px;
    margin: 0;
}
footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: #fff;
    font-size: 10px;
}
.ring{
    max-width: 75px;
    margin: 20px 0 20px 20px;
    flex: 30%;
    object-fit:scale-down;
}
.task {
    margin: 20px;
    flex: 70%;
    font-size: 28px;
    text-align: left;
}
aside{
    width: 100%;
}
aside a{
    color: #FFF;
}
aside div {
    flex:50%;
    margin: 5px;
}
aside .task{
    font-size: 18px;
    margin: 10px;
}
aside .ring {
    max-width: 50px;
    margin: 10px;
    object-fit:scale-down;
}
#preview{
    display: none;
}
#next{
    display: none;
}
#about {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background-color: rgba(0,0,0,0.98);
    color:#FFF;
    display: none;
    padding:0;
}
#about p, #about h2 {
    width:80%;
    max-width: 450px;
    margin: 20px auto;
}
#about h2{
    margin-top:60px;
}
.demo-icon {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-moon:before { content: '\e800'; } /* '' */
.icon-sun:before { content: '\e801'; } /* '' */
.icon-cog:before { content: '\e802'; } /* '' */
.icon-wrench:before { content: '\e803'; } /* '' */
.icon-play:before { content: '\e804'; } /* '' */
.icon-pause:before { content: '\e805'; } /* '' */
.icon-volume-off:before { content: '\e806'; } /* '' */
.icon-volume-high:before { content: '\e807'; } /* '' */
.icon-mic:before { content: '\e808'; } /* '' */
.icon-resize-full:before { content: '\e809'; } /* '' */
.icon-link:before { content: '\e80a'; } /* '' */
.icon-info:before { content: '\e80b'; } /* '' */
.icon-menu:before { content: '\e80c'; } /* '' */
.icon-github:before { content: '\e80d'; } /* '' */
.icon-resize-normal:before { content: '\e80e'; } /* '' */
.icon-ccw:before { content: '\e80f'; } /* '' */
.icon-star:before { content: '\e810'; } /* '' */
.icon-star-empty:before { content: '\e811'; } /* '' */
.icon-ok:before { content: '\e812'; } /* '' */
.icon-cancel:before { content: '\e813'; } /* '' */
.icon-mail:before { content: '\e814'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-bug:before { content: '\f188'; } /* '' */
.icon-share:before { content: '\f1e0'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */

/* close Icon */
.close {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 1;
}
.close:hover {
    opacity: 0.7;
    cursor: pointer;
}
.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #FFF;
}
.close:before {
    transform: rotate(45deg);
}
.close:after {
    transform: rotate(-45deg);
}

/* Toggles */
.switch-label{
    min-width:280px;
    display: block;
    margin:10px auto
}
label .label-content {
    width: 210px;
    display: inline-block;
    text-align: left;
}
input[type=checkbox] {
    position: relative;
    width: 51px;
    height: 31px;
    -webkit-appearance: none;
    -webkit-appearance: none;
    background: rgba(120, 120, 128, 0.6);
    outline: none;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background 300ms linear;
    margin-bottom: -10px;
}
input[type=checkbox]::before {
    position: absolute;
    content: "";
    width: 27px;
    height: 27px;
    top: 2px;
    left: 2px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: left 300ms;
}
input[type=checkbox]:checked {
    background: #3b94ff;
}
input[type=checkbox]:checked::before {
    left: 22px;
    background-color: #fff;
}

/* Background colors */
.dark{
    background:#111;
}
.dark nav{
    border-bottom: 1px solid #666;
}
.dark h3{ 
    color:#FFF;
}
.dark section, .dark aside div {
    background-color: #BFBDBD;
}
.red {
    background-color: rgba(255,65,54,0.8);
}
.orange {
    background-color: rgba(255,133,27,0.8);
}
.yellow {
    background-color: rgba(255,220,0,0.81);
}
.green {
    background-color:rgba(46,204,64,0.8);
}
.dark.red{
    background-color: #a13333;
}
.dark.orange{
    background-color: #c84b31;
}
.dark.yellow{
    background-color: #e79e4f;
}
.dark.green{
    background-color: #519872;
}

/* This hides the default radio buttons */
[type="radio"]:checked,
[type="radio"]:not(:checked){
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}
/* End Hide */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: relative;
  z-index: 99;
}
.nice-radios:checked + label,
.nice-radios:not(:checked) + label {
  position: relative;
  display: inline-block;
  padding: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  border-radius: 4px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  min-width: 65px;
  margin-bottom: 10px;
}
.nice-radios:checked + label {
  background-color: #3b94ff;
  border: 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.nice-radios:not(:checked) + label {
  background-color: rgba(120, 120, 128, 0.6);
  border: 1px solid transparent;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.nice-radios:not(:checked) + label:hover,
.nice-radios:checked + label:hover,
[type="radio"]:hover + label {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-transition: box-shadow 300ms ease;
  transition: box-shadow 300ms ease;
}
.ending{
   display: none;
}

/** Star Rating **/
.star-holder{
    font-size: 32px;
    cursor: pointer;
    user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.icon-star { 
    color:rgba(120, 120, 128, 0.6);
}
.icon-star.active { 
    color: #FFD700; 
    background: none; 
} 
.icon-star:hover { 
    color: #FFED85;
} 
.icon-star.hover {
    color: #FFED85;
}
.save-session-button {
    margin-top: 10px;
}
.dark .save-title{
    color: #FFF;
    margin:42px auto 0;
    font-size: 16px;
}
#log{
    background: rgba(0,0,0,0.98);
    max-width: 300px;
    margin: 0 auto;
    display: block;
}
#log p{
    margin: 5px auto;
    width:100%;

}
.icon-trash{
    margin-left: 8px;
}
.icon-ok {
    margin-right: 40px;
}
.icon-ok, .icon-cancel {
    font-size: 16px;
}
/* small screen of very zoomed in */
@media (max-width: 380px) {
    .task {
        font-size: 20px
    }
    .ring{
        max-width: 60px;
    }
    aside .ring{
        max-width: 40px;
    }
    aside .task{
        font-size: 14px;
    }
    h3{
        font-size: 46px;
    }
    h1 {
        font-size: 18px;
    }
    nav{
        font-size: 14px;
        padding: 6px 6px 0 3px;
    }
    .left-nav, .right-nav{
        width: 80px;
    }
    button{
        font-size: 16px;
        padding: 0.8rem 1.2rem;
        margin-right: 8px;
    }
    #about{
        font-size: 14px;
    }
  }