@font-face {
   font-family: jetbrains;
   src: url(../font/JetBrainsMono-Bold.ttf);
}
@font-face {
   font-family: lato;
   src: url(../font/Lato-Regular.ttf);
}
html, * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
:root {
    --bg:#0E1117;
    --card:#121318;
    --muted:#9aa4b2;
    --blue:#1A73E8;
    --glass: rgba(255,255,255,0.03);
    --bg2: rgba(14,17,23,0.92);
}

header {
   background:var(--bg2);
   height: auto;
   width: 100%;
   display: flex;    
   backdrop-filter: blur(5px);
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
   z-index: 999;
   
}
.nav1 {
   height: 100px;
   width: 100%;
   display: flex;    
   justify-content: space-between;
   align-items: center;

}
.brand {
   color: white;
   font-family: "jetBrains", sans-serif;
   padding: 10px 10px 10px 30px;
   font-size: 3rem;
   transition: .3s;
   cursor: grab;
}
.brand::before{
   content: "";
   position: relative;
   top: 60px;
   left: -10px;
   height: 5px;
   width: 5px;
   background-color: white;
   border-radius: 10px;
   transition: .2s;
   display: block;
   opacity: 0;
}
.title {transition: .2s;color: var(--blue);}
.brand:hover::before { width: 135px; opacity: 100;}
.brand:hover {color: var(--blue);}
.brand:hover .title{opacity: 0;}
.menu {
   height: 100px;
   width: 100px;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
}
.menu > div {
   width: 35px;
   margin: 3px;
   border-radius: 10px;
   height: 5px;
   background-color: white;
   transition: .3s;

}

.navigation {
   height:auto;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.two {
   flex-direction: row;
   width: 400px;
   margin-left: -85px;
}
.nav_cards {
   width: 100%;
   transition: .3s;
   display: none;
}
.navLink {
   list-style: none ;
   width: 100%;
   display: none;
}
.navLink > a {
   text-decoration: none;
   color: var(--muted);
   font-family: "jetBrains", sans-serif;
   display: block;
   padding: 10px;
   text-align: center;
   transition: .2s;
   border-radius: 10px;
}
.navLink2 {display: inline-block;}
.navLink > a:hover {
   color: #fff;
   background-color: var(--muted);
   
}
.kedua {
   display: inline-block;
   margin: 5px;

}

/* main */

/* introduction */

#introduction {
   height: 1000px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   box-shadow: 0px 0px 0px black inset;
   background: #dfdfdf;
}
.perkenalan {
  height: auto;
  width: 500px;
}
.brandIntro {
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.brandIntro > figcaption {
   font-family: jetbrains;
   font-size: large;
   margin: 10px;
   cursor: grab;
}
.brandIntro > img {
   border-radius: 1000px;
   border: 20px solid var(--blue);
   height: 500px;
   width: 500px;
}
.brandPerkenalan > p:nth-child(1) {
  font-size: 3rem;
  font-family: jetBrains;
}
.brandPerkenalan > p:nth-child(2) {
  font-size: 3rem;
  font-family: jetBrains;
}
.about_me {
   font-family: lato;
   font-weight: bold;
   color: #252525;
   

}
.about_me > p {font-size: 16px;}
.forIntro {
   height:auto;
   width: 100%;
   display: flex;
   align-items: center;
   margin-top: 20px;
}
.intro {
   background-color: var(--blue);
   list-style: none;
   width: 100%;
   
}
.intro > a {
   color: white;
   text-decoration: none;
   font-family: jetbrains;
   letter-spacing: 2px;
   text-align: center;
   display: block;
   padding: 10px;
}
.intro {
   border-radius: 10px;
   margin: 0 2px 0 2px;
}


.desHp {display: none;}
.desHp,.desPC {padding-left: 10px;}
.medsos {
   padding: 10px;
}
.youtube,.ig,.github {
   display: flex;
   align-items: center;
   padding: 3px;
}
.youtube > a,.ig > a,.github > a {
   text-decoration: none;
   color: var(--blue);
   padding-left: 10px;
   font-style: italic;
   font-family: lato;


}
/* rumus Lingkaran */
#lingkaran {
   display: flex;
   height: 800px;
   justify-content: center;
   align-items: center;
   background-color: var(--bg);
   flex-direction: column;
   z-index: 2;
}
#lingkaran::before {
   content: "";
   position: absolute;
   height: 800px;
   width: 150px;
   border: 2px solid red;
   left: 0;
   background: var(--blue);
   filter: blur(110px);
   z-index: 0;
}
#lingkaran::after {
   content: "";
   position: absolute;
   height: 800px;
   width: 150px;
   border: 2px solid red;
   right: 0;
   background: var(--blue);
   filter: blur(110px);
   z-index: 0;
}
.vektorBundar {
   height: 150px;
   width: 150px;
   border-radius: 50%;
   background-color: var(--blue);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: jetbrains;
   color: #fff;
   letter-spacing: 1px;
   box-shadow: 0px 0px 50px black inset;
}
#diameter {
   outline: none;
   padding: 10px;
   border-radius: 10px;
   transition: .3s;
}
#diameter:focus {
   border: 3px solid var(--blue);
}
#jari {
   border-radius: 10px;
   outline: none;
   padding: 10px;
   transition: .3s;
}
#jari:focus {
   border: 2px solid var(--blue);
}

