@font-face {
  font-family: Grotesk;
  src: url(/fonts/Grotesk-01Extrafin.otf);
}

@font-face {
  font-family: FifTwe;
  src: url(/fonts/FifteenTwenty-Demi.otf);
}

@font-face {
  font-family: FifTweItalic;
  src: url(/fonts/FifteenTwenty-DemiOblique.otf);
}

body {
    background-color: rgb(204, 217, 204);
    background-image: url(/img/bg.JPG);
    background-size: cover;
    font-family: FifTwe;
    font-size: 20px;
}

main {
    position: absolute;
    z-index: 9;
    width: 700px;
    border: outset 3px black;
    background-color: lightgrey;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: #0000003b 8px 8px 2px;
    padding: 8px;
}

#mydiv {
    display: none;
}

#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #b6ce91;
    color: #000000;
    border: dashed 1px black;
}

main .button {
    border: outset #7ba76f;
    background-color: #b6ce91;
    width: fit-content;
    padding: 6px;
    margin: auto;
}

main .button:hover {
    color: #b6ce91;
    background-color: #5a7952;
    border: inset #3d5337;
}

#flex {
    display: flex;
}

#text {
    padding: 10px;
}

#sketch {
    width: 120px;
    margin: 30px;
}

h1 {
    font-family: Grotesk;
    font-size: 26px;
    margin: 0px;
}

i {
    font-family: FifTweItalic;
}

a {
    text-decoration: none;
    color: black;
}

.app {
    width: 110px;
    text-align: center;
    position: absolute;
    top: 50px;
    left:50px;
    cursor: pointer;
}

.app:hover {
    text-decoration: underline white;
}

.app img {
    width: 90px;
}

.app span {
    color: white;
    text-shadow: black 2px 2px 4px;
}

#appCP {
    top: 250px;
}

#colophon {
    background-color: #b6ce91;
    width: 600px;
    height: 500px;
    padding: 10px;
    display: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: outset 3px #90ae64;
}

#colophon span:hover {
    cursor: pointer;
}

#colophon #text a {
    text-decoration: underline;
}

#colophon #text {
    max-height: 450px;
    overflow: auto;
}

footer {
    position:fixed;
    bottom:0;
    width:100%;
    display: flex;
    height:45px;
    background-color: lightgray;
    border-top: outset rgb(237, 237, 237) 3px;
    margin: 0;
}

footer .button {
    border: outset lightgrey 3px;
    background-color: lightgrey;
    margin: 5px;
    padding: 5px;
}

footer #active {
    background-color: #b6ce91 !important;
    border: outset #7ba76f 3px !important;
    display: none;
}

footer #cpButton {
    background-color: #b6ce91 !important;
    border: outset #7ba76f 3px !important;
    display: none;   
}