@font-face {
  font-family: "astloch-regular";
  src: url("fonts/astloch-regular-webfont.woff2") format("woff2"),
    url("fonts/astloch-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "Amadis";
  src: url("fonts/Amadis-Regular.woff2") format("woff2"),
    url("fonts/Amadis-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "szlichta07";
  src: url("fonts/szlichta07-Regular.woff2") format("woff2"),
    url("fonts/szlichta07-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FA_YOTDMOSGPP";
  src: url("fonts/FA_YOTDMOSGPP.woff2") format("woff2"),
    url("fonts/FA_YOTDMOSGPP.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Guida Pro Trial";
  src: url("fonts/GuidaPro-Light.woff2") format("woff2"),
    url("fonts/GuidaPro-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TC Jovial Pro";
  src: url("fonts/TCJovialPro-Regular.woff2") format("woff2"),
    url("fonts/TCJovialPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LS Mimesis Trial";
  src: url("fonts/LSMimesis-Regular.woff2") format("woff2"),
    url("fonts/LSMimesis-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  background-image: url(bg/rocket.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


:root {
  --black: #eec394;
}

#preloader {
  background: var(--black)
    url("https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg")
    no-repeat center;
  align-items: center;
  justify-content: center;
  width: 100%;
  display: flex;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 999;
}

h1 a{
    font-family: "astloch-regular";
    text-decoration:none;
    color:black;
    font-size:40px;
}

h3{
  font-size:12px;
  font-weight:normal;
    font-family: "szlichta07";
  }
  
h4{
  display:none;
}

p{
  font-family:helvetica;
  }
  
  p:hover{
    color:#A198BE;
    }


.words {
  text-align: center;
    font-family:helvetica;
}

#message {
  display: flex;
  margin: 10px;
}

.container {
 display:flex;
   justify-content: center;
  margin: 40px;
    padding-bottom: 50px;
}

.gates{
 color:black;
 margin-top:100px;
 margin:5px;
 display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 100px;
}

#text{
  grid-area:1/1/1/1;
  background-color: #d7f29b42;
    padding: 10px;
      border-block-style: inset;
        border-block-color: #e4b585;
        color:white;
          width: 400px;
  }
  
.chat {
  grid-area: 1/2/1/2;
      text-align: center;
}
  
  .allMessages{
  background: rgba(255, 239, 214, 0.3);
}

:where(#top_banner) {
    width: calc(100% - 15px);
    height: 25px;
    display: flex
    align-items: center;
    justify-content: flex-start;
    padding-left: 15px;
    font-size: 12pt;
    /* color: #FFF; */
    font-family: helvetica;
    background: var(--main-gradient);
}

:root {
  --body-color: #FFF;
  --textarea-color: #FFF;
   --dashboard-viewport-width: 300px;
  --dark-main-color: #d5a6a5;
  --main-color: #947142;
  --main-gradient: linear-gradient(5deg, var(--main-color), var(--dark-main-color));
  --secondary-color: #FFF;
}

.radio{
   grid-area: 1/1/1/1; 
   text-align: left;
  margin-left: 30px;
  position:relative;
}
  
  
  .stuff{
  display:flex;
  margin:10px;
    justify-content: center;
      margin-top: 100px;
  }
  
.hidden {
  display: none;
}


button {
  margin: 10px;
     background-color: #fcebd1;
   font-family: "LS Mimesis Trial";

}


.buttons {
  padding: 10px;
  justify-content: right;
  display: inline-block;
}

li {
  list-style: none;
}


@media only screen and (max-width: 1080px) {

  .container{
display:flex;
  }
  
  .radio {
    display: none;
  }
  
  
h4{
  display:block;
  font-family:helvetica;
}
  
}