/* Scrollbar color & behavior */
html {scroll-behavior: smooth; scrollbar-color: #FFE68C #514EB1;}
/* Spacey background */
body {
background-image: url("Pictures/Background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Where all the content appears*/
#wrapper {
width: 75%;
margin: auto;
min-width: 900px;
max-width: 1000px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
/* RGBA for slight transparency! */
background: rgba(116, 113, 193, 0.92);
border: 5.5px solid #514EB1;
box-shadow: 3px 3px 6.5px #000000;
}
/* Lines up header text to be centered within the wrapper */
header {text-align: center;}
/* This was all code for the header text. Yes, I did this all purely in CSS. Yes, I am crazy. */
h1 {font-size: 26.5pt; font-family: "Press Start 2P", "Arial";}
.Letter1 {animation: Animation1 2s infinite;}
@keyframes Animation1 {
0% {color: #9AE7ED; text-shadow: 0 0 7px #9AE7ED;}
20% {color: #FC97CC; text-shadow: 0 0 7px #FC97CC;}
40% {color: #FFBC6B; text-shadow: 0 0 7px #FFBC6B;}
60% {color: #FFE68C; text-shadow: 0 0 7px #FFE68C;}
80% {color: #94FC68; text-shadow: 0 0 7px #94FC68;}
100% {color: #9AE7ED; text-shadow: 0 0 7px #9AE7ED;}
}
.Letter2 {animation: Animation2 2s infinite;}
@keyframes Animation2 {
0% {color: #94FC68; text-shadow: 0 0 7px #94FC68;}
20% {color: #9AE7ED; text-shadow: 0 0 7px #9AE7ED;}
40% {color: #FC97CC; text-shadow: 0 0 7px #FC97CC;}
60% {color: #FFBC6B; text-shadow: 0 0 7px #FFBC6B;}
80% {color: #FFE68C; text-shadow: 0 0 7px #FFE68C;}
100% {color: #94FC68; text-shadow: 0 0 7px #94FC68;}
}
.Letter3 {animation: Animation3 2s infinite;}
@keyframes Animation3 {
0% {color: #FFE68C; text-shadow: 0 0 7px #FFE68C;}
20% {color: #94FC68; text-shadow: 0 0 7px #94FC68;}
40% {color: #9AE7ED; text-shadow: 0 0 7px #9AE7ED;}
60% {color: #FC97CC; text-shadow: 0 0 7px #FC97CC;}
80% {color: #FFBC6B; text-shadow: 0 0 7px #FFBC6B;}
100% {color: #FFE68C; text-shadow: 0 0 7px #FFE68C;}
}
.Letter4 {animation: Animation4 2s infinite;}
@keyframes Animation4 {
0% {color: #FFBC6B; text-shadow: 0 0 7px #FFBC6B;}
20% {color: #FFE68C; text-shadow: 0 0 7px #FFE68C;}
40% {color: #94FC68; text-shadow: 0 0 7px #94FC68;}
60% {color: #9AE7ED; text-shadow: 0 0 7px #9AE7ED;}
80% {color: #FC97CC; text-shadow: 0 0 7px #FC97CC;}
100% {color: #FFBC6B; text-shadow: 0 0 7px #FFBC6B;}
}
.Letter5 {animation: Animation5 2s infinite;}
@keyframes Animation5 {
0% {color: #FC97CC; text-shadow: 0 0 7px #FC97CC;}
20% {color: #FFBC6B; text-shadow: 0 0 7px #FFBC6B;}
40% {color: #FFE68C; text-shadow: 0 0 7px #FFE68C;}
60% {color: #94FC68; text-shadow: 0 0 7px #94FC68;}
80% {color: #9AE7ED; text-shadow: 0 0 7px #9AE7ED;}
100% {color: #FC97CC; text-shadow: 0 0 7px #FC97CC;}
}
@keyframes AnimationTwo {
0% {color: #FC97CC; text-shadow: 0 0 4px #FC97CC;}
20% {color: #FFBC6B; text-shadow: 0 0 4px #FFBC6B;}
40% {color: #FFE68C; text-shadow: 0 0 4px #FFE68C;}
60% {color: #94FC68; text-shadow: 0 0 4px #94FC68;}
80% {color: #9AE7ED; text-shadow: 0 0 4px #9AE7ED;}
100% {color: #FC97CC; text-shadow: 0 0 4px #FC97CC;}
}
/* Header level 2 code. A lot less used on the site now that I have the expanding boxes. */
h2 {
font-size: 18pt;
font-family: "Arial";
color: #FFE68C;
text-shadow: 0 0 5px #FFE68C;
}
h3 {
font-size: 16.5pt;
font-family: "Arial";
color: #FFBC6B;
text-shadow: 0 0 5px #FFBC6B;
}
/* Paragraph code */
p {font-size: 12.5pt; font-family: "Arial"; color: white;}
/* Code for any landscape-style picture you see on the top of the page */
.FrontPic {
width: 576px;
height: 432px;
opacity: 100%;
display: block;
margin-left: auto;
margin-right: auto;
border: 4px solid #514EB1;
}
.BigPic {
width: 420px;
height: 420px;
opacity: 100%;
display: block;
margin-left: auto;
margin-right: auto;
border: 4px solid #514EB1;
}
/* Navigation bar code, borrowed from Fido's Freezzy's because I'm a lazy programmer and I'm not going to fix what's not broken. */
nav {
overflow: hidden;
background-color: #514EB1;
height: 58px;
box-shadow: 3px 3px 5px #000000;
margin-left: auto;
margin-right: auto;
}
nav a {
float: left;
color: #FFFFFF;
font-family: Verdana, sans-serif;
text-align: center;
padding: 21px 17px 20px 17px;
text-decoration: none;
font-size: 11.5pt;
transition-duration: 0.5s;
}
nav a:hover {background-color: #413E8E; transition-duration: 0.5s; text-shadow: none;}
nav a.active {background-color: #413E8E; color: #FFFFFF;}
/* Code in case I decide to add icons to the right of the navigation bar. Not used yet. */
.NavRight {float: right;}
.Icon {height: 30px; width: 30px;}
/* Definition list code, stolen from another portfolio I made back in high school */
dl {padding: 2px;}
dt {
font-size: 14pt;
font-family: "Arial";
color: #FFE68C;
text-shadow: 0 0 3px #FFE68C;
padding: 3px;
}
dd {
font-size: 12.5pt;
font-family: "Arial";
color: white;
padding: 3px;
}
/* Centers the footer */
footer{text-align: center;}
/* I am so unnecessarily proud of this piece of code. It's just that great. */
#Back2Top {
width: 120px;
height: 120px;
position: fixed;
bottom: 8px;
right: 8px;
cursor: pointer;
}
/* Arguably the most useless change I made to my site. Highlighted text glows green. */
::selection {color: #94FC68; text-shadow: 0 0 5px #94FC68;}
/* This was only supposed to be used on the about me page, but I used it on the Gateway page as well. */
.TableMe {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 65%;
border-spacing: 32px;
}
.TableMe img {
height: 220px;
width: 220px;
margin-left: auto;
margin-right: auto;
border: 4px solid #514EB1;
}
.TableMe td {
text-align: center;
font-weight: bold;
font-size: 14pt;
border: none;
font-family: "Arial";
color: #9AE7ED;
text-shadow: 0 0 3px #9AE7ED;
}
/* Code for the text boxes with an included square image, first used on the about me page to include some fun little facts about myself. */
.FunFact1, .FunFact2 {
border: 4px solid #514EB1;
padding: 10px;
background: rgba(151, 149, 208, 0.55);
}
.FunFact1 p {float: left; width: 77.5%; padding: 5px;}
.FunFact2 p {float: right; width: 77.5%; padding: 5px;}
.FactPic1, .FactPic2 {width: 180px; height: 180px; border: 4px solid #514EB1;}
/* This was just to remove the border of transparent images */
.FactPic3 {width: 180px; height: 180px; border: none;}
/* Important text */
.Imp {font-weight: bold; color: #FFBC6B; text-shadow: 0 0 2px #FFBC6B;}
/* Very important text */
.VeryImp {font-family: "Press Start 2P", "Arial"; font-size: 12.5pt; animation: AnimationTwo 4s infinite;}
/* Links, which glow blue when hovered on */
a {color: #9AE7ED; transition-duration: 0.5s;}
a:hover {text-shadow: 0 0 4px #9AE7ED; transition-duration: 0.5s;}
/* Looked silly, might delete later */
.RoadWorkSign {
width: 300px;
height: 300px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* All this code just for one image */
.ContactPic {
width: 350px;
height: 350px;
border: 4px solid #514EB1;
margin-left: auto;
margin-right: auto;
display: block;
}
/* Small text */
small {
color: #FC97CC;
text-shadow: 0 0 7px #FC97CC;
font-size: 8pt;
font-family: "Arial";
}
/* Code for the table of character traits on the About Me page */
.CharacterTable {
margin-left: auto;
margin-right: auto;
padding: 5px;
border-spacing: 32px;
}
.CharacterTable td {
text-align: center;
font-weight: bold;
font-size: 14pt;
font-family: "Arial";
color: #FFFFFF;
text-shadow: 0 0 3px #FFFFFF;
border: 4px solid #514EB1;
padding: 10px;
background: rgba(151, 149, 208, 0.55);
}
/* Collapsible code */
.Collapsible {
background-color: #514EB1;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
transition-duration: 0.5s;
font-size: 18pt;
font-family: "Arial";
font-weight: bold;
color: #FFE68C;
text-shadow: 0 0 5px #FFE68C;
}
.Collapsible:hover {background-color: #413E8E; transition-duration: 0.5s;}
.CollapsibleContent {
display: none;
overflow: hidden;
background-color: rgba(151, 149, 208, 0.55);
border-left: 4px solid #514EB1;
border-right: 4px solid #514EB1;
border-bottom: 4px solid #514EB1;
border-top: none;
padding: 0 18px;
width: 94.5%;
margin-left: auto;
margin-right: auto;
}
.CollapsibleContent2 {display: none;}