@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

@font-face{
  font-family:hug-me-tight;
  src:url(https://dl.dropbox.com/s/lkx18y1mqiuxt63/Hug%20Me%20Tight%20-%20TTF.ttf);
}
html, body, iframe{
 cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur881.cur), auto !important;
}
a{
    color:#383534; 
  text-decoration-style:dotted;
}

a:hover{
cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur870.cur), auto !important;
  text-decoration:none;
 color: #fff;
  text-shadow: 1px 0px #000, -1px 0px #000, 0px 1px #000, 0px -1px #000, 0 0;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

@font-face {
font-family: Deutschlands;
src: url(https://dl.dropbox.com/scl/fi/4t5tz7l0eibuyn7bbklt7/Deutschlands.ttf?rlkey=heb4udipbfupb2gws51wbu1qz&st=poyu207i);
}


.scripted{
      filter:drop-shadow(1px 1px 0 rgba(172, 172, 172, 0.6))
drop-shadow(1px 1px 0 rgba(172, 172, 172, 0.6))
drop-shadow(0 0 2px #bfc5c2);
  font-family: Deutschlands;
  font-size:3em;
  color:#383534; 
    white-space:nowrap;   display: block;
}

.iframe-cont iframe{
background: rgba(239, 233, 233, 0.03);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.9px);
-webkit-backdrop-filter: blur(5.9px);
border: 1px solid rgba(239, 233, 233, 0.08);  
width:100%;
height:100%;
border:none;
}

.container {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}

.container.show {
display: block;
opacity: 1;
}

#homecontent {
/* From https://css.glass */
background: rgba(239, 233, 233, 0.03);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.9px);
-webkit-backdrop-filter: blur(5.9px);
border: 1px solid rgba(239, 233, 233, 0.08);  
transition: opacity 0.5s ease;
}

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

#navigation {
font-family: "Lora", serif;
  font-weight: 400;
font-size: 15px;
font-weight: 600;
color: #383534;
}

#navigation a {
text-decoration-style:dotted;
  color:#383534;
display: inline-block;
margin-bottom: 10px;
}

#navigation a:hover {
  text-decoration:none;
  font-weight:bold;
 color: #fff;
  text-shadow: 1px 0px #000, -1px 0px #000, 0px 1px #000, 0px -1px #000, 0 0;
font-size: 14px;
transform: translateY(6%);
}

p{
  line-height:25px;
font-size:13px;
  font-style:italic;
}

html, p{
font-family: "Lora", serif;  
font-style:italic;
}


#header{
font-family: Deutschlands;
  word-break: break-word;
font-size:2em;
line-height:3px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Adjust the shadow as needed */
text-align: center; margin: 20px 0;
}

#header:hover{
text-decoration:underline;
}

hr{
border-top: solid 4px #8D8D8D;
}

.copyable:hover{
cursor:help;
}

::-moz-selection {
color: #74322e; 
} 
::selection { background: none; color:#74322e;
}

/*FOR-IMAGES*/
summary {
font-weight: bold;
cursor: pointer;
list-style: none;
}

summary::before {
content: "▼";
display: inline-block;
margin-right: 10px;
}

details[open] summary::before {
content: "↻";
transform: rotate(350deg);
}

.iframe-padding-container{
padding:15px;
}

body, html {
margin: 0;
height: 100%;
overflow-y: auto;
}

.resizable-textarea { cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur872.cur), auto !important;
color: grey;
width: 100%;
height: 15em;
margin-top:10px; 
resize:none; 
background-color: #f4f4f4;
border: 1px dashed #9a6fb0;
padding: 0.3em;
}
.containerdivider {
display: grid;
grid-template-columns: repeat(3,1fr); /* Two equal columns */
gap: 20px;
flex-wrap:wrap;
width: 100%; max-width: 1200px; /* Set a maximum width for the grid */ margin: 0 auto;
}

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

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

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

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

/* Media queries for different screen widths */ @media (max-width: 1920px) {} @media (max-width: 1680px) { html { font-size: 11pt; } } @media (max-width: 1280px) { html { font-size: 11pt; } } @media (max-width: 1024px) {} @media (max-width: 980px) { html { font-size: 10pt; } } @media (max-width: 736px) { html { font-size: 10pt; } } @media (max-width: 480px) { #main > .inner { --spacing: 0rem; } #containerdivider { grid-template-columns: 1fr; /* Single column */ } } @media (max-width: 360px) { #main > .inner { --padding-horizontal: 1.5rem; --padding-vertical: 2.25rem; --spacing: 0rem; } }


/* FOR-MUSIC PLAYER*/
.containerdivider-for2 {
   display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
            gap: 20px; /* Space between columns */
            padding: 20px;
            width: 100%;
            max-width: 100%;

    }

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

    .music-player-iframe {
      align-items:center;
      width:100%;
      border: none;
    }
    
@media (max-width: 600px) {
  .containerdivider-for2 {
    grid-template-columns: 1fr; /* Single column layout for small screens */
  }
}

      
      /*FOR CURSOR-AND-BG*/
      .item iframe {
      width: 100%;
      height:340px;
      border: none;
    }