/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like "how to change link color." */ * { padding: 0; margin: auto; width: auto; max-width: 100%; scroll-behavior: smooth; } body { background-color:#094200; color:white; font-family:sans-serif; min-height: 100vh; display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "nav main" "footer footer"; } /* assign your elements to the areas you defined in the grid-template rule: */ header { grid-area: header; padding: 1em; text-align: center; margin-bottom: -30px; font-size: 2rem; font-weight: bold; } nav { grid-area: nav; padding: 0.5em; display: block; justify-content: space-around; } main { grid-area: main; margin-right: 4em; } section { position: relative; width: 100%; padding: 1em; border: 2px darkgoldenrod; border-radius: 10px; margin-bottom: 1em; background-color: #315c1e; } aside { width: 40%; margin-left: 0.5rem; padding: 0.5rem; float: right; box-shadow: inset 5px 0 5px -5px greenyellow; font-style: italic; color: orange; } /* rem unit is relative to the font size of the root HTML element () which is 16px */ h1 { font-size:2.5rem; } h2 { font-size:1.8rem; } p { font-size:1rem; margin-top: 1em; margin-bottom: 1.5em; } a { color:#c1ec93; font-weight: bold; } a:visited { color:#c48d28; } a:hover { background-color:white; color:#336900; } img { height: 100px; display: flex; } ul { list-style-type: none; margin: 0; padding: 0; font-size:1rem } li { margin-right:20px; } footer { grid-area: footer; padding: 0; margin-top: 1em; margin-bottom: 1em; display: flex; flex-direction: column; align-items: center; color:wheat; } .back-button { position: absolute; left: 5%; top: 2%; } /*.back-to-top { /*from w3s tutorials and petrapixel github*/ /*position: fixed; bottom: 10px; left: 10px; opacity: 70%; line-height: 1; transform: translateY(10px); transition: 0.5s ease; pointer-events: none;*/ /* .back-to-top:hover { opacity: 100%; } */ /* accessibility for screen readers: */ a:focus, button:focus, input:focus { outline: 2px solid #005fcc; outline-offset: 2px; } /* status.cafe settings for index.html: */ #statuscafe { padding: .5em; background-color: #D5DDC0; border: 1px solid green; } #statuscafe-username { margin-bottom: .5em; } #statuscafe-content { margin: 0 1em 0.5em 1em; }