-
{
margin:0; padding:0;
}
html, body {
width: 100%; height: 100%; position: relative;
}
p {
margin-bottom: 10px; font-size: 20px;
}
ul {
text-align: justify; margin-left: 50px; font-size: 20px;
}
.images, .vertical_images {
text-align: center;
}
.vertical_images img {
max-width: 300px; border-radius: 5px; margin: 25px 0px;
}
.images img {
max-width: 600px; border-radius: 5px; margin: 25px 0px;
}
.codeheader {
margin-top: 25px; margin-bottom: -1px; padding-left: 9.5px; text-align: left; border-radius: 5px 5px 0px 0px; background-color: #333333; color: #BBBBBB;
}
.logo {
height: 38px; max-width: initial; border-radius: initial; margin: initial;
}
background {
position: absolute; bottom: 0px; width: 100%; height: 50%; min-height: 300px; overflow: hidden;
}
.home {
position: relative; width: 100%; height: 100%; min-height: 600px; background-color: #333333;
}
.home .textbox {
position: absolute; left:50%; top:40%; transform: translate(-50%, -50%); color: #FFFFFF; text-align: center;
}
.home .textbox .title {
font-size: 50px; font-weight: bold; margin-bottom: 15px;
}
.home .textbox .desc {
color: #BBBBBB; margin-bottom: 25px; font-size: 25px;
}
.home .textbox .links a {
padding: 0px 10px; font-size: 3em; text-decoration: none;
}
.link {
color: #BBBBBB;
}
.hover {
color: #3379b7;
}
.page {
color: #333333; text-align: justify; padding: 75px 10% 75px 10%;
}
.page .cat {
text-align: center;
}
.page .cat .background {
display: inline-block; border-radius: 5px; text-align: center; background-color: #333333; margin: 2px 0px;
}
.page .cat .background .skill {
color: #FFFFFF; margin: 5px; font-size: 15px;
}
.highlight {
border-radius: 0px 0px 5px 5px; text-align: left; margin-bottom: 25px;
}
.contactBar {
position: fixed; bottom: 0px; width: 100%; height: 57px; background-color: #333333; text-align: center; color: #BBBBBB; z-index: 1000;
}
.contactBar .info{
display: inline-block; padding: 17px 20px;
}
.cat {
text-align: left;
}
.cat .background {
display: inline-block; border-radius: 5px; background-color: #333333; margin: 2px 0px;
}
.cat .background .skill {
color: #FFFFFF; margin: 5px; font-size: 15px;
}
.unstick {
display: none;
}
.projects {
background-color: #BBBBBB; padding: 50px 10% 75px 10%; height: auto; position: relative;
}
.projects .card {
height: 200px; border-radius: 5px; margin: 10px 10px;
}
.projects .card .overlay .content .desc{
color: #FFFFFF; text-align: justify; display: none;
}
.projects .card .overlay {
position: relative; width: 100%; height: 100%; background-color: rgba(51,51,51,0.5); border-radius: 5px;
}
.projects .card:hover .overlay {
background-color: rgba(51,51,51,1);
}
.projects .card:hover .overlay .content .desc{
display: block; margin: 0px; color: #BBBBBB;
}
.projects .card:hover .overlay .content .name{
display: none;
}
.hideProject {
display: none;
}
.unhideProject {
display: block;
}
.hidePost {
display: none;
}
.unhidePost {
display: block;
}
.arrow {
color: #333333; padding-left: 2px;
}
.arrow:hover {
color: #3379b7;
}
.flip {
transform: rotate(180deg); padding-left: 0px; padding-right: 2px;
}
.blog {
background-color: #FFFFFF; padding: 50px 10% 75px 10%; height: auto; position: relative;
}
.blog .post {
border-radius: 5px; padding: 0px; margin: 10px;
}
.blog .post:hover {
cursor: pointer;
}
.blog .post .postimg .info {
padding: 10px 10px 15px 10px; background-color: #333333; border-radius: 0px 0px 5px 5px; position: absolute; bottom: 0%; left: 0%; width: 100%;
}
.blog .post .postimg .info .title {
font-weight: bold; margin-bottom: 0px; text-align: center; color: #BBBBBB;
}
.blog .post .postimg .info .date {
font-size: 15px; text-align: center; color: #BBBBBB; margin-bottom: 10px;
}
.blog .post .postimg .info .desc {
margin: 10px 0px; text-align: justify; font-size: 15px; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; color: #BBBBBB;
}
.blog .post .postimg .info .cat {
text-align: center;
}
.blog .post .postimg .info .cat .background {
display: inline-block; border-radius: 5px; background-color: #BBBBBB; margin: 2px 0px;
}
.blog .post .postimg .info .cat .background .skill {
color: #333333; margin: 3px; font-size: 10px;
}
.blog .post .postimg {
height: 400px; width: 100%; border-radius: 5px; position: relative;
}
.blog .post .postimg .overlay {
position: relative; width: 100%; height: 100%; border-radius: 5px; background-color: rgba(51,121,183,0.5); display: none;
}
.blog .post:hover .postimg .overlay {
display: block;
}
.topnav {
position: fixed; top: 0; left: 0; right: 0; width: 100%; overflow: hidden; background-color: #333333; z-index: 1000;
}
.menuBurger:link, .menuBurger:visited {
color: #BBBBBB;
}
.menuPage:link {
color: #BBBBBB; text-decoration: none;
}
.activePage:link {
color: #3379b7; text-decoration: none;
}
.menuBurger {
float: left; display: none; color: #BBBBBB; text-align: center; padding: 17px 16px; text-decoration: none; font-size: 20px;
}
.menuBurger:hover {
color: #3379b7; text-decoration: none;
}
.menuPage {
float: left; display: block; color: #BBBBBB; text-align: center; padding: 17px 16px; text-decoration: none; font-size: 20px;
}
.menuPage:hover {
color: #3379b7; text-decoration: none;
}
.activePage {
color: #3379b7; pointer-events: none; cursor: default;
}
.activePage:hover {
text-decoration: none;
}
.inactiveLink {
pointer-events: none; cursor: default;
}
.inactiveLink:hover {
text-decoration: none;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 991px) {
#placeholderPost { display: none; }
}
@media screen and (max-width: 868px) {
.topnav .menuPage:not(:first-child) { display: none; } .topnav .icon { float: right; display: block; } .topnav.responsive { position: fixed; } .topnav.responsive .icon { position: fixed; right: 0; top: 0; } .topnav.responsive .menuPage { float: none; display: block; text-align: left; } .topnav.responsive .menuPage:hover { background-color: #3379b7; color: #333333; } .contactBar .infoHide { display: none; }
}
.postTitle {
text-align: left; }
.iconLink {
color: #333333;
}
.iconLink:hover {
color: #3379b7;
}
.highlight .hll { background-color: ffffcc } .highlight { background: f5f5f5; } .highlight .c { font-style: italic } /* Comment */ .highlight .err { border: 1px solid #FF0000 } /* Error */ .highlight .k { font-weight: bold } /* Keyword */ .highlight .ch { font-style: italic } /* Comment.Hashbang */ .highlight .cm { font-style: italic } /* Comment.Multiline */ .highlight .cpf { font-style: italic } /* Comment.PreprocFile */ .highlight .c1 { font-style: italic } /* Comment.Single */ .highlight .cs { font-style: italic } /* Comment.Special */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gh { font-weight: bold } /* Generic.Heading */ .highlight .gp { font-weight: bold } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { font-weight: bold } /* Generic.Subheading */ .highlight .kc { font-weight: bold } /* Keyword.Constant */ .highlight .kd { font-weight: bold } /* Keyword.Declaration */ .highlight .kn { font-weight: bold } /* Keyword.Namespace */ .highlight .kr { font-weight: bold } /* Keyword.Reserved */ .highlight .s { font-style: italic } /* Literal.String */ .highlight .nc { font-weight: bold } /* Name.Class */ .highlight .ni { font-weight: bold } /* Name.Entity */ .highlight .ne { font-weight: bold } /* Name.Exception */ .highlight .nn { font-weight: bold } /* Name.Namespace */ .highlight .nt { font-weight: bold } /* Name.Tag */ .highlight .ow { font-weight: bold } /* Operator.Word */ .highlight .sa { font-style: italic } /* Literal.String.Affix */ .highlight .sb { font-style: italic } /* Literal.String.Backtick */ .highlight .sc { font-style: italic } /* Literal.String.Char */ .highlight .dl { font-style: italic } /* Literal.String.Delimiter */ .highlight .sd { font-style: italic } /* Literal.String.Doc */ .highlight .s2 { font-style: italic } /* Literal.String.Double */ .highlight .se { font-weight: bold; font-style: italic } /* Literal.String.Escape */ .highlight .sh { font-style: italic } /* Literal.String.Heredoc */ .highlight .si { font-weight: bold; font-style: italic } /* Literal.String.Interpol */ .highlight .sx { font-style: italic } /* Literal.String.Other */ .highlight .sr { font-style: italic } /* Literal.String.Regex */ .highlight .s1 { font-style: italic } /* Literal.String.Single */ .highlight .ss { font-style: italic } /* Literal.String.Symbol */ .highlight .na { font-weight: bold; color: #337ab7} .highlight .o { font-weight: bold;} .highlight .nf { font-weight: bold;} .highlight .nl { color: #337ab7} .highlight .bp { color: #337ab7}