@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap');


body,
html,
a,
p {
  font-size: 15px;
}

body {
  width: 100%;
  font-family: "Chivo Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-wrap: break-word;
  text-align: justify;
}

.iframe-container {
  width: 100%;
}

.h1 {
  font-size: 1em;
  line-height: 1px;
}

iframe {
  border: none;
}

.content-container {
  display: none;
  width: 100%;
}

.content-container iframe {
  width: 100%;
  border: none;
}

.content-container.show {
  display: block;
}

@font-face {
  font-family: jogan;
  src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf);
}

@font-face {
  font-family: willow;
  src: url(https://dl.dropbox.com/scl/fi/7hatje5e4ek9y4dcweto0/RomanceA.ttf?rlkey=7ud0hwtmtl41jiy6bg7ygx8t4&st=3jyv0pic);
}

a {
  text-decoration-style: dotted;
  color: #723F78;
}

#navigation a{
  color:#000;
  }
  
a:hover {
cursor: alias;
  font-weight: 900;
}

#navigation a:active {
cursor: alias;
  color: #000;
  font-weight: 900;
}

.title2 {
  filter: drop-shadow(0px 0px 1px #3b373b83) drop-shadow(0px 0px 1px #eaebf3)
    drop-shadow(0px 0px 1px #eaebf3) drop-shadow(0px 0px 1px #eaebf3)
    drop-shadow(0px 0px 1px #eaebf3) drop-shadow(0px 0px 1px #eaebf3)
    drop-shadow(0px 0px 1px #eaebf3) drop-shadow(0px 1px 0.1px black);
  line-height: 0;
  font-size: 36px;
  color: #00000090;
  display: inline;
  letter-spacing: 2.3px;
}

.layout {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr, 2fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.main {
  border: 3px solid black;
  padding: 0.3em;
  box-shadow: 1px -3px 10px 5px rgba(72, 72, 72, 0.75);
  -webkit-box-shadow: 1px -3px 10px 5px rgba(72, 72, 72, 0.75);
  -moz-box-shadow: 1px -3px 10px 5px rgba(72, 72, 72, 0.75);
  background-image: url("https://i.imgur.com/8DiuRV6.gif");
  background-repeat: repeat;
}

.inner-main {
  padding: 0.8em;
  background-color: #CAC9D3;
  border: 1px solid black;
}

.inner-main-header {
  background: linear-gradient(
    280deg,
    rgba(0, 0, 0, 0) 0%,
    #636163 70%
  );
  height: 2.5em;
}

.show {
  display: block;
}

#homecontent.hide {
  opacity: 0;
  display: none;
}

hr {
  border: 1px black dashed;
}

button {
  width: auto;
}

.containerdivider-for2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.music-player-iframe {
  display: block;
  border: none;
}

.two-col .music-player-iframe {
  height: 25em;
  width: 100%;
}

@media (max-width: 600px) {
  .containerdivider-for2 {
    grid-template-columns: 1fr;
  }
}

.item iframe {
  width: 100%;
  height: 340px;
  border: none;
}

.resizable-textarea {
  font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  cursor: help;
  color: grey;
  width: 100%;
  height: 15em;
  font-size: 13px;
  margin-top: 10px;
  resize: none;
  background-color: #f4f4f4;
  border: 1px dashed #9a6fb0;
  padding: 0.3em;
}

.containerdivider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.containerdivider img {
  max-width: 100%;
  height: auto;
}

.details {
  text-align: center;
  margin-top: 10px;
}

.details summary {
  margin-top: 10px;
}