:root {
    --primary-color: #121212;
    /*--primary-color: #013220;*/
    /* Primary background color */
    --color-bg-primary: #121212; /* Dark gray - Almost black */
    --background-color: #121212; /* Dark gray - Almost black */
    --blog-post-grid-background: #333333;

    /* Secondary background color */
    --secondary-color: #1E1E1E; /* Slightly lighter gray for card backgrounds, etc. */

    /* Accent color for buttons and interactive elements */
    --accent-color: #BB86FC; /* Soft purple for a pop of color */
    --accent-color-dark: #9965DA;

    /* Accent hover color for interactive elements */
    --color-accent-hover: #4caf50; /* Darker shade of accent color for hover states */

    /* Text color */
    --color-text-primary: #E0E0E0; /* Off-white for primary text */

    /* Secondary text color */
    --color-text-secondary: #B3B3B3; /* Gray for secondary text or less important information */

    /* Border color */
    --color-border: #333333; /* Dark gray border for subtle separation */

    /* Error or warning color */
    --color-error: #CF6679; /* Reddish color suitable for errors or warnings */



    }

body {
    font-family: Roboto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
    width: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: var(--primary-color);
    min-height: 100%;
}


h1 {

}

h2 {


}




button {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--color-text-primary);
    padding: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 30px;
    font-size: 1em;
    margin: 5px;
    border: 0px;
}



button:hover {
    background-color: var(--color-accent-hover);
}


.button-secondary {
    background-color: var(--secondary-color);
    color: var(--color-text-primary);
}

.button-secondary:hover {
    background-color: var(--color-border); /* Slightly lighter or darker for effect */
}

textarea {
    resize: vertical;
}

a {
    color: white;
}



.content-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: fit-content;
    
}    
    
    
.content-3 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: fit-content;

}

.content-2-info, .content-3-info {
display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50%;
}

.content-2 img, .content-3 img {
    width: 300px;
    border-radius: 20px;
}
.mtgcard img {
    width: 250px;
    border-radius: 5px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.dataTables_length select {
    width: 60px;
}






@media screen and (max-width: 600px) {
.content-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    height: fit-content;
    box-sizing: border-box;
    padding: 10px;
    background-color: var(--secondary-color);
    border-radius: 20px;
    
}

.content-2 div:first-child {
    order: 2; /* Move the first div (with the image) below */
}

.content-2 .content-2-info {
    order: 1; /* Ensure the text content div appears first */
}


.content-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    height: fit-content;
    box-sizing: border-box;
    padding: 10px;
    background-color: var(--secondary-color);
    border-radius: 20px;

}

.content-2-info h2, .content-3-info h2 {
    text-align: center;
    color: var(--accent-color);
    font-size: 2em;

}

.content-2-info p, .content-3-info p {
    text-align: center;

}

.content-2-info, .content-3-info {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: fit-content;
}

.content-2 img, .content-3 img {
    width: 90vw;
    border-radius: 20px;
}

.dataTables_length, .dataTables_filter, .dataTables_paginate, .dataTables_info {
    display: flex;
    justify-content: flex-start;
}

.dataTables_length select {
    width: 60px;
}

.dataTables_filter input {
    width: 250px;
}
}

.add-deck-icon {
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
    color: var(--accent-color); /* Adjust the color as needed */
}

/* Safe area insets for devices with notches/home indicators */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Ensure proper viewport on mobile devices with safe areas */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: env(safe-area-inset-bottom);
    }
}