$color1: black; $color2: rgb(214, 214, 214); $accent-color: rgb(225, 30, 90); .logo { height: 15vmin; pointer-events: none; } .mono { font-family: monospace, monospace; } .bold { font-weight: bold; } header { margin-top: 10vmin; } header, h1, h2, h3 { text-align: center; } .content { width: 800px; display: flex; flex-direction: column; align-items: center; justify-content: center; align-content: center; margin-left: auto; margin-right: auto; } ul, li { list-style-type: none; margin: 0; padding: 0; } .p { width: 550px; } .btn-clipboard { border: none; background-color: transparent; cursor: pointer; &:hover, &:focus { color: $accent-color; } &:focus { outline: none; } } .btn { height: 26px; border: 1px solid; border-color: $color2; background-color: transparent; margin: 5px; font-size: 16px; color: $color1; &::placeholder { color: $color2; } &:hover, &:focus { outline: 1px solid white; border-color: $accent-color; color: $accent-color; } } .btn-hello { width: 200px; display: inline; float: right; } table { text-align: right; } .label { width: 120px; display: inline-block; } .input { width: 500px; height: 26px; box-sizing: border-box; margin: 5px; border: 1px solid; border-color: $color2; color: $color1; &::placeholder { color: $color2; } &:hover, &:focus { outline: 1px solid white; border-color: $accent-color; } } .gg-clipboard { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 18px; border: 2px solid; border-radius: 2px; } .gg-clipboard::after, .gg-clipboard::before { content: ""; display: block; box-sizing: border-box; position: absolute; border-radius: 2px; width: 10px; left: 2px; } .gg-clipboard::before { border: 2px solid; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; top: -2px; height: 6px; } .gg-clipboard::after { height: 2px; background: currentColor; box-shadow: 0 -4px 0 0; bottom: 2px; }