body {
  font-family: Arial
  background-color: black;
}

* {
  box-sizing: border-box;
}

/* The browser window */
.container {
  border: 3px solid #008ae6;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #80ccff;
}

/* Container for columns and the top "toolbar" */
.row {
  padding: 10px;
  background: #008ae6;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
}

.left {
  width: 15%;
}

.right {
  width: 85%;
}

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

/* Three dots */
.dot {
  margin-top: 4px;
  height: 12px;
  width: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

/* Three bars (hamburger menu) */
.bar {
  width: 17px;
  height: 3px;
  background-color: #aaa;
  margin: 3px 0;
  display: block;
}

/* Page content */
.content {
  padding: 10px;
  text-align: center;
}

.mySlides {
  display: none
  float: right;
}
.header{
  background: linear-gradient(rgba(0,0,0,0.8200000000000001),
  rgba(0,0,0,0.8200000000000001)),url(pictures/bloom.png) no-repeat center/cover;
  height: 500px;
  margin-top: 0px;
}
.logo{
  float: left;
  position: inline-block;
  heigt: 120px;
  width: 120px;
}

.card{
 border-radius: 5px;
 height: 100%;
 width: 100%;
 padding: 15px;
 margin: 20px;
 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
 border: 1px solid rgba(0, 0, 0, 0.2);
 text-align: center;
}
.link{
 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
 font-family: verdana, sans-serif;
 border: 1px solid rgba(0, 0, 0, 0.2);
 border-radius: 10px;
 text-align: center;
 width: 40%;
 padding: 8px;
 margin: 10px;
}
.flex-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  text-align: center;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
  padding: 15px;
  margin: 10px;
  color: #ffbf00;
}

.flex-item-left {
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
    height: 100%;
  }
}
#myBtn{
 display: none;
 position: fixed;
 bottom: 20px;
 right: 30px;
 z-index: 99;
 border: none;
 outline: none;
 background: rgba(000, 100, 050, 0.2);
 color: white;
 font-weight: bold;
 cursor: pointer;
 padding: 15px;
 border-radius: 10px;
 font-size: 18px;
}
#myBtn:hover{
 background: black;
}

.accordionBtn {
  background-color: rgba(0, 0, 0, 0.8);
  color: #f1f1f1;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.panel {
  padding: 0 18px;
  display: none;
  background-color: black;
  overflow: hidden;
  color: white;
}

.fa-telegram, .fa-brands fa-discord, .fa-twitter{
  background-color: transparent;
  margin: 20px;
  font-size: 80px;
  padding: 10px;
  width: 40px;
  height: 40px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

#social1, #social2, #social3{
  color: rgb(0, 180, 230);
}

#intro{
  text-align: center;
  line-spacing: 6px;
}

.button{
 display: block;
 padding: 15px 25px;
 font-size: 24px;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 outline: none;
 color: #fff;
 background-color: #4CAF50;
 border: none;
 border-radius: 15px;
 box-shadow: 0 9px #999;
 margin: auto;
}
.button:hover {background-color: #3e8e41}
.button:active {
 background-color: #3e8e41;
 box-shadow: 0 5px #666;
 transform: translateY(4px); 
}

#foot{
  margin-top:  40px;
  position: relative;
  text-align: center;
}
#disclaimer{
  width: 100%; 
  margin:auto;
  font-size: 0.8em;
}
a{
  text-decoration: none;
}

.copy-container {
  text-align: center;
}

#content-to-copy {
  padding: 10px;
  border: none;
  margin: 2px;
  font-size: 0.8em;
}

#copy-button {
  background-color: transparent;
  color: black;
  cursor: pointer;
  border: none;
}

#copy-button.copied {
  background-color: #28a745;
}