/* 
*  Base Dark Color:		#B7B7B7
*
*  Base Red Color:		#970808
*
*  Base Blue Color:		rgba(11,58,97,0.3)
*
*  Base Oragne Color:	#EB8702
*  
*/ 
/*
body{
	background-color: #690000;
}
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

    * {box-sizing: border-box;}
    
    body {
      font-family: "Montserrat", sans-serif;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      min-height: 100vh;
      margin: 0;
      transition: background 0.2s linear;
    }
    
    body.dark {background-color: #292c35;} /* #9b59b6 */
    
    /* body.dark h1, body.dark a {color: #fff;} */
    
    body.dark a { color: #41c7fc !important}
    
    body.dark #mainbody {
        color: white;
    }
    
    .checkbox {
      opacity: 0;
      position: absolute;
    }
    
    .checkbox-label {
      background-color: #111;
      width: 50px;
      height: 26px;
      border-radius: 50px;
      position: relative;
      padding: 5px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .fa-moon {color: #f1c40f;}
    
    .fa-sun {color: #f39c12;}
    
    .checkbox-label .ball {
      background-color: #fff;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 2px;
      top: 2px;
      border-radius: 50%;
      transition: transform 0.2s linear;
    }
    
    .checkbox:checked + .checkbox-label .ball {
      transform: translateX(24px);
    }

	body {
		margin-bottom: 1em;
		background-color: white;
	}
	
	p{
		text-align: center;
		font-size: 200%;
	}

	a{
		text-align: center;
		color: light blue;
	}
	a:visited{
		color: light blue;
	}
	table{
		border-collapse: collapse;
		margin:0; 
		margin-top:4em;
		width: 100%;
		table-layout: fixed;
		word-break: break-all;
	}

	#element tr{
		background-color: rgba(218,203,203,0.3);
		font-size: 200%;
		text-align: center;
	}

	#element tr:nth-child(even) {
		background-color: rgba(11,58,97,0.3);
		
	}
	#element tr:hover{
		color: black;
	}

	#mainbody{
		font-family: 'Abel', sans-serif;
		width:100%;
		height:100%;
		padding: 0;
		margin: 0;
		border: none;
		text-align: center;		
	}

	#spanTable{
		font-size: 300%;
		padding: 0;
		margin: 0;
		width:100%;
		top:30%;
		background-color: #970808;
		color: white;
		padding-left:3em; 
		padding-right:3em;
	}