/**************/ /* BASE RULES */ /**************/ body { background-image: url('../images/background.png'); padding: 20px; font-family: 'Lato', sans-serif; font-size: 17px; margin: 70px auto; width: 70%; color: #999; } .page__content { text-align: center; background-image: url('../images/background.png'); } nav ul, footer ul { font-family:'Helvetica', 'Arial', 'Sans-Serif'; padding: 0px; list-style: none; font-weight: bold; } nav ul li, footer ul li { display: inline; margin-right: 20px; } a { text-decoration: none; color: #999; } a:hover { text-decoration: underline; } h3 { font-size: 1.5em; font-family:'Helvetica', 'Arial', 'Sans-Serif'; color: #999; } h4 { font-size: 17px; } p { font-size: 17px; line-height: 1.5; text-align: center; color: #999; } .pure-menu-item { margin: 5px 0 0 0; } } footer { border-top: 1px solid #d5d5d5; font-size: .8em; color: #999; } .faicon { color: black; font-size: 25px; } .faicon:hover { color: #bb8f0a; } ul.blog { background-image: url('../images/background.png');" padding: 20px; font-family: 'Lato', sans-serif; font-size: 17px; margin: 70px auto; width: 70%; color: #999; } ul.posts { background-image: url('../images/background.png');" padding: 20px; font-family: 'Lato', sans-serif; font-size: 17px; margin: 70px auto; width: 70%; color: #999; } ul.posts li { list-style: none; color: #999; } h1, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Merriweather', Georgia, Times; font-weight: 700; color: #999; } blockquote p { font-size: 17px; line-height: 1.6em; } /*Experience*/ .collapse { border-radius: 8px; overflow: hidden; } .collapse .tab { margin: 0; } .collapse .tab-toggle { display: none; } .collapse .tab-label { display: flex; justify-content: space-between; padding: 0.6em; margin-top: 0.5em; border-radius: 8px; border: 2px solid lightgrey; margin-bottom: 0.8em; } .collapse .tab-label:hover { background-color: #eddfe6; } .collapse .tab-toggle:checked ~.tab-label { /*background-color: #eddab4;*/ } .collapse .tab-label::after { /*content: '\276F';*/ content: '\002B'; transition: all .4s; } .collapse .tab-toggle:checked ~ .tab-label::after { /*transform: rotate(90deg);*/ content: '\002D'; } .collapse .tab-content { max-height: 0px; overflow: hidden; transition: all .4s; padding: 0 1em; } .collapse .tab-toggle:checked ~ .tab-content { max-height: 200vh; padding: 0.2em; } /*Cards*/ .container { display: flex; flex-wrap: wrap; text-align: center; } .card { width: 110px; height: 160px; margin: 10px; padding: 20px 20px 0 20px; border: 2px solid lightgrey; border-radius: 10px; } .card:hover { /*box-shadow: 5px 5px 4px #888888;*/ -webkit-box-shadow: 2px 4px 21px 0px rgba(148,133,148,0.75); -moz-box-shadow: 2px 4px 21px 0px rgba(148,133,148,0.75); box-shadow: 2px 4px 21px 0px rgba(148,133,148,0.75); } .card .row { margin-top: -5px; } /*Works*/ .works-container { display: flex; flex-wrap: wrap; justify-content: center; } .img-links { color: white; border: 1px solid lightgrey; margin: 5px; border-radius: 10px; overflow: hidden; } .img-links:hover { text-decoration: none; } .works { width: 300px; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; } .works:hover { opacity: 0.55; -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-in-out; } .works-link { opacity: 1; font-size: 40px; position: relative; top: -30px; color: #bb8f0a; } .website { font-size: 20px; font-weight: bold; border: 1px solid lightgrey; border-radius: 10px; padding: 5px 5px 0 5px; position: relative; top: -45px; }