/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap');

/* Import PureCSS */
@import url('https://unpkg.com/purecss@3.0.0/build/pure-min.css');
@import url('https://unpkg.com/purecss@3.0.0/build/grids-responsive-min.css');

/* Custom styles */
body {
    font-family: "SauceCodePro Nerd Font", "Source Code Pro", monospace;
    color: #fff6e6;
    line-height: 1.6;
    background-color: #182c36;
}

a {
    color: #76DFFF;
}

hr {
    border: 0.5px solid #fff6e633;
}

#exercise {
    text-align: center;
    font-size: large;
}

/* Custom container width */
.l-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1em;
}

.vocabulary-grid {
    width: 100%;
}

.exercise-section {
    border: 1px solid #fff6e633;
    background-color: #ffffff1a;
    border-radius: 4px;
    padding: 1em;
}

.content-section {
    padding-right: 0.5em;
    padding-left: 0.5em;
}

.content-section/* Custom spacing utilities */
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.mb-1 { margin-bottom: 1em; }
.mb-2 { margin-bottom: 2em; }

/* Custom text colors */
.text-primary { color: #76DFFF; }
.text-secondary { color: #fff6e6; }

/* Custom button styles */
.button-success {
    background: #1cb841;
    color: #fff6e6;
}

.button-error {
    background: #ca3c3c;
    color: #fff6e6;
}

.button-warning {
    background: #df7514;
    color: #fff6e6;
}

.button-secondary {
    background: #42b8dd;
    color: #fff6e6;
}

/* Search input styles */
.pure-input-1 {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff6e6;
    background-color: #ffffff1a;
    border: 1px solid #fff6e633;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

.pure-input-1:focus {
    color: #fff6e6;
    background-color: #ffffff1a;
    border-color: #76DFFF;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(118, 223, 255, 0.25);
}

.pure-input-1::placeholder {
    color: #fff6e699;
}

.pure-u-1 > .pure-g {
    display:block !important;
}

/* Custom card styles */
.custom-card {
    margin: 0.5em;
    border-radius: 4px;
    background-color: #ffffff1a;
    height: 200px;
    display: block;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 1em;
    /* text-align: center; */
    /* justify-content: center; */
}

.custom-card .pure-menu-link {
    display: block;
    text-decoration: none;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 0;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.custom-card .pure-menu-heading {
    margin: 0 0 1em 0;
    font-size: 1.2em;
    color: #fff6e6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
}

.custom-card p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    text-align: center;
}

/* PureCSS overrides */
.pure-menu-link {
    color: #76DFFF !important;
}

.pure-menu-link:hover {
    background-color: transparent !important;
}

.pure-menu-heading {
    color: #fff6e6 !important;
}

.pure-table {
    background-color: transparent;
    color: #fff6e6;
    border: 1px solid #fff6e633;
}

.pure-table td {
    border-bottom-color: #fff6e633;
}

.pure-table th {
    border-bottom-color: #fff6e633;
    text-align: left;
    font-weight: 700;
    color: #fff6e633;
}

.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #26495b;
}

.pure-table-odd td {
    background-color: #26495b;
}

.pure-button {
    background-color: #ffffff1a;
    color: #fff6e6;
    border-color: #fff6e633;
}

.pure-button:hover {
    background-color: #ffffff33;
}

.pure-button-primary {
    background-color: #76DFFF;
    color: #182c36;
}

.pure-button-primary:hover {
    background-color: #5bc8ff;
}

.menu-logo {
    height: 2.2em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.5em;
    margin-left: 0.2em;
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 #0002;
    background: transparent;
}

.logo-link {
    padding: 0 0.2em 0 0;
    display: flex;
    align-items: center;
}