@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.button{
   /* 31293a */
   background: #13141a;
   display: inline-block;
   padding: 15px 30px;
   color: #fff;
   font-family: "Roboto Mono";
   text-decoration: none;
   border: 0;
   cursor: pointer;
   border-radius: 5px;
}

.block{
   background: #24262f;
   padding: 25px;
   border-radius: 20px;
}

body{
   background: #1c1d1f;
}

.container {
   margin: 15px;
   max-width: 700px;
   margin: 0 auto;
   margin-top: 100px;
}
.header {
   margin-top: 25px;
   display: flex;
   gap: 20px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}
.header-title {
   font-family: "Montserrat", Arial;
   font-size: 30px;
   max-width: 400px;
   color: #eef3f4;
}
.header-author {
}



.example {
   margin-top: 75px;
}
.example-text {
   font-family: "Montserrat";
   color: #fff;
   font-size: 30px;
   margin-top: 15px;
}
.example-code {
   font-family: "Roboto Mono";
   background: #111;
   border-radius: 20px;
   font-size: 15px;
}
.example-buttons {
   margin-top: 40px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.example-result{
   font-size: 16px;
}


.output, .code {
   margin-top: 15px;
   display: none;
}
.output-title, .code-title {
   font-family: "Roboto Mono";
   font-size: 20px;
   color: #fff;
}
.output-code {
   margin-top: 15px;
   color: #fff;
   font-family: "Roboto Mono";
   font-size: 25px;
   overflow-x: auto;
}
.output-example {
   color: #ccc
}

.code-code {
   font-family: "Roboto Mono";
   font-size: 20px;
   color: #fff;
   margin-top: 20px;
   line-height: 35px;
   background: #222;
   padding: 20px;
   border-radius: 10px;
   overflow-x: auto;
}


.code-red{
   color: rgb(196, 44, 44)
}
.code-yellow{
   color: rgb(196, 191, 44)
}
.code-blue{
   color: rgb(44, 125, 196)
}
.code-orange{
   color: rgb(196, 123, 44)
}

.show{
   display: block;
}


.footer {
   margin-top: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 25px;
   margin-bottom: 40px;
}
.footer-logo {
   width: 150px;

}
.footer-link {
   font-family: "Roboto Mono";
   color: #3e4456;
   text-decoration: none;
   transition: 0.3s;
   font-size: 14px;
}
.footer-link:hover{
   background: #3e4456;
   color: #fff;
}



@media (max-width: 700px) {

   .header-title, .example-text{
      font-size: 20px;
   }
   .header{
      justify-content: center;
   }
   .header-title{
      text-align: center;
   }
}