:root {
    --background: linear-gradient(0deg,rgba(45, 63, 65, 1) 0%, rgba(23, 34, 36, 1) 100%);;
    --element: #273236;
    --text: #f8f6f7;
    --text2: #c0c0c0;
    --text3: rgb(37, 37, 37);
    --border: #8DA8A1;
    --red_text: rgb(250, 68, 68);
}


html,body{margin: 0;padding: 0;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
*{color: var(--text);font-family: "Montserrat", serif;}

::-webkit-scrollbar {width: 11px;height: 11px;}
::-webkit-scrollbar-track {background: var(--background);border-radius: 10px;}
::-webkit-scrollbar-thumb {background-color: var(--element);border-radius: 10px;}

.footer{background: var(--element);border-top: var(--border) 3px solid;padding: 30px 0 5px 0;margin-top: 5vh;}
.footertext:hover{text-decoration: underline;}

#main-content{background: var(--background);overflow: scroll;overflow-x: hidden;display: flex;flex-direction: column;width: 100%;height: 100%;position: relative;max-height: 100vh;}
.red_text{color: var(--red_text);}

.navbar{height: 40px;border-bottom: var(--border) 2px solid;padding: 2px;width: 100%;position: fixed;top: 0;margin: 0;background: var(--element);z-index: 5;}
.imgnavbar{max-height: 85px;max-width: fit-content;border-radius: 90%;}
.navbardiv{display: block;width: 100%;}
.textnavbar{font-size: 3vh;text-decoration: none;margin: 0 25px 0 25px;transition: 1s;float: right;padding: 5px;border-radius: 5%;}
.textnavbar:hover{border-bottom: var(--border) solid 2px;color: var(--element);background-color: var(--text2);cursor: pointer;border-radius: 20%;}

.detach{margin: 100px 0 0 0;padding: 0 40px 0 40px;}
.title{font-size: 5vh;text-align: center;}
.element-text{border-radius: 30px / 30px;background-color: var(--element);padding: 10px;margin: 5px;border: var(--border) solid 3px;}
.boxgenaral{padding-top: 15vh;margin-bottom: 20vh;}
.boxrigth{margin-left: auto;margin-right: 0;}
.boxleft{margin-left: 0;margin-right: auto;}
.boxcenter{margin-left: auto;margin-right: auto;}
.boxleft,.boxrigth{width: 49vw;}
.link,.pointer{cursor: pointer;}
.link:hover{text-decoration: underline;}
p,.link,.text3vh{font-size: 3vh;}
.text5vh{font-size: 5vh;}
.button2,.button{border-bottom: var(--border) 3px solid;margin: 5px;font-size: 4vh;}
.button2{color: var(--text3);}
.leftelement{display: flex;flex-direction: row-reverse;}
.textwhite{color: var(--text3);}

.opacity-50{opacity: 50%;}
.link,.nounderline{text-decoration: none;}
.underline{border-bottom: var(--border) 3px solid;}


@media only screen and (max-width:400px){
.boxleft,.boxrigth{width: 80vw;}
.detach{padding: 0 5px 0 5px;}
}