averageandyyy/technical

1@media (prefers-reduced-motion: no-preference) {2  * {3    scroll-behavior: smooth;4  }5}6 7* {8  box-sizing: border-box;9}10 11#header {12  display: flex;13  align-items: center;14  justify-content: center;15}16 17#logo {18  width: 280px;19  height: 82px;20  aspect-ratio: 35 / 4;21}22body {23  min-width: 290px;24  background-color: #2b5b84;25  color: #ffd343;26  font-family: 'Open Sans', Arial, sans-serif;27  line-height: 1.5;28}29 30main {31  margin-left: 400px;32  padding: 20px;33}34 35 36#navbar {37  position: fixed;38  min-width: 290px;39  top: 0px;40  left: 0px;41  width: 400px;42  height: 100%;43  border-right: solid;44}45 46 47#navbar header {48  text-align: center;49  margin: 15px;50}51 52#navbar ul {53  padding: 0;54  height: 100%;55}56#navbar li {57  border-top: 1px solid;58  list-style: none;59}60#navbar a {61  display: block;62  padding: 10px 30px;63}64 65#main-doc header {66  text-align: left;67  margin: 0;68}69section article {70  margin: 15px;71  font-size: 0.95em72}73 74code {75  display: block;76  background-color: #383838;77  padding: 15px;78  margin: 10px;79  border-radius: 10px;80}81.output {82  color: rgb(0,255,0);83}84 85a {86  color: #ffd343;87}88a:hover {89  color: rgb(0,255,0);90}91 92@media (max-width: 815px) {93  #navbar {94    display: block;95    position: fixed;96    top: 0;97    padding: 0;98    margin: 0;99    width: 100%;100    max-height: 350px;101    border: none;102    z-index: 1;103    background-color: #2b5b84;104  }105  #main-doc {106    display: block;107    position: relative;108    margin-left: 0px;109    margin-top: 325px;110    111  }112 113  #header {114    justify-content: flex-start;115  }116}117 118