/*These are the general colors and styles I want to use across my webpages for a consistent look*/
/*Needed for parallax to work correctly*/
body,html{
height:100%;
margin:0;
}
/*HTML tags*/
body{
background-color:#161A25;
color:#8FC4E6;
font-family:'IBM Plex Mono',monospace;
background-image:url("/img/background.png");
}
h1{
color:#FFBC42;
font-family:VT323,monospace;
font-size:72px;
text-shadow:#B173003px3px7px;
text-align:center;
}
h2{
color:#FFBC42;
font-family:'Bebas Neue',cursive;
font-size:36px;
text-shadow:#B173003px3px7px;
text-align:center;
}
h3{
color:#FFBC42;
font-family:'Bebas Neue',cursive;
font-size:24px;
text-shadow:#B173003px3px7px;
}
p{
font-weight:400;
font-size:20px;
}
li{
font-weight:400;
font-size:20px;
}
hr{
width:45%;
border-top:5pxdouble#88c0d0;
}
a{
font-family:VT323,monospace;
font-size:24px;
}
a:link{
color:#78A1BB;
}
a:hover{
color:#B17300;
}
a:active{
color:#FFBC42;
}
a:visited{
color:#FFBC42;
}
iframe[src*=youtube]
{
text-align:center;
display:block;
margin-right:auto;
margin-left:auto;
max-width:90%;
}
[class^="icon-"],[class*=" icon-"]{
display:inline-block;
width:100%;
}
/*CSS Classes*/
.parallax{
position:relative;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.roundCorners{
border-radius:25px;
}
.card{
background-color:RGBA(40,48,68,0.6);
box-shadow:#FFBC423px3px10px;
}
.spacer{
min-height:50px;
}
.bigIcon{
font-size:256px;
color:#FFBC42;
text-align:center;
}
.youtube-container{
position:relative;
overflow:hidden;
width:100%;
padding-top:56.25%;/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.youtube-iframe{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
}
/*CSS IDs*/
#footer-spacer{
min-height:85px;
}
@mediaonlyscreenand(min-width:768px){
#footer{
position:fixed;
height:70px;
width:100%;
bottom:0;
left:0;
background-color:#161A25;
color:#385B70;
text-align:right;
}
#footer-logo{
max-height:50px;
}
#footer-text{
position:relative;
bottom:20px;
}
}
@mediaonlyscreenand(max-width:768px){
#footer{
position:fixed;
height:70px;
width:100%;
bottom:0;
left:0;
background-color:#161A25;
color:#385B70;
text-align:right;
}
#footer-logo{
position:relative;
bottom:35px;
max-height:50px;
}
#footer-text{
position:relative;
bottom:55px;
}
}
/*Web fonts*/
@font-face{
font-family:VT323;
src:url("../fonts/VT323-Regular.ttf");
}
@font-face{
font-family:Oswald;
src:url("../fonts/Oswald-Regular.ttf");
}
@font-face{
font-family:'IBM Plex Mono',monospace;
src:url("../fonts/IBMPlexMono-Regular.ttf");
}
@font-face{
font-family:'IBM Plex Sans',sans-serif;
src:url("../fonts/IBMPlexSans-Regular.ttf");
}
/**Learned how to do this from this question on StackOverflow: https://stackoverflow.com/questions/15161674/responsive-design-rearrange-element-positions-with-css**/