* {
    /* RESET/Eller generelle styles */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

#mainContent {
    overflow-y: auto; /* Enables scrolling */
    overflow-x: hidden; /*disables scrolling to sides */
    position: relative;
    padding-top:130px;
    padding-bottom: 80px;
}

body {
    background-color: var(--dark-blue-grey);
    font-family: 'Courier New', Courier, monospace;
    hyphens: auto; /* Aktiverer automatisk orddeling */
    overflow-wrap: break-word; /* Sørger for at lange ord brydes */
    word-break: break-word; /* Backup til ældre browsere */
}


h1,h2,h3,h4,p{
    padding-top: var(--mainpadding);
    padding-bottom: var(--mainpadding);
}

.container {
    max-width: var(--max_width);
    margin:auto;
}
#topbar img, #bottombar img {
    width:var(--imagesize);
}
.option {
    position: relative;
}

.info{
    color: rgba(var(--light));
}
input,
input:hover,
input:active,
input:focus,
input:disabled,
input:checked,
input:valid,
input:invalid,
input:read-only,
textarea
{
    font-family: inherit;
    padding: var(--mainpadding);
    color: var(--almostblack-rgb);
}

select, option {
    margin: unset;
    padding: var(--mainpadding);
    border: unset;
    outline: unset;
    color: var(--dark-rgb);
    font-family: unset;
    font-size: unset;
    line-height: inherit;
    width:100%;
}

button, label {
    all: unset;
    display: block;
    height: 100%;
    width: 100%;
    padding:0px;
    margin:auto;
    cursor: pointer;
}


input[type="file"], input[type="radio"]{
    position: absolute;
    left:0px;
    top:0px;
    width:1px;
    height:1px;
    overflow: hidden;
    padding: 0px;
    opacity: 0;
}

.card-settings{
    background-color: var(--dark-rgb);
    border: solid var(--middle-rgb);
    border-width: 1px;
    border-radius:var(--radius);
    color:var(--light-rgb);
}

.g-btn {
    background-color: var(--accent-rgb);
    border:solid var(--accent-pop-rgb); 
    /*outline:1px solid var(--accent-support-rgb); */
    border-width: 1px;
    border-radius:var(--radius);
    padding:var(--mainpadding);
    box-sizing: border-box;
}
.g-btn:hover, .g-btn.active {
    filter: brightness(110%) contrast(110%);
    transform: scale(1.02);
}

.boxed-in{
    background-color: white;
    border: 1px solid var(--darkest-rgb);
    border-radius: var(--radius);
    box-shadow: inset 0px 0px 3px var(--darkest-rgb);
    /*outline:1px solid var(--middle-rgb);*/
    color:var(--almostblack-rgb);
}

.boxed-in:focus, .boxed-in:active {
    filter: brightness(110%);
}

.container {
    padding:calc(var(--morepadding)*2);
}

.insetPart {
    border: solid var(--dark-rgb);
    border-width: 1px;
    box-shadow: inset 0px 0px 5px black;
    background:rgba(0,0,0,0.2);
    padding:var(--morepadding);
    box-sizing: content-box;
    padding-top:50px;
}