.iconSize {
height: 2rem;
}
.zIndex1 {
z-index: 1;
}
.zIndex2 {
z-index: 2;
}
.zIndex3 {
z-index: 3;
}
.zIndexN1 {
z-index: -1;
}
.zIndexN2 {
z-index: -2;
}
/* font */
.courierPrime {
font-family: "Courier Prime", monospace;
}
.portrait {
height: 20rem;
width: auto;
margin: auto;
}
/* svgs */
.bgSvg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 5rem;
padding-right: 5rem;
padding-top: 1rem;
padding-bottom: 1rem;
margin-left: -5rem;
margin-right: -5rem;
}
.imgSmall {
height: 20rem;
width: auto;
}
.arrowUp {
bottom: 2rem;
left: 2rem;
height: 3rem;
width: 3rem;
}
.arrowUpSvg {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F>');
}
pre {
background-color: black;
padding: 1rem;
}
header {
/* --bs-breakpoint-lg */
/* --bs-breakpoint-xl */
/* --bs-breakpoint-xxl */
}
@media only screen and (min-width: 992px) {
header {
left: -4.3rem;
}
}
@media only screen and (min-width: 1200px) {
header {
left: -5rem;
}
}
@media only screen and (min-width: 1400px) {
header {
left: -10rem;
}
}
header h1 {
margin-top: 5rem;
margin-bottom: 3rem;
top: -0.1rem;
}
h1 {
/* --bs-breakpooint-xs */
/* --bs-breakpoint-lg */
/* --bs-breakpoint-xl */
/* --bs-breakpoint-xxl */
}
@media only screen and (min-width: 0px) {
h1 {
left: 4.4rem;
}
}
@media only screen and (min-width: 992px) {
h1 {
left: 2rem;
}
}
@media only screen and (min-width: 1200px) {
h1 {
left: 2.2rem;
}
}
@media only screen and (min-width: 1400px) {
h1 {
left: 9.5rem;
}
}
header li {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* bg header */
.columnTopLeft {
top: -1rem;
left: 4.4rem;
}
.towerLeft {
top: 23.1rem;
left: 2.1rem;
}
.towerDoor {
top: 48.6rem;
left: 7.4rem;
}
.groundLeft {
top: 25.2rem;
left: -27.5rem;
}
.alepaillasSvg {
padding-top: 3rem;
padding-bottom: 5rem;
}
body.theme .alepaillasSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .homeSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .homeSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .workSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .workSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .textsSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .textsSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .blogSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .blogSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .bioSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .bioSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .cvSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .cvSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .statementSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .statementSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .contactSvg {
background-image: url('data:image/svg+xml,');
}
body.theme .contactSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .alepaillasSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .homeSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .homeSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .workSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .workSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .textsSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .textsSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .blogSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .blogSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .bioSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .bioSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .cvSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .cvSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .statementSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .statementSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .contactSvg {
background-image: url('data:image/svg+xml,');
}
body.themeDark .contactSvg.active {
background-image: url('data:image/svg+xml,');
}
/* header list positions */
.homeLi {
left: 9.4rem;
}
.workLi {
left: 12rem;
}
.textsLi {
left: 12.2rem;
}
.blogLi {
left: 13.1rem;
}
.bioLi {
left: 11.5rem;
}
.cvLi {
left: 10.8rem;
}
.statementLi {
left: 10.3rem;
}
.contactLi {
left: 14.4rem;
}
body.theme .playLayer1Svg {
background-image: url('data:image/svg+xml,');
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-left: -0.75rem;
margin-right: -0.75rem;
}
body.theme .playLayer2Svg {
background-image: url('data:image/svg+xml,');
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 2.625rem;
padding-right: 2.625rem;
margin-left: -2.655rem;
margin-right: -2.625rem;
}
body.theme .playLayer3Svg {
background-image: url('data:image/svg+xml,');
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 7.5rem;
padding-right: 7.5rem;
margin-left: -7.5rem;
margin-right: -7.5rem;
}
body.themeDark .playLayer1Svg {
background-image: url('data:image/svg+xml,');
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-left: -0.75rem;
margin-right: -0.75rem;
}
body.themeDark .playLayer2Svg {
background-image: url('data:image/svg+xml,');
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 2.625rem;
padding-right: 2.625rem;
margin-left: -2.655rem;
margin-right: -2.625rem;
}
body.themeDark .playLayer3Svg {
background-image: url('data:image/svg+xml,');
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: 7.5rem;
padding-right: 7.5rem;
margin-left: -7.5rem;
margin-right: -7.5rem;
}
main {
margin-top: 25rem;
margin-bottom: 10rem;
/* --bs-breakpooint-xs */
/* --bs-breakpoint-lg */
}
@media only screen and (min-width: 0px) {
main {
margin-bottom: 25rem;
}
}
@media only screen and (min-width: 992px) {
main {
margin-top: 16rem;
}
}
body.theme .donateSvg {
background-image: url('data:image/svg+xml,');
padding-top: 4rem;
padding-bottom: 3rem;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 10rem;
padding-right: 10rem;
margin-left: -10rem;
margin-right: -10rem;
}
body.theme .donateSvg.active {
background-image: url('data:image/svg+xml,');
}
body.theme .socialMediaSvg {
top: -1rem;
left: -1.5rem;
}
body.theme .designSvg {
background-image: url('data:image/svg+xml,');
padding-top: 4rem;
padding-bottom: 4rem;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 9rem;
padding-right: 11rem;
margin-left: -9rem;
margin-right: -11rem;
}
body.theme .bySvg {
background-image: url('data:image/svg+xml,');
padding-top: 4rem;
padding-bottom: 4rem;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 12.5rem;
padding-right: 12.5rem;
margin-left: -12.5rem;
margin-right: -12.5rem;
}
body.theme .alejandraSvg {
background-image: url('data:image/svg+xml,');
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 4.5rem;
padding-right: 4.5rem;
margin-left: -4.5rem;
margin-right: -4.5rem;
}
body.theme .copyrightSvg {
background-image: url('data:image/svg+xml,');
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 10rem;
padding-right: 10rem;
margin-left: -10rem;
margin-right: -10rem;
}
body.themeDark .donateSvg {
background-image: url('data:image/svg+xml,');
padding-top: 4rem;
padding-bottom: 3rem;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 10rem;
padding-right: 10rem;
margin-left: -10rem;
margin-right: -10rem;
}
body.themeDark .donateSvg.active {
background-image: url('data:image/svg+xml,');
}
body.themeDark .socialMediaSvg {
top: -1rem;
left: -1.5rem;
}
body.themeDark .designSvg {
background-image: url('data:image/svg+xml,');
padding-top: 4rem;
padding-bottom: 4rem;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 9rem;
padding-right: 11rem;
margin-left: -9rem;
margin-right: -11rem;
}
body.themeDark .bySvg {
background-image: url('data:image/svg+xml,');
padding-top: 4rem;
padding-bottom: 4rem;
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 12.5rem;
padding-right: 12.5rem;
margin-left: -12.5rem;
margin-right: -12.5rem;
}
body.themeDark .alejandraSvg {
background-image: url('data:image/svg+xml,');
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 4.5rem;
padding-right: 4.5rem;
margin-left: -4.5rem;
margin-right: -4.5rem;
}
body.themeDark .copyrightSvg {
background-image: url('data:image/svg+xml,');
/* overflow background image by setting padding with a corresponding negative margin */
padding-left: 10rem;
padding-right: 10rem;
margin-left: -10rem;
margin-right: -10rem;
}
.containLayout {
contain: layout;
}
.bgRight {
top: -46.9rem;
/* --bs-breakpoint-lg */
/* --bs-breakpoint-xl */
/* --bs-breakpoint-xxl */
}
@media only screen and (min-width: 576px) {
.bgRight {
right: -83.8rem;
}
}
@media only screen and (min-width: 768px) {
.bgRight {
right: -91.3rem;
}
}
@media only screen and (min-width: 992px) {
.bgRight {
right: -83.9rem;
}
}
@media only screen and (min-width: 1200px) {
.bgRight {
right: -78.3rem;
}
}
@media only screen and (min-width: 1400px) {
.bgRight {
right: -100.5rem;
}
}
footer ul {
margin-bottom: 15rem;
}
footer li {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* footer list positions */
.donateLi {
transform: rotate(-72deg);
margin-top: 3.8rem;
right: -3.5rem;
}
@media only screen and (min-width: 768px) {
.donateLi {
margin-top: 4.8rem;
right: -4.5rem;
}
}
@media only screen and (min-width: 1400px) {
.donateLi {
margin-top: 3.8rem;
right: -3.5rem;
}
}
.socialMediaLi {
transform: rotate(-44deg);
margin-top: 9.7rem;
right: -8.9em;
}
.designLi {
transform: rotate(21deg);
margin-top: 18.9rem;
right: -13.1rem;
animation-name: pulseDesign;
animation-duration: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes pulseDesign {
from {
transform: scale(1) rotate(21deg);
}
to {
transform: scale(1.075) rotate(21deg);
}
}
.byLi {
transform: rotate(23.5deg);
margin-top: 5rem;
right: -14.6rem;
}
.alejandraLi {
transform: rotate(-32.5deg);
margin-top: 5rem;
right: -6rem;
animation-name: pulseAlejandra;
animation-duration: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes pulseAlejandra {
from {
transform: scale(1) rotate(-32.5deg);
}
to {
transform: scale(1.075) rotate(-32.5deg);
}
}
.copyrightLi {
transform: rotate(-16deg);
margin-top: -0.5rem;
right: -17.3rem;
}
@media only screen and (min-width: 0px) {
.copyrightLi {
margin-top: 5.5rem;
right: -11.3rem;
}
}
@media only screen and (min-width: 1400px) {
.copyrightLi {
margin-top: 2.9rem;
right: -10.9rem;
}
}
.game {
width: 800px;
height: 600px;
position: absolute;
top: calc(50vh - 300px);
left: calc(50vw - 400px);
background-color: black;
}
.return {
position: absolute;
top: 2vh;
left: calc(50vw - 3rem);
}
#body:not(:target) {
overflow: auto;
}
#body:not(:target) header {
transform: translate(0, 0);
transition-property: left, transform;
transition-duration: 4s;
}
#body:not(:target) .playSquare {
visibility: visible;
opacity: 1;
transition: visibility 2s, opacity 2s;
}
#body:not(:target) .game {
visibility: hidden;
opacity: 0;
transition: visibility 2s, opacity 2s;
}
#body:not(:target) .return {
visibility: hidden;
opacity: 0;
transition: visibility 2s, opacity 2s;
}
#body:not(:target) footer {
transform: translate(0, 0);
transition-property: left, transform;
transition-duration: 4s;
}
#body:target {
overflow: hidden;
}
#body:target header {
transform: translate(-100vw, 0);
transition-property: left, transform;
transition-duration: 4s;
}
#body:target .playSquare {
visibility: hidden;
opacity: 0;
transition: visibility 2s, opacity 2s;
}
#body:target .game {
visibility: visible;
opacity: 1;
transition: visibility 2s, opacity 2s;
}
#body:target .return {
visibility: visible;
opacity: 1;
transition: visibility 2s, opacity 2s;
}
#body:target footer {
transform: translate(100vw, 0);
transition-property: left, transform;
transition-duration: 4s;
}
.theme {
--rusticColor: #D4B25A;
--radiantColor: #DB4F5A;
--velvetColor: #8E283C;
--crispColor: #A1BBCB;
/* unvisited link */
/* mouse over link */
}
.theme a:link {
color: black;
}
.theme a:hover {
color: gainsboro;
}
.themeDark {
--rusticColor: #6300AC;
--radiantColor: #800020;
--velvetColor: #880079;
--crispColor: #003366;
/* unvisited link */
/* mouse over link */
}
.themeDark a:link {
color: gainsboro;
}
.themeDark a:hover {
color: black;
}
.rusticFill {
fill: var(--rusticColor);
}
.radiantFill {
fill: var(--radiantColor);
}
.velvetFill {
fill: var(--velvetColor);
}
.crispFill {
fill: var(--crispColor);
}
:root {
--highlightColor: #00ffe7ba;
}
body {
background-color: var(--radiantColor);
}
/* selected link */
a:active {
color: var(--highlightColor);
}
/* visited link */
a:visited {
color: var(--crispColor);
}
::selection {
background: var(--highlightColor);
}
.ms-n4 {
margin-left: -1.5rem;
}
.ms-n5 {
margin-left: -3rem;
}
/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
color: black;
background-color: var(--velvetColor);
border-color: var(--velvetColor); /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: var(--crispColor);
border-color: var(--crispColor); /*set the color you want here*/
}
.card {
--bs-card-border-width: 0;
}
.form-check-input:checked {
background-color: var(--highlightColor);
border-color: var(--highlightColor);
}
.form-control:focus {
border-color: var(--highlightColor);
}
body.theme {
--bs-body-bg: gainsboro;
}
body.theme .card-title {
--bs-card-title-color: black;
}
body.theme .card-body {
--bs-card-color: black;
}
body.theme .text-body-secondary {
--bs-secondary-color: black;
}
body.themeDark {
--bs-body-bg: black;
--bs-body-color: silver;
}
body.themeDark .card-title {
--bs-card-title-color: lightgrey;
}
body.themeDark .card-body {
--bs-card-color: lightgrey;
}
body.themeDark .text-body-secondary {
--bs-secondary-color: dimgrey;
}
body.themeDark .form-text {
color: black;
}
body.themeDark .form-control::placeholder {
color: dimgrey;
}
/*# sourceMappingURL=styles.css.map */