:root{
    /*the color that will be switch */
    --main-bg-color: white;
    --main-txt-color: black;
    --scdr-bg-color: lightgray;
    --scdr-txt-color: var(--main-txt-color);
}
@media (prefers-color-scheme:dark){
    body::after{
        content: 'dark';
        display: none;
    }
}
@media (prefers-color-scheme:light){
    body::after{
        content: 'light';
        display: none;
    }
}
@media screen and (max-width: 890px) {
  header.nav a:not(:first-child) {display: none;}
  header.nav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 890px) {
  header.nav.responsive {position: relative;}
  header.nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  header.nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
body {
    min-height: 100vh;
    margin: 0;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}
.content{
	position:relative;
	min-height:80vh;
	width:100%
}
.parent{
	position:relative;
}
.fullcentered{
	text-align:center; 
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%; 
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.reallycentered{
	text-align:center;
	margin:0;
	position:fixed;
	top:50%;
	left:50%;
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
header.nav{
    margin:0;
    background-color: var(--scdr-bg-color);
    color: var(--scdr-txt-color);
    padding-bottom: 2px;
    overflow:hidden;
}
footer a{
    color: var(--scdr-txt-color);
    text-decoration:none;
}
header.nav a{
    color: var(--scdr-txt-color);
    text-decoration: none;
    float:left;
    display:block;
    text-align:center;
    padding:14px 16px;
    font-size: 17px
}
header.nav a:hover{
	color:var(--main-bg-color);
}
header.nav a.active{
	background-color: var(--main-bg-color);
	color: var(--scdr-txt-color)
}
header.nav .icon{
	display:none
}
a{
	color:var(--main-txt-color);
}
a:hover{
    background-color:var(--main-txt-color);
    color:var(--main-bg-color);
}
footer{
    margin-top: auto;
    border-top:solid var(--scdr-txt-color);
    /*display: flex ;*/
    text-align: center;
    width: 100%;
    left: 0;
    background-color:var(--scdr-bg-color) ;
    color: var(--scdr-txt-color);
}
.footerleft{
    border-right: solid var(--scdr-txt-color);
    height: 100%;
    left:0;
    width:50%;
}
.footerright{
    border-left: solid var(--scdr-txt-color);
    height: 100%;
    right:0;
    width:50%
}
.themebutton{
    right:0;
    top:50%;
    position: fixed;
    cursor: pointer;
    text-align:center;
    border-radius:100%;
    z-index:3;
    background-color: var(--scdr-bg-color);
    color: var(--scdr-txt-color);
}
.themebutton:hover{
    background-color: var(--scdr-txt-color);
    color:var(--scdr-bg-color);
}
button{
    border:solid var(--scdr-txt-color);
    background-color: var(--scdr-bg-color);
    color: var(--scdr-txt-color);
}
button:hover{
	background-color:var(--scdr-txt-color);
	color:var(--scdr-bg-color);
}
select{
    border:solid var(--scdr-txt-color);
    background-color: var(--scdr-bg-color);
    color: var(--scdr-txt-color);
}
select:hover{
	background-color:var(--scdr-txt-color);
	color:var(--scdr-bg-color);
}
form {
    border: solid var(--scdr-txt-color);
    background-color: var(--scdr-bg-color);
    color: var(--scdr-txt-color)
}
fieldset{
    border:solid var(--main-txt-color);
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}
#switchmodeicon{
	font-size:200%;
}
/*** Works on common browsers ***/
::selection {
    	background-color:var(--main-txt-color);
	color:var(--main-bg-color);
}

/*** Mozilla based browsers ***/
::-moz-selection {
    	background-color:var(--main-txt-color);
	color:var(--main-bg-color);
}

/***For Other Browsers ***/
::-o-selection {
    	background-color:var(--main-txt-color);
	color:var(--main-bg-color);
}

::-ms-selection {
    	background-color:var(--main-txt-color);
	color:var(--main-bg-color);
}

/*** For Webkit ***/
::-webkit-selection {
    	background-color:var(--main-txt-color);
	color:var(--main-bg-color);
}