.count {
   padding: 10px;
   border-radius: 10px;
   border: none;
   font-family: jetbrains;
   cursor: pointer;
   transition: .3s;
}
.count:active {
   background: var(--blue);
   color: #fff;
   transform: scale(0.8);
}
.output {
   width: 260px;
   margin-top: 10px;
   width: 470px;
}
.output > h3 {
   margin-bottom: 10px;
   font-family: jetbrains;
}
.output > h4 {
   color: #fff;
   font-family: jetbrains;
   font-size: 1.3rem;
}

/* pythagoras */
#pythagoras {
   height: 700px;
   background-color: var(--bg2);
   position: relative;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.segitiga_samakaki {
   border-left: px solid transparent;
   border-right: 200px solid transparent;
	border-bottom: 100px solid #fff;
   margin: 0 auto;
}
.segitiga_samakaki::after {
   content: "b";
   position: absolute;
   margin-left: -20px;
   margin-top: 40px;
   color: white;
   font-family: jetbrains;
   font-size: 1rem;

}
.segitiga_samakaki::before {
   content: "a";
   position: absolute;
   margin-left: 70px;
   margin-top: 105px;
   color: white;
   font-family: jetbrains;
   font-size: 1rem;

}
.segitiga_samakaki > span {
   position: absolute;
   margin-left: 100px;
   margin-top: 25px;
   color: white;
   font-family: jetbrains;
   font-size: 1rem;
}
#garisA {
   outline: none;
   padding: 10px;
   border-radius: 10px;
   transition: .3s;
}
#garisA:focus {
   border: 3px solid var(--blue);
}
#garisB {
   border-radius: 10px;
   outline: none;
   padding: 10px;
   transition: .3s;
}
#garisB:focus {
   border: 2px solid var(--blue);
}
#garisC {
   border-radius: 10px;
   outline: none;
   padding: 10px;
   transition: .3s;
}
#garisC:focus {
   border: 2px solid var(--blue);
}

/* rumus */
.rumusLebih {
   display: flex;
   flex-direction: column;
}
.inputRumus {
   display: flex;
   padding: 10px;
}
.inputRumus > input {margin: 5px;}
.brandRumus {
   font-family: jetbrains;
   color: var(--blue);
   margin: 80px 0px 20px 0px;
}
.brandRumus > h3 {
   font-size: 2rem;
}
.brandRumus > figcaption {
   color: var(--muted);
   font-size: medium;
   font-style: italic;
   margin-top: 10px;

}
.jari {margin: 5px;}
.goras {
   margin-left: 10px;
   display: flex;
   align-items: flex-end;
}
/* footer */
.main_footer {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-around;
   background-color: #454545;
   padding: 30px;
}
.brand_footer {
   height: 200px;
   
}
.profil_footer {
   display: flex;
   align-items: center;
   margin-left: 10px;
}
.profil_footer > h3 {
   font-size: 3rem;
   font-family: jetbrains;
   margin-left: 10px;
   color: #c1c1c1;
}
.deskripsi_footer {
   width: 400px;
   
}
.deskripsi_footer > p {
   font-family: lato;
   font-size: 1rem;
   margin-left: 70px;
   color: #ffffff;
}
.profil_footer > img {border-radius: 1000px;}
.contact_us_footer {
   height: 200px;
   width: 400px;
}
.email_footer > p {
   margin: 0 10px 10px 10px;
   font-family: lato;
   color: white;
}
.contact_us_footer > h1 {
   font-family: jetbrains, sans-serif;
   font-size: 2rem;
   font-weight: bolder;
   color: #c1c1c1;
}
.medsos_footer {
   width: 400px;
   height: 200px;
}
.copyright {
   display: flex;
   justify-content: center;
   background-color: #505050;

}
.copyright > p {
   color: #dfdfdf;
   font-family: jetbrains;
   letter-spacing: 2px;
   font-size: smaller;
}
.medsos_footer > h3 {
   color: #c1c1c1;
   font-size: 2rem;
   font-family: jetbrains;
}
.medsos_footer > p {
   font-size: small;
   font-family: lato;
   color: white;
   margin-left: 20px;
}
.media {
   display: flex;
   margin-top: 10px;
   width: 200px ;
   margin-left: -20px;
   justify-content: space-around;
}
/* kalkulator */
#display {
   height: 80px;
   width: 300px;
   margin-bottom: 10px;
   border-radius: 10px;
   background-color: var(--card);
   color: white;
   font-family: jetbrains;
   font-size: 2rem;
   text-align: right;
   padding: 10px;
   box-shadow: 0px 0px 50px black inset;
}
#kalkulator {
   height: 800px;
   background-color: var(--bg);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.kalkulator_container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   border: 2px solid var(--glass);
   padding: 20px;
   background: var(--glass);
   border-radius: 10px;
}
.tombol_calc {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
   justify-content: center;
   margin-top: 10px;
   gap: 6px;
}
.tombol_calc > button {
   flex: 1 0 0;
   padding: 10px;
   cursor: pointer;
   border: none;
   background-color: #f5f5f5;
   border-radius: 10px;
   box-shadow: 0px 0px 20px black inset  ;
}
.tombol_calc > button:active {
   background-color: var(--blue);
   color: #fff;
   transform: scale(0.9);
}
.baris5 {
   justify-content: flex;
}