@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&family=Roboto+Mono:wght@300&display=swap');

body, div, ul, ol, li {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat',Geneva,sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #555;
}

div {
    position: relative;
}

h1 {
    font-size: 2rem;
    font-family: 'Montserrat';
    font-weight: 400;
}
h3 {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 1.4rem;
    margin:0;
    margin-bottom: 1rem;
}

a {
    border: none;
    text-decoration: none;
    color: #286747;
}

a img {
    border: none;
    border-radius:10px
}

.clear {
    clear: both;
    padding: 0;
    margin: 0;
    height: 5px;
}

/* Parent Div Start Here  */

* html #container {
    height: 100%;
    overflow-y: auto;
}
#page_bodybg {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
* html #page_bodybg {
    position: absolute;
}

#container {
    margin: auto;
    background:#FFF;
}

.info {
    margin: 30px 10px;
    font-family: 'Roboto Mono',Geneva,sans-serif;
    font-weight: 300;
    font-size: .9rem;
    height: 40px;
    padding: 10px 0 10px 10px;
    width: 80%;
    background-color: #EEE;
}

#header {
    height:80px;
    background-color: #000;
    border-radius: 10x;
}

.logo {
    height: 30px;
    margin: 20px;
    padding: 5px;
}
.logo2 {
    height: 60px;
    margin:10px
}
.logo3 {
    height: 40px;
    margin: 15px;
    padding: 5px;
}

.clickscreen {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 1rem;
    padding: 15px;
    margin:20px 10px 0 10px;
    background-color: #fff5b9;
    border-radius:10px;
    text-align:center;
    width:20rem;
    border: 1px solid #CCC
}

.options {
font-size: .8rem;
font-style: italic;
margin:10px 0 20px 0;
}

.theme {    
    margin: 30px 10px 20px 10px;
    padding: 0px;
    font-family: 'Montserrat',Geneva,sans-serif;
    font-style: italic;
    font-size: 2rem;
    font-weight: 400;
}

.buttons {
    position:relative;
    margin:10px;
    width:400px;
    height:40px;
    padding:20px;
    border:1px solid #EEE;
    border-radius:5px;
}
.buttons2 {
    position:relative;
    margin:10px;
    width:400px;
    height:130px;
    padding:20px;
    border:1px solid #EEE;
    border-radius:5px;
}
.controls {
    position: relative;
    margin-top:1rem;

}
.btn {
    padding:10px;
    margin: 0 10px 10px 0;
    font-family: 'Montserrat',Geneva,sans-serif;
    font-weight: 400;
    font-size: 1rem;
    float: left;
    border: 1px solid rgb(171, 171, 171);
    border-radius: 10px;
    cursor: pointer;
}
.btn:hover {
    background-color: #76cebe;
}
.btn.off {opacity:.3}

#content {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
}
.menu{
    padding:10px
}
.box{
    background-color: #fafafa;
    margin-top: 10px;
    width:700px;
    padding:10px;
    border: 1px solid #EEE;
    border-radius: 10px;
}
.boxd{
    background-color: #fafafa;
    margin-top: 10px;
    width:700px;
    padding:10px;
    border: 1px solid #EEE;
    border-radius: 10px;
    opacity: 0.2;
}