*{ box-sizing: border-box; margin:0; padding:0;}
html {scroll-behavior: smooth;} 
body {font-family: 'Ubuntu', sans-serif;  background-image: url("../img/wallpaper-reduct.png"); background-size:cover; background-attachment: fixed;}


/* Container */
.container { min-height:auto; position:relative; min-height: 100vh;}

/*content*/
.content {padding:10em 1.4em 10em 1.4em; height: 100%; margin: auto;}

/* Header */
.main-header { position:relative; padding:0 1.8em 1em 1em; width: 100vw; display: flex; justify-content: space-between; align-items: center; position:fixed; z-index: 400; background-color: rgba(0, 0, 0, 0.53); transition: all ease-in-out 600ms; border-radius: 0 0 25% 25%;}

/* Header Action */
.removeopacity {background-color: rgba(0, 0, 0, 0.0)}
.butt-headergone { background-color:rgba(0, 0, 0, 0.53) !important; border-color:rgb(110, 190, 90) !important;}
.logo-headergone { background-color:rgba(0, 0, 0, 0.53) !important; border-color:rgb(110, 190, 90) !important; }

/*Logo*/
.main-logo {border-radius: 50%; border:2px solid; border-color:rgba(110, 190, 90, 0); position: relative; padding:1.5em; background-color: transparent; transition: background-color 800ms, border-color 800ms;}
.text-logo { -webkit-text-stroke: var(--font-border); font-size: 1.8em; background: var(--main-font-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;}

/* Menu-Button */
.main-button-menu{border:2px solid; border-color:rgba(110, 190, 90, 0); border-radius: 50%; padding:2rem; content:" "; position:relative; display:flex; align-items: center; justify-content: center; cursor: pointer; transition: all ease-in-out 200ms, background-color 800ms, border-color 800ms; margin-right:1em; background-color:transparent; z-index: 500; opacity: 1;}
.buttonline{ background-color: rgba(204, 255, 2, 0.864); width:1.5em; height:0.14em; position:absolute; border-radius: 25px; transform: scale(1); transition: transform 400ms; }
.main-button-menu .line1{ transform:translateY(-6px); }
.main-button-menu .line3{ transform:translateY(+6px); }
.openmenu { transform: scale(1) /*rotate(225deg)*/; }
.openmenu .line1{ transform: rotate(225deg); }
.openmenu .line3{ transform: rotate(-225deg); }
.openmenu .line2{ transform: scale(0) translate(150%, 100%); }

/*Navbar*/
.main-nav { display:none; left:0; top:0; height: 100vh; width:100vw; background-color:rgba(11, 14, 0, 0.828); position:fixed; z-index: 300; overflow-y: hidden; backdrop-filter: blur(0.6px); opacity:0; transform: translateX(-100%); transition: opacity 600ms, transform 400ms; align-items: center; justify-content: center;}
.showmenu { display:flex;}
.main-menu { list-style-type: none; /*margin:auto; padding:0;*/ position:relative; min-width:50vw;}
.main-menu-item {margin:4.62em auto; text-align: center; width:85%; margin:30px 0}
.main-menu-link:hover {background-color: rgba(137, 201, 0, 0.864); border-color:#50f128; }
.main-menu-link:active{background-color: rgba(176, 192, 0, 0.864); border-color:#a3f48f; color:#235600;}
.main-menu-link {text-decoration: none; font-size: 1.87em; color:white; font-weight: bold; content: ""; display: block; border-top: 5px solid var(--border-item-menu-col); border-bottom: 5px solid var(--border-item-menu-col); transition: all ease-in-out 300ms; overflow:hidden; background-color:rgba(12, 62, 0, 0.262);  border-radius:20px 20px 20px 20px; padding:30px 1em;}
.effecton {opacity:1; transform:translateX(0);}



/*Title h1*/
.content .main-title { margin:8px 0 15px 0; text-transform: uppercase; background: var(--main-font-gradient); -webkit-text-stroke: var(--font-border);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; font-size: 38px; }

/*Title h2 sections*/
.content .title-section { display:inline-block; text-align: left; color:rgb(227, 252, 2); -webkit-text-stroke: 0.04em #bebebe; margin:10px 0; font-size:30px;}.title-section { margin-top:80px !important;}

/*Normal Text*/
p,h3, h4, h5, h6, a {color:#e8e8e8}
p {font-size: 1.15em;}
a {color:#6ebe5a; text-decoration: none; transition: color 300ms;}
a:hover {color:#50f128;}
a:visited {text-decoration: none;}
.advise {color:#b20000; margin: 10px auto; -webkit-text-stroke: 0.4px rgb(98, 0, 0);}
.advise-s {color:#b20000; font-style: italic; font-size: 14px;}
/*p Section*/
.homepage-p{background-color:transparent; transition: background-color 400ms, box-shadow 400ms; border-radius: 5px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); font-size: 20px; }
.homepage-p:hover{ background-color: rgba(0,0,0,0.88) !important; box-shadow: -1px 0px 50px 18px rgba(0,0,0,0.88);}



/*Footer*/
.main-footer { position:absolute; bottom:0; width:100%;}
.upper-footer{ text-align: center; padding: 1em; background-color:#1f1f1fd5; border-radius: 50% 50% 0 0; z-index: 500;}
.lower-footer{ text-align: center; background-color: black; color:#bfbfbf; padding:8px; font-size: 14px;}

/*Social Icons*/
.upper-footer a{ margin:0 1em;}
.social-icon{ font-size: 2.5rem; color:rgba(255, 255, 255, 0.146); transition: transform 0.5s, color 0.5s;}
.social-icon:hover {transform:rotate(360deg)}
.soc-facebook:hover {color:rgb(24, 115, 235);}
.soc-github:hover {color:rgb(95, 0, 142);}
.soc-youtube:hover {color:rgb(213, 0, 28);}
.soc-tiktok:hover {color:rgb(115, 235, 235);}
.soc-facebook:active {color:rgb(71, 151, 255); transform:scale(0.85);}
.soc-github:active {color:rgb(198, 83, 255); transform:scale(0.85);}
.soc-youtube:active {color:rgb(255, 44, 72); transform:scale(0.85);}
.soc-tiktok:active {color:rgb(209, 255, 255); transform:scale(0.85);}

@media screen and (max-width: 1100px) {
  .main-header {padding:0.5 2.3em 1em 1em;}
  .text-logo {font-size:2.5em;}
  .buttonline {width:3.2em; height:0.40em;}

  /*button menu mobile*/
  .main-button-menu .line1{ transform:translateY(-12px); }
  .main-button-menu .line3{ transform:translateY(+12px); }
  .openmenu { transform: scale(1) /*rotate(225deg)*/; }
  .openmenu .line1{ transform: rotate(225deg); }
  .openmenu .line3{ transform: rotate(-225deg); }
  .openmenu .line2{ transform: scale(0) translate(150%, 100%); }
}

@media screen and (min-height: 2340px) {
  .main-title {font-size: 90px !important;}
  .main-button-menu{padding:2.8rem; margin-right:0;}
  .content {min-height:100vh; }
  .container {min-height:100%;}
  .content .title-section {font-size: 90px;}
  .content p { font-size: 70px;}
}

pre {
  margin:10px 0;
  padding:10px;
  background-color:#1c1c1c;
  border: 2px solid var(--code-col);
  border-radius: 10px;
}

code {
  color:var(--code-col);
  font-size: 15px;
}