@import url('https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css');

@font-face {
  font-family: 'Comic Sans (Neocities)';
  src: url('comic.ttf');
}

#button-select {
  margin-top: 5%;
  width: 100%;
  text-align: left;
  user-select: none;
  -moz-user-select: -moz-none;
}

#container {
  width: 55%;
  height: 600px;
}

#content {
  background-color: #c2cbea;
  text-align: left;
  color: #6068a9;
  height: 100%;
  border-radius: 8px;
  padding: 8px;
  width: calc(100% - 16px);
  height: 585px;
  overflow: scroll;
}

body {
  text-align: center;
  font-family: 'Comic Sans (Neocities)';
  background-color: #4d5676;
  overflow: hidden;
  padding-top: 16px;
}

#button-select > a, #button-select > b {
    background: #C2CBEA;
    background: -webkit-linear-gradient(180deg,rgba(116, 132, 204, 1) 0%, rgba(194, 203, 234, 1) 100%);
    background: -moz-linear-gradient(180deg,rgba(116, 132, 204, 1) 0%, rgba(194, 203, 234, 1) 100%);
    background: linear-gradient(180deg,rgba(116, 132, 204, 1) 0%, rgba(194, 203, 234, 1) 100%);
    padding: 8px;
    margin: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #6068a9;
    position: relative;
    top: -4px;
}

.blog img {
  border-radius: 8px;
}

/* tooltips */
bdi {
  cursor: help;
  font-style: italic;
}

/* code thing */
.code {
  resize: none;
  overflow: hidden;
  background-color: #272c33;
  color: #fff;
  font-family: 'Comic Mono';
  font-size: 13px;
  margin: 0;
  border-radius: 0;
  border: 2px inset #707e91;
}

/* blog */
.bloggy {
  width: calc(100% - 36px);
  height: calc(130px);
  display: block;
  border: 3px solid #6068a9;
  padding: 8px;
  border-radius: 8px;
  margin: 5px
}