style.css

! normalize.css v3.0.2 | MIT License | git.io/normalize@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');


html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:16px;
    line-height:1.5;
    color:#606c71;
}


article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block;
}
audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline;
}
audio:not([controls]){
    display:none;
    height:0;
}
[hidden],template{
    display:none;
}
a {
    background-color:transparent;
}
a:active,a:hover{
    outline:0;
}
abbr[title]{
    border-bottom:1px dotted;
}
b,strong{
    font-weight:bold;
}
dfn{
    font-style:italic;
}
h1{
    font-size:2em;
    margin:0.67em 0;
}
mark{
    background:#ff0;
    color:#000;
}
small{
    font-size:80%;
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup{
    top:-0.5em;
}
sub{
    bottom:-0.25em;
}
img{
    border:0;
}
svg:not(:root){
    overflow:hidden;
}
figure{
    margin:1em 40px;
}
hr{
    box-sizing:content-box;
    height:0;
}
pre{
    overflow:auto;
}
code,kbd,pre,samp{
    font-family:monospace, monospace;
    font-size:1em;
}
::-webkit-search-decoration{
    -webkit-appearance:none;
}
fieldset{
    border:1px solid #c0c0c0;
    margin:0 2px;
    padding:0.35em 0.625em 0.75em;
}
legend{
    border:0;
    padding:0;
}
textarea{
    overflow:auto;
}
optgroup{
    font-weight:bold;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
td,th{
    padding:0;
}
.highlight table td{
    padding:5px;
}
.highlight table pre{
    margin:0;
}
.highlight .cm{
    color:#999988;
    font-style:italic;
}
.highlight .cp{
    color:#999999;
    font-weight:bold;
}
.highlight .c1{
    color:#999988;
    font-style:italic;
}
.highlight .cs{
    color:#999999;
    font-weight:bold;
    font-style:italic;
}
.highlight .c,.highlight .cd{
    color:#999988;
    font-style:italic;
}
.highlight .err{
    color:#a61717;
    background-color:#e3d2d2;
}
.highlight .gd{
    color:#000000;
    background-color:#ffdddd;
}
.highlight .ge{
    color:#000000;
    font-style:italic;
}
.highlight .gr{
    color:#aa0000;
}
.highlight .gh{
    color:#999999;
}
.highlight .gi{
    color:#000000;
    background-color:#ddffdd;
}
.highlight .go{
    color:#888888;
}
.highlight .gp{
    color:#555555;
}
.highlight .gs{
    font-weight:bold;
}
.highlight .gu{
    color:#9b7878;
}
.highlight .gt{
    color:#aa0000;
}
.highlight .kc{
    color:#000000;
    font-weight:bold;
}
.highlight .kd{
    color:#000000;
    font-weight:bold;
}
.highlight .kn{
    color:#000000;
    font-weight:bold;
}
.highlight .kp{
    color:#000000;
    font-weight:bold;
}
.highlight .kr{
    color:#000000;
    font-weight:bold;
}
.highlight .kt{
    color:#445588;
    font-weight:bold;
}
.highlight .k,.highlight .kv{
    color:#000000;
    font-weight:bold;
}
.highlight .mf{
    color:#648080;
}
.highlight .mh{
    color:#009999;
}
.highlight .il{
    color:#009999;
}
.highlight .mi{
    color:#009999;
}
.highlight .mo{
    color:#009999;
}
.highlight .m,.highlight .mb,.highlight .mx{
    color:#009999;
}
.highlight .sb{
    color:#d14;
}
.highlight .sc{
    color:#d14;
}
.highlight .sd{
    color:#d14;
}
.highlight .s2{
    color:#d14;
}
.highlight .se{
    color:#d14;
}
.highlight .sh{
    color:#d14;
}
.highlight .si{
    color:#d14;
}
.highlight .sx{
    color:#d14;
}
.highlight .sr{
    color:#009926;
}
.highlight .s1{
    color:#d14;
}
.highlight .ss{
    color:#990073;
}
.highlight .s{
    color:#d14;
}
.highlight .na{
    color:#008080;
}
.highlight .bp{
    color:#999999;
}
.highlight .nb{
    color:#0086B3;
}
.highlight .nc{
    color:#445588;
    font-weight:bold;
}
.highlight .no{
    color:#008080;
}
.highlight .nd{
    color:#3c5d5d;
    font-weight:bold;
}
.highlight .ni{
    color:#800080;
}
.highlight .ne{
    color:#990000;
    font-weight:bold;
}
.highlight .nf{
    color:#990000;
    font-weight:bold;
}
.highlight .nl{
    color:#990000;
    font-weight:bold;
}
.highlight .nn{
    color:#555555;
}
.highlight .nt{
    color:#000080;
}
.highlight .vc{
    color:#008080;
}
.highlight .vg{
    color:#008080;
}
.highlight .vi{
    color:#008080;
}
.highlight .nv{
    color:#008080;
}
.highlight .ow{
    color:#000000;
    font-weight:bold;
}
.highlight .o{
    color:#000000;
    font-weight:bold;
}
.highlight .w{
    color:#bbbbbb;
}
.highlight{
    background-color:#008080;
}

a {
    color:#1e6bb8;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
.btn{
    padding: 13px;
    outline: none;
    cursor: pointer;
    display:inline-block;
    margin: 0 auto 2rem auto;
    color:rgba(255,255,255,0.7);
    background-color:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.2);
    border-style:solid;
    border-width:0.5px;
    border-radius:0.3rem;
    transition:color 0.2s, background-color 0.2s, border-color 0.2s;
}

.btn:hover {
    background-image: url('https://images.pexels.com/photos/6039245/pexels-photo-6039245.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1s;
    border-radius: 7px;
}

@media screen and (min-width: 64em){
    .btn{
        padding:0.75rem 1rem;
    }
}

@media screen and (min-width: 42em) and (max-width: 64em){
    .btn{
        padding:0.6rem 0.9rem;
        font-size:0.9rem;
    }
}

@media screen and (max-width: 42em){
    .btn{
        font-size:0.9rem;
    }
    .btn+.btn{
        margin-top:1rem;
        margin-left:0;
    }
}


.page-header{
    color:#fff;
    text-align:center;
    background-color:#159957;
    background-image:linear-gradient(120deg, #155799, #159957);
}

@media screen and (min-width: 64em){
    .page-header{
        padding:5rem 6rem;
    }
}

@media screen and (min-width: 42em) and (max-width: 64em){
    .page-header{
        padding:3rem 4rem;
    }
}

@media screen and (max-width: 42em){
    .page-header{
        padding:2rem 1rem;
    }
}

.project-name{
    margin-top:0;
    margin-bottom:0.1rem;
}

@media screen and (min-width: 64em){
    .project-name{
        font-size:3.25rem;
    }
}

@media screen and (min-width: 42em) and (max-width: 64em){
    .project-name{
        font-size:2.25rem;
    }
}

@media screen and (max-width: 42em){
    .project-name{
        font-size:1.75rem;
    }
   
    
}

.project-tagline{
    margin-bottom:2rem;
    font-weight:normal;
    opacity:0.7;
}

@media screen and (min-width: 64em){
    .project-tagline{
        font-size:1.25rem;
    }
}

@media screen and (min-width: 42em) and (max-width: 64em){
    .project-tagline{
        font-size:1.15rem;
    }
}

@media screen and (max-width: 42em){
    .project-tagline{
        font-size:1rem;
    }
}


.quote {
    background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
    height: 100%;
    width: 80%;
    margin: 4em auto 2em auto;
    padding: 10px;
    outline: none;
    border: none;
    line-height: 1.8em;
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 18px;
}

.creator {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}



.main-content {
    width: 70%;
    display: flex;
    justify-content: center;
    height: 100%;
    border-radius: 20px;
    margin: 3em auto 0 auto;
    padding: 10px;
}

.main-content h2 {
    font-size: 1.1rem;
    position: absolute;
    font-family: 'Balsamiq Sans', cursive;
}


.site-footer{
    padding-top:2rem;
    margin-top:2rem;
    border-top:solid 1px #eff0f1
}
/*
@media screen and (min-width: 64em){
    .site-footer{
        font-size:1rem;
    }
}
@media screen and (min-width: 42em) and (max-width: 64em){
    .site-footer{
        font-size:1rem;
    }
}
@media screen and (max-width: 42em){
    .site-footer{
        font-size:0.9rem;
    }
}
.site-footer-owner{
    display:block;
    font-weight:bold;
}
.site-footer-credits{
    color:#819198;
}
*/