/* Variables */
:root{
    --bs-primary: #00f312;
    --bs-secondary: #015307;
    --bs-body-color: white;
    --bs-body-bg: #202020;
    --bs-secondary-bg: #313131;
    --bs-tertiary-bg: #101010;
}

/* Applies to all */
* {
    font-family: 'Exo', sans-serif;
}

/* Basic Styling */
.primary_background {
    background-color: var(--bs-body-bg);
}

.secondary_background {
    background-color: var(--bs-secondary-color);
}

.block_background {
    background-color: var(--bs-tertiary-color);
}

.styled_background{
    background-color: var(--bs-primary);
    font-weight: bolder;
    color: black;
}

.styled_border {
    border-color: var(--bs-primary) !important;
}

.disable_border {
    border: none !important;
    background-color: #0c0c0c;
}

/* Styling related to links in the header */
header a {
    color: var(--bs-body-color);
}

header a:hover {
    color: var(--bs-body-color);
}

/* Styling which applies to the main body */
body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    overflow-x: hidden;
}

/* Utility to align text */
.X1Cent {
    text-align: center;
}
.X1Cent>ul {
    text-align: left;
    display: inline-block;
}
.X1Center{
    text-align: center;
    display: inline-block;
}

/* Modified the properties of basic text */
main p, main a{
    font-size: x-large;
}

main li {
    font-size: large;
}

.large_text_inside p, .large_text_inside a{
    font-size: large;
}

.large_text_inside li {
    font-size: medium;
}

/* Adds padding and margins */
.bottom_pad {
    padding-bottom: 1rem;
}

.bottom_margin {
    margin-bottom: 1rem;
}

.medium_bottom_margin {
    margin-bottom: 2rem;
}

.top_pad {
    padding-top: 2rem;
}

.large_bottom_margin {
    margin-bottom: 4rem;
}

.vertical_pad {
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}

.left_pad {
    padding-left: 0.5rem;
}

/* Related to tables */
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

/* Makes the width 100%. */
.full_width {
    width: 100%;
}

/* Adds material icons */
.material-symbols-outlined {
     font-variation-settings:
             'FILL' 0,
             'wght' 300,
             'GRAD' 0,
             'opsz' 40;
 }

.material-symbols-outlined.filled {
    font-variation-settings:
            'FILL' 1,
            'wght' 300,
            'GRAD' 0,
            'opsz' 40;
}

/* Creates flex boxes */
.align-flex {
    display: flex;
    justify-content: center;
}

.align-flex .flex-element {
    display: flex;
    align-content: center;
}

/* Reduces the font size */
.small_font {
    font-size: 1.25rem;
}

/* Creates a card to contain information */
.portfolio-card {
    background-color: var(--bs-tertiary-color);
    border-color: var(--bs-primary);
    overflow: hidden; 
}

.portfolio-card>img{
    width: 100%;
    height: 20rem;
    object-fit: cover;
}

/* Darkens an image, which gets darker when you hover over it */
.darken_image_with_hover img {
    filter: brightness(45%);
    transition: all 0.2s ease-in-out;
}

.darken_image_with_hover:hover img {
    filter: brightness(30%);
    transition: all 0.2s ease-in-out;
}

/* Creates a stylish box to put info in */
.x1_box {
    background-color: var(--bs-secondary-bg);
    border: solid;
    border-color: var(--bs-primary);
    border-width: 1.5px;
    border-radius: 7px;
    width: 100%;
    padding: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.x1_box p {
    font-size: 1.25rem;
}

.x1_box p *{
    font-size: 1.25rem;
}

@media (max-width: 768px) {
  .x1_box{
    text-align: center;
  }
}

.grows_in_size {
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.grows_in_size:hover {
    transform: scale(1.05,1.05);
}


@media (min-width: 768px) {
    .slide_up {
        height: 7rem;	
        overflow: hidden;
        position: relative;
    }

    .slide_up h1 {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        text-align: center;

        transform: translateY(0%);

        /* Apply animation to this element */	
        animation: example1 1.25s linear;
    }
        /* Move it (define the animation) */
    @keyframes example1 {
        0%   { 
        transform: translateY(50%); 		
        color: rgba(255, 255, 255, 0);
        }
        100% { 
        transform: translateY(0%); 
        color: rgba(255, 255, 255, 255);
        }
    }
}