/* My lazy way to center certain things without making a mess (ONLY USED FOR LINKS) */
.center {
    display: flex;
    justify-content: space-evenly;
}

/* Small CSS class to center any images */
.imgcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ANOTHER Small CSS class to center any images */
.imgcenter2 {
    display: flex;
    justify-content: space-evenly;
}

/* A portion of the page that includes the introduction of myself and much more */
.stage1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* Centering the content */

    color: white;
    font-family: creato;
    font-size: 24px;
    padding-left: 24px;
    padding-right: 24px;
    text-align: left;
    /* Font */

    border: 4px;
    border-color: white;
    border-style: solid;
    margin-left: 10%;
    margin-right: 10%;
    background-color: rgba(255, 255, 255, 0.15);
    transition: 0.25s ease 0s;
    /* Border and Background */
}

/* Simple hover effect that changes certain elements */
.stage1:hover {
    background-color: rgba(0, 0, 0, 0.35);
    transform: scale(1.002);
    color: rgb(131, 195, 255);
    border-color: rgb(76, 117, 155);
    filter: sepia(50%);
}

/* Same thing with centering images and stuff */
hr {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Custom Font (Credits: https://www.dafont.com/creato-display.font) */
@font-face {
    font-family: creato;
    src: url(CreatoDisplay-Thin.otf);
}

/* Background */
.background {

    background: #263142;
    background: linear-gradient(180deg, rgba(38, 49, 66, 1) 0%, rgba(38, 49, 66, 1) 100%);
}

/* Basic zoom animation that is used when overing over certain elements */
.hover-zoom {
    transition: 0.3s ease-out;
}

/* Zoom effect for the hovering animation */
.hover-zoom:hover {
    transform: scale(1.1);
}

/* Uses the (50%) Negative/Invert filter when hovering a certain element */
.negativity:hover {
    filter: invert(0.5);
}

/* Replaces the link decoration with a selected color with the removal of the underline */
.link {
    color: aqua;
    text-decoration: none;
    font-size: 36px;
    transition: 0.4s;
}

/* Small effect for when hovering a link */
.link:hover {
    color: cornflowerblue;
    transform: scale(1.2);
}