/*CSharpDeveloper.io Site Main CSS file*/

/*Variables Section (ROOT)*/
:root {
    /*Radius Controls Variables*/
    --borderRadius: 15px;
    --border: 1px solid #ffffff;
    /*Color Scheme Variables*/
    --backGroundColor: #383838;
    /*Header Variables*/
    --headerHeight: 75px;
    /*Navigation Variables*/
    --navHeight: 40px;
    /*Body Variables*/
    /*Content 1 (left Column) Variables*/
    /*Main Variables*/
    /*Content 2 (right Column) Variables*/
    /*Footer Variables*/
    --footerHeight: 75px;
}
/* ############################################################################################### */
/* CSS RESET*/
* {
    margin: 0;
    padding: 0;
}

/*Main Header Layout*/
.mainHeader {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    grid-column-start: 1;
    grid-column-end: 4;
}
/* Main Body Layout*/
body {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: .75fr 2fr .75fr;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    gap: 3px;
    padding: 3px;
    box-sizing: border-box;
    font-weight: 100;
    color: white;
    text-align: center;
}
/*Navigation Layout*/
.navigation {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    grid-column-start: 1;
    grid-column-end: 4;
    position:relative;
    z-index:999;
    text-align:left;

}
.navigation ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    border-radius: var(--borderRadius);
    background-color:#000000;
}
.navigation li{
    display:inline-block;
}
.navigation li a{
    color:white;
    display:block;
    padding:10px 20px;
    text-decoration:none;
}
.navigation ul ul{
    position:absolute;
    top:100%;
    display:none;
}
.navigation ul ul li{
    display:block;
}
.navigation li:hover ul{
    display:block;
}
.navigation ul ul li a:hover{
    background-color: var(--backGroundColor);
    border-radius: var(--borderRadius);
    border: var(--border);
}
/*Content 1 - Left Column*/
.content1 {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
/*Main Layout - Column 2*/
.mainContent {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
/*Content 2 - Column 4*/
.content2 {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
/*Footer Layout*/
footer {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    grid-column-start: 1;
    grid-column-end: 4;
}

/* ############################################################################################### */