html, body {
    background-image: url("./img/bgtile.png"); 
    background-size: 250px;
    background-repeat:repeat;
    
    
    font-family: "pixeloperator";
    
  
    }

    @font-face {
        font-family: "pixeloperator";
        src: url('./fonts/PixelOperator.ttf');
    }


    a {
      color:#c9507a
    }

    h3, h2, h4, h5,h1 {
      color:#c9507a
    }
button {

    background-color: transparent;
    border: none;
    font-size: 1.05em;
    padding: 5px;
    margin: 3px;
    
    text-align: left;
    color:#c9507a;
    line-height: 1.5em; 
    font-family: "pixeloperator";

    }

    .specialbutton {

      background-color:white;
      border: 1px solid #c9507a;
      border-radius: 10px;
      font-size: 1.05em;
      padding: 10px;
      margin: 3px;
      
      text-align: center;
      color:#c9507a;
      line-height: 1.5em; 
      font-family: "pixeloperator";
  
      }

      .specialbutton a {
        text-decoration: none;
      }

p {
    font-size: 1.2em;
}

jukebox {
    position: relative;
    background: transparent;
    width:100px;}
    
  .jukebox ul {
    display: none;
    width:200%;
    position: absolute;
    top: 45%;
    right: 0px;
    background: #fdf6f9;
    padding:10px;
    border: 1px solid #c9507a;
    list-style-type: none;
    border-radius: 10px;
  }

  .jukebox:hover ul, .activate:focus + ul, .jukebox:focus-within > ul {
    display: inline-block;}


 
  .wrapper {
    
    padding: 20px;
    border: 1px solid #3e2d59;
    background-color:#ffe6f2;
    
  }

  .footer {
    padding: 20px;
    border: 1px solid #3e2d59;
    border-top:none;
    background-color:#ba91b1;
    text-align:center;
  }

  .graphichoard {
    text-align:center;
    border-top: 1px solid #3e2d59;
    height:300px;
    overflow:auto;
    border-bottom:1px solid #3e2d59;
    padding-top:20px;
    padding-bottom:20px;
  }

  ::-webkit-scrollbar {
     
    width: 10px;
    background-color: transparent;
 }

 ::-webkit-scrollbar-thumb {
     
    background-color: transparent;
    border-radius: 30px 30px 30px 30px;

 }

 
 #statuscafe {
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    background-color: #fff ;
    border: 1px solid #c9507a;
    }
    #statuscafe-username {
        margin-bottom: .5em;
    }
    #statuscafe-content {
        margin: 0 1em 0.5em 1em;
    }
  

  #homecontent {
  
    text-align:center;
    padding: 20px;
    border-top:1px dashed #6c5592; 
    
  }

  #outlinedcontainer {
  
    padding: 20px;
    border-top:1px dashed #6c5592; 
    
  }
  .updatebox {
    color: #fff;;
    background-image: url(img/updatebg.jpg);
    background-size: cover;
    background-attachment: scroll;
    opacity: 0.9;
    border: 2px dashed #1d8f88 ;
   border-radius: 5px;
    height:300px;
    overflow-y:scroll;
    padding: 20px;
    margin: 0px;
    
  
  }

  .todobox {
    color: #fff;;
    background-image: url(img/ebplain.png);

    background-attachment: scroll;
    opacity: 0.9;
    border: 2px dashed #491d8f ;
   border-radius: 5px;
    height:250px;
    overflow-y:scroll;
    padding: 20px;
    margin: 0px;
    
  
  }

  .updatebox::-webkit-scrollbar-track {

    background: transparent; /* color of the tracking area */
  }
  
  .updatebox::-webkit-scrollbar-thumb {
    background-color: #1d8f88 /* color of the scroll thumb */
  }

  .mobilewarning{
    top:0px;
    height: 500%;
    width: 150%;
    position:absolute;
    background-color: #fff;
    z-index:100;
    position:fixed;
    margin-top:-20px;
    display:none;
  }
  
  .card {
    background-color: #f2d4e4;
  }

    .warningtext {
      width:50%;
      margin:50px;
      text-align:center;
    }
  
  @media only screen and (max-width: 1000px) {
    body {
      background-color: lightblue;
  
    }
    .mobilewarning {
        display:block;
    }
  }

  
  .box {
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #c9507a;
    padding: 15px;
    margin: 10px;
  }

  .page-title {
  
    font-size: 25px;
    padding-bottom: 4px;
    line-height: 1.2;
    
    font-weight: bold;
  }
  .disc {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
   position: absolute;
   right:32%;
    cursor: grab;
  }

  .opticaldrive{
    width: 250px;
    height: 250px;
   
    transform: translate(-10%, -10%);
  }

  .opticaldrive img {
    width: 100%;
    height: auto;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
 
    -webkit-touch-callout: none;
   
   
  }

  .flip-card {
    margin-top:20px;
    background-color: transparent;
    width:100%;
    height:200px;
    perspective: 1000px;
  }
  .flip-card img {
    
   width: 100%;
 
    
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    
    color: black;
  }
  
  .flip-card-back {
  
    transform: rotateY(180deg);
  }

  .unique-tooltip {
    
    position: relative;
    display: inline-block;
    transition: transform 250ms ease-in-out, filter 1000ms ease-in;
    line-height:0.9em;
    
   
  }

  .unique-tooltip img {
    all: unset;
       
    height: 150px;
    margin: 0 auto;
   
  }

  .unique-tooltip:hover {
   transform: translateY(-10px);
  
  }

  /*tooltip text */
  .unique-tooltip .tooltiptext {
    z-index: 9999; 
    opacity: 0;
    transition: opacity 250ms ease-in-out, filter 1000ms ease-in;
    visibility: hidden;
    width: 120px;
    background-color: #3e2d59;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; 
    margin-bottom:10px;
  
    /* positioning tooltip */
    position: absolute;
    z-index: 1;
  }

  /* show the tooltip text when you mouse over the tooltip container */
  .unique-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
  .unique-tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 30px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #f1f1f1;
}

* {
  box-sizing: border-box;
}

html {
	height: 100%;

}



span {
	padding-right: 15px;
	padding-left: 15px;
}


.chat {
	height: 400px;
	width: 60%;
	display: flex;
	flex-direction: column;
  justify-content: center;
	align-items: center;
} 

::-webkit-input-placeholder { 
	color: .711 
}
 
input { 
	border: 1px solid rgb(185, 185, 185); 
	padding: 15px; 
	margin-right: auto;
	border-radius: 10px; 
	width:100%;
	-webkit-transition: 0.2s;
	transition: 0.1s;
	outline: none;
}

input:focus { 
	border: 1px solid #521270; }

.messages {
	display: flex;
	flex-direction: column;
	overflow: scroll;
	height: 90%;
	width: 100%;
	background-color: white;
	padding: 15px;
	margin: 15px;
	border-radius: 10px;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	border: 1px solid rgb(185, 185, 185); 

}

.messages::-webkit-scrollbar {
	display: none;
  }
  
  

#bot {
	margin-left: auto;
  
}

.bot {
	
    font-family: "pixeloperator";
}

.avatar {
	height: 25px;
}

.response {
	display: flex;
	align-items: center;
	margin: 10px;
}

#centered {
  text-align:center;
}

#linkicons{
 font-size:3em;
 margin:5px;

}

.collapsible {
  background-color: #f2d4e4;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}