body {
    background-color: rgb(111, 138, 151);
    color: rgb(230, 230, 230);
    font-family: monospace;
    font-size: 15px;
    /* overflow: hidden; */
}
/* todo, transition to on chordy link click: background-color: rgb(50, 66, 83); */

.body-text {
    color: rgb(230, 230, 230);
    font-family: monospace;
    font-size: 15px;
}

.latex {
  font-size: 20px;
}


.body-text a {
    color: rgb(158, 187, 224);
}

.content {
    width: 750px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;

    /* fadein due to js */
    display: none;
    /* overflow: hidden; */
}

@media only screen and (max-width: 750px) {
  .content {
    width: 100%;
  }
}

#head {
    font-family: monospace;
    color: #fff;
    margin: auto;
    padding: 25px;
    font-size: 42px;
    text-align: center;
}

#subhead, .subhead {
    font-family: monospace;
    color: #fff;
    margin: auto;
    font-size: 25px;
    text-align: center;
    /* position: relative;
    left: 10px; */
}

.subsubhead {
    font-family: monospace;
    color: #fff;
    margin: auto;
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
    /* position: relative;
    left: 10px; */
}

.details {
    font-family: monospace;
    color: #fff;
    margin: auto;
    font-size: 15px;
    text-align: left;
    /* position: relative;
    left: 10px; */
}

@keyframes bang {
  from {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

.project-button {
    overflow: hidden; /* for ribbon */
    position: relative;

    padding: 10px;
    display: inline-block;
    text-align: center;

    margin: 5px;
    margin-top: 10px;
    margin-bottom: 0;

    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    border-color: #fff;

    width: 250px;
    min-height: 80px;
}

.confetti {
  position: absolute;
  display: block;
  left: 50%;

  width: 5px;
  height: 5px;

  background: red;
  opacity: 0;
}

.project-button p {
    font-family: monospace;
    color: #fff;}

.project-button b {
    font-size: 16px;
}

.project-button:hover {
    border-color: rgb(83, 92, 99);
    cursor: pointer;
}

.project-button:hover p {
    color: #fff;
}

.project-button:hover b {
    color: #fff
}

#tech-button {
    border-width: 0;
    width: auto;
    min-height: 20px;
}

#tech-button p:hover {
    color: rgb(230, 230, 230);
    cursor: pointer;
}

.transition {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}



.ribbon {
  margin: 0;
  padding: 0;
  background: white;
  color:rgb(111, 138, 151);
  padding:1em 0;
  position: absolute;
  top: -1px;
  right:0;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;

  font-family: monospace;
  font-weight: bold;

  padding: 4px;
}
.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  top:0;
  margin: 0 -1px; /* tweak */
  width: 100%;
  height: 100%;
  background: white;
}
.ribbon:before {
  right:100%;
}

.ribbon:after {
  left:100%;
}