:root {
    --mainbg: #cac5ae;
    --mainmg: #b0ab96;
    --mainfg: #575449;
    --mainbright: #cbc6ae;
    --bga: rgba(34, 34, 34, .7);
    --fontcol: white;
}

::selection {
    color: var(--mainbg);
    background: var(--mainfg);
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    /*Map some 4x4 tiles onto the background*/
    background-image: url("../assets/background.png");
    background-color: var(--mainbg);
    color: var(--mainfg);
}

.main {
    border: 24px solid transparent;
    border-image: url("../assets/border.png") 48 round;
    border-top: none;
}

h1 {
    text-shadow: 4px 4px var(--mainmg);
    font-weight: lighter;
    text-transform: uppercase;
}

h2{
    border: 2px solid var(--mainfg);
    border-left: none;
    border-right: none;
    font-weight: lighter;
    font-size: 18px;
}

/*The top Buttons to select your tab*/
nav {
    border: 24px solid transparent;
    border-image: url("../assets/border.png") 48 round;
    border-top: none;
}

nav button, article button {
    text-transform: uppercase;
    background-color: var(--mainmg);
    border: none;

    font-weight: lighter;
    font-size: large;

    padding: 5px;
    margin: 10px;
    margin-top: 15px;
}

nav button:hover, article button:hover {
    background-color: var(--mainfg);
    color: var(--mainbg);
    transition: 300ms ease;

}

nav button:focus, article button:focus{
    outline: none;
}

/*Main Content Box*/
.cont{
    margin: 0;
    border: 24px solid transparent;
    border-image: url("../assets/listborder.png") 16 round;
    border-right: none;

    /*width: 100%;
    height: 100%;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

/*Selection for projects*/
#projsel{
    width: 32%;
    box-shadow: 3px 3px var(--mainmg); 
    background-color: var(--mainbright);
    padding: 5px;
    display: block;
}

#projsel label{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-color: rgba(0, 0, 0, 0);
    border:none;
    border-top: 6px solid rgba(0, 0, 0, 0);
    border-bottom: 6px solid rgba(0, 0, 0, 0);
    color: var(--mainfg);
    text-align: center;
    display: block;

    position: relative;
    width: 100%;
    margin: 0;
}

#projsel label:hover{
    background-color: var(--mainmg);
    color: var(--mainfg);

    border-top: 6px double  var(--mainmg);
    border-bottom: 6px double var(--mainmg);
    background-clip: padding-box;
}

input[type="radio"]{
    display: none;
}
/* Create a custom checkbox */
#projsel label span {
    position: absolute;
    top: 1px;
    left: 3%;
    height: 16px;
    width: 16px;
    background-color: var(--mainfg);
  }


#projsel input:checked + label{
    background-color: var(--mainfg);
    color: var(--mainbg);

    border-top: 6px double  var(--mainfg);
    border-bottom: 6px double var(--mainfg);
    background-clip: padding-box;
}

/* When the checkbox is checked, add a blue background */
#projsel input:checked + label span {
    background-color: var(--mainbg);
}

/* Create the checkmark/indicator (hidden when not checked) */
#projsel label span:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
#projsel input:checked label + span:after {
    display: block;
}

#projsel input:checked + label span:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#projsel input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

#articlespace{
    width: 66%;
}

article{
    width: 100%;
    height: 100%;
    background-color: var(--mainbright);
    box-shadow: 3px 3px var(--mainmg); 
    padding: 0px;
    display: none;
}

article p, article b{
    margin: 5px;
}

article ul, article ol, article li{
    margin-left: 23%;
}

article h3{
    background-color: var(--mainmg);
    border-bottom: 4px double var(--mainmg);
    background-clip: padding-box;
    font-weight: lighter;
    padding: 5px;
    margin: 0px;
}

article img{
    max-width: 40%;
    float:left;
    margin: 5px;
}

/*Information Div*/
#infobox{
    border: 24px solid transparent;
    border-image: url("../assets/infoborder.png") 16 round;
    border-top: none;
    border-bottom: none;
    border-right: none;
 
    box-shadow: 3px 3px var(--mainmg);

    background-color: var(--mainbright);
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

footer{
    text-align: center;
}