/* Global variables. */
:root,
::backdrop {
    /* Set sans-serif & mono fonts */
    --sans-font: sans-serif;
    --mono-font: consolas, monospace;
    --border-radius: 5px;

    /* Default (light) theme */
    --bg: rgb(212, 207, 207);
    --accent-bg: #f5f7ff;
    --text: #212121;
    --text-light: #585858;
    --border: green;
    --border-radius: 5px;
    --accent: blue;
    --accent-hover: #1266e2;
    --accent-text: white;
    --code: #d81b60;
    --preformatted: #444;
    --marked: #fd3;
    --disabled: #efefef;
    /* my variables */
    --max-width: 60ch;
    /* --min-width: 30ch; */
}

* {    
    box-sizing: border-box;
    /*outline: 2px solid red; */ /* Helps identify large elements */
    /*border: 0px solid rgb(242, 0, 0);
    border-radius: 5px;*/
    /* max-height: 100%;*/ 
    font-size: inherit; /* Ensures all elements inherit from body */   
}

h1,h2,h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    /*border: 2px solid rgb(97, 242, 0);
    border-radius: 5px;*/
}

body {
    font-size: large;
    /* border: 2px solid rgb(97, 242, 0);
    border-radius: 5px; */
    /*margin-top: 2.5rem;*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: fit-content;
    gap: 0.5rem;    
}

header, main, footer {
    /*margin-top: 0.5rem;*/
    /* background-color: #f7e9e9; */
    /*overflow-wrap: break-word;*/
    /* word-break: break-word; */
    /* white-space: normal; */
    /*hyphens: auto;*/
    background-color: var(--bg);
    /*border: 0px solid var(--border) ;*/
    border-radius: var(--border-radius);
}

.my-flex-row {
    /*border: 1px solid #13b3f7;
    border-radius: 5px; */
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: 0.5rem;
}

.my-flex-column{
    /*border: 1px solid #13b3f7;
    border-radius: 5px; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: fit-content;
    gap: .5rem;
}

/*
.my-flex-column > *:last-child {
    background-color: rgb(5, 227, 64); 
    align-self: end; 
    margin-bottom: 0.5rem;
}*/

.right-align {
    text-align: right;
    /* background-color: rgb(5, 227, 64); */
    align-self: end; 
    margin-bottom: 0.5rem;
}

.my-section {
    border: 2px solid var(--border) ;
    border-radius: var(--border-radius);
    /* background-color: rgb(218, 220, 220);*/
}

dt {
    display: inline-block;
    margin-left: 1ch;
    box-sizing: border-box;  /* Includes padding in width calculation */  
}

dd {
    display: inline-block;
    margin-left: 1ch;
}

dt::after {
    content: ": ";
}


/* form login */
.form-group {
    /*margin-top: 0.5rem;
    margin-bottom: 0.5rem;*/
}
.form-group label {        
    display: inline-block;
    text-align: right;
    width: 13ch; /* fill up to 100% of parent */
    max-width: 100%; /* do not exceed 100% of parent width */ 
    /*width:max-content;*/
    /*color: red;*/
    /*padding-right: .5rem;*/
    /*margin-right: .5rem;*/
    /*border: 1px solid red;
    border-radius: var(--border-radius);*/
    
    box-sizing: border-box;  /* Includes padding in width calculation */  
    word-wrap: break-word; /* Wraps long text */        
}
.form-group label::after { content: ":\00a0"; }  /* Adds the colon */

.form-group input {
    display: inline-block;
    /* text-align: left; */
    /*flex: 1; */
    /* Takes up remaining space */
    /*padding: 0.8rem;*/
    /*border: 1px solid green;
    border-radius: var(--border-radius);*/
    /*font-size: 1.0rem;*/
    max-width: 100%; /* do not exceed 100% of parent width */     
    width: 12ch; /* fill up to 100% of parent */
    overflow-wrap: normal;
    box-sizing: border-box;  /* Includes padding in width calculation */  
    word-wrap: break-word; /* Wraps long text */
}


button,
.button,
a.button,
/* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"],
label[type="button"] {
    border: 1px solid var(--accent);
    border-radius: var(--border-radius);
    background-color: var(--accent);
    color: var(--accent-text);
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    width: fit-content;
}

.button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
    cursor: not-allowed;
    background-color: var(--disabled);
    border-color: var(--disabled);
    /*color: var(--text-light);*/
}

button:enabled:hover,
.button:not([aria-disabled="true"]):hover,
input[type="submit"]:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover,
label[type="button"]:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    cursor: pointer;
}

.button:focus-visible,
button:focus-visible:where(:enabled),
input:enabled:focus-visible:where([type="submit"],
    [type="reset"],
    [type="button"]) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}