@import '/src/main.scss'; * { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .body-example { background: #000000c4; } .container { margin: 0 auto; width: 900px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .header { width: 100%; border-radius: 5px; display: flex; align-items: center; flex-direction: column; background-color: #2a2f3b; margin-bottom: 8px; h1 { font-size: 57px; color: white; font-family: 'Times New Roman', Times, serif; margin: 40px 0 12px 0; } &__logoBox { display: flex; flex-direction: row; align-items: center; justify-content: center; } &__logo { width: 13%; height: 16%; border: 1px solid #525252; border-radius: 50%; margin: 22px 0 0 29px; } .navlist { display: flex; justify-content: space-around; margin: 15px 0 30px 0; padding: 0; width: 230px; li { display: inline; list-style: none; text-decoration: none; a { color: white; text-decoration: none; &:hover { text-decoration: underline; } } } } } .content { margin-top: 15px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .example-select { width: 100%; background-color: #5c5c5c; border-radius: 5px; margin: 15px 0 0 0; &_title { height: 45px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; padding: 20px 0 0 40px; margin: 0 0 30px 0; background-color: #2a2f3b; font-size: 20px; } &_submit { width: 200px; height: 35px; border-radius: 10px; border: none; margin-top: 20px; margin: 20px 15px; cursor: pointer; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; &:hover { background-color: #d7d7d7; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } } .layout-select { margin: 15px; } } code { display: none; } pre { background: #1e1e1e; margin: 15px; padding: 15px; color: #88d0f7; border-radius: 15px; font-size: 16px; line-height: 20px; } .code { &__class, &__var, &__string, &__keyword { font-size: 16px; line-height: 20px; } &__class { color: #4ec9b0; } &__var { color: #34a7ff; } &__string { color: #ce9178; } &__keyword { color: #5090ca; } } .check-code { width: 200px; height: 35px; cursor: pointer; border: none; border-radius: 10px; margin: 20px 15px; transition: all 1s; } .active { display: block; } @media (max-width: 576px) { .container { width: 95%; } .header { margin-top: 15px; h1 { font-size: 32px; } } .example-select_title { font-size: 14px; height: 40px; } }