html { 
    font-size: 16px;

}
body { 
    /* font-family: Candara, Arial, Sans-Serif; */
    max-width: 1080px;
	font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

header h1 {
    color: orange;
    opacity: 0.65;
    font-weight: bold;
    text-shadow: 3px 2px #666;
    font-size: 44px;
    margin: 1rem 0;
}


footer {
    text-align: center;
    background-color: black;
    padding: .5rem;
    border-radius: 0 0 15px 15px;
    opacity: 0.6;
    color: white;
    font-size: 12px;
}

div#main {
    background-color: #efefef;
    border-radius: 15px 15px 0 0;
    
    
    margin-top: 1rem;
    padding: .1rem;
    
    margin-bottom: 0;
    
    display: block;

}


.active-content { 
    display: block;
}


h1 { 
    font-weight: bold; 
}

a { 
    text-decoration: none;
    color: orange;
}


#filter { 
    margin: 1rem;
}

#filter input { 
    width: calc(100% - 1rem);
    font-size: 1rem;
    padding: .5rem;
    border-radius: 4px;
    border: 1px solid #aaa;
    box-shadow: 2px 2px 2px #aaa;
}

#filter input :focus {
    border: 1px solid gold;
}


a.button { 
    background: orange;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

a.button.disabled { 
    background: grey;
    padding: 1px 3px;
    opacity: 5;
    font-weight: bold;
    color: white;
    cursor:text;
}


.hide { 
    display: none;
}

.mobile { 
    display: none;
}

ul#quotes, 
ul#notes {
    margin: 0;
    padding: 0 1rem; 
}


ul>li{ 
    list-style-type: square;
    padding: .2rem 0;
}



table td, table th { 
    vertical-align: top; 
    text-align: left;
    border: 1px solid #eee;
}

table {
    border: 1px solid #eee;
}



section#yearSelection { 
    text-align: center;
}

section#yearSelection select { 
    text-align: center;
    padding: 0rem;
    margin-bottom: 1rem;
    width: 100%;    
    
    color: orange;
    font-family: "Apple Chancery", sans-serif;
    font-size: 24px;
    font-weight: bold;
    
    border-color: gold;
    border-radius: 8px;
    
}

.keyword-project { 
    color: orange;
}
.keyword-skill { 
    color: rgb(74 103 251);
}



.right { 
	float: right;
}



.no-margin-bottom { 
    padding-bottom: 0;
    margin-bottom: 0;
}

.well { 
    border: solid 2px black; 
    border-radius: 8px; 
    box-shadow: 4px 4px #ddd;
    padding: 1rem;
    background: #eee;
    font-size: 14px;
}

.well-info { 
    background: rgb(255, 249, 213);
    border-color: rgb(255, 236, 130); 
    margin: 1rem;
}

.well-error { 
    background: rgb(255, 236, 230);
    border-color: rgb(255, 157, 157); 
    margin: 1rem;
    margin-top: 0;
}

.well-greyscale { 
    background: white;
    border-color: #ccc; 
    margin: 1rem;
    margin-top: 0;
}

#dream-notice { 
  display: inline-block;
  animation: 500ms fadeIn;
  animation-delay: 0;
  animation-fill-mode: forwards;
  visibility: hidden;
}


.answer-blue { 
    color: rgb(74 103 251);
}

.code {
    font-family: Monaco, monospace;
    word-break: normal;
}
pre {
    overflow: auto;
    font-family: 'Monaco', monospace;
  }

.bold { 
    font-weight: bold;
}


@media (max-width: 600px) { 
    .desktop { 
        display: none;
    }

    .mobile { 
        display: inline-block;
    }

    div>ul { 
        margin-top: .5rem;
        margin-left: -1rem;
        line-height: 1.5rem;
    }


}


span.showOnHover { 
    display: none;
}
.triggerHover:hover span.showOnHover { 
    display: inline-block;
    background: #888; 
    color: white;
    padding: .5rem;
    position: absolute;
    border-radius: 4px;
    font-size: smaller;
}