.collapsible {
  padding: 18px;
  width: 300px;
  height: 61px;
  text-align: left;
  outline: none;
  border:none;
  border-width: 1px;
  font-size: 15px;
}

.contentpadding {
    padding: 0px;
}

.namefont {
    font-family: "Lucida Console", "Courier New", monospace;
    font-weight: bold;
    font-size: 20px;
}

.smallfont {
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 12px;
    padding: 1px;
}

.imagealign {
    float: right;
    width: 50%;
    height: 50%;
    position: relative;
}

.titlesize {
    font-family: "Lucida Console", "Courier New", monospace;
    font-weight: bold;
    font-size: 12px;
}

@keyframes slideInLeft {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }
      body {
        animation-duration: .5s;
        animation-timing-function: ease-in-out;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-name: slideInLeft;
        background: #666;
        padding: 40px;

        margin: 0;
      }
      
      body {
  height: 100%;
  background-position: center;
   background-repeat: repeat;
  background-size: 30%;
}


 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 



/* ------------------- BOX STYLES ------------------------ */




.centerpage{
  margin: auto;
  width: 100%;
  padding: 10px;
  height: 100%;
}

.float-container {
    padding: 15px 0px;
    width: auto;
    height: auto;
  border-radius: 20px;
   background-repeat: repeat;
   background-position: bottom;
   
}

.float-child {
  display:inline-block;
    width: auto;
    max-width: 600px;
    overflow-y: auto;
    float: left;
    padding: 20px;
    padding-top: 10px;
    height: 300px;
  border-radius: 20px;
}  

.float-child-extra{
 display:inline-block;
    width: auto;
    max-width: 160px;
    overflow-y: auto;
    float: left;
    padding: 20px;
    padding-top: 10px;
    height: 300px;
  border-radius: 20px;
}

.float-child-small {
    width: auto;
    max-width: 900px;
    float: left;
    padding: 20px;
    padding-top: 10px;
    height: 100px;
    overflow-y: auto;
  border-radius: 20px;
}  

.buttonstyle {
  border-radius: 20px;
 cursor: pointer;
 height: 50px;
 width: 100px;
}

.thoughtsbox {
    
    height: 50px;
  border-radius: 20px;
  text-align: center;
}


.titlebox {
  display:inline-block;
    width: auto;
    float: left;
    padding: 20px;
    height: auto;
    border: 2px solid #a35c00;
    background-color: #fff8d6;
  border-radius: 20px;
  position: fixed;
  left: 50%;
  top: 30%;

}

.titlebox-mobile {
  display:inline-block;
    width: auto;
    float: left;
    padding: 20px;
    height: auto;
    border: 2px solid #a35c00;
    background-color: #fff8d6;
  border-radius: 20px;
}