/* style sheet */
html {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path fill="%23FEF5FF" d="M22 11c-4.96 0-9-4.04-9-9 0-1.32-2-1.32-2 0 0 4.96-4.04 9-9 9-1.32 0-1.32 2 0 2 4.96 0 9 4.04 9 9 0 1.32 2 1.32 2 0 0-4.96 4.04-9 9-9 1.32 0 1.32-2 0-2Z"></path></svg>'), default;
    font-family: SimSun;
    background-color: black;
    color: #EAEAEA
}
body {
    margin: 100px;
}
.flex-container {
    display: flex;
}
/* header and nav bar */
header {
    background-color: #2E1C2B;
    min-height: 100px;
    border: 2px solid #EAEAEA;
    color:#EAEAEA
}
footer {
    min-height: 25px;
    text-align: center;
  }
#nav ul {
    background-color:#4A1942;
    margin: 0;
    padding:0;
    overflow: hidden;
    list-style-type: none;
}
#nav ul li {
    float:left;
}
#nav ul li a {
display: block;
color: white;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top:20px;
padding-bottom: 10px;
text-decoration: none;
}

#nav ul li a:hover {
background-color: #111111;
}
/* main content for the website */

.sidebar1 {
    border: 2px solid #EAEAEA;
    background-color: #2E1C2B;
    flex: 1 1 15%;
    min-width: 150px;
    padding: 5px;
    margin:5px;
}
.maincontent {
    border: 2px solid #EAEAEA;
    min-height: 800px;
    background-color: #4A1942;
    flex:2 1 70%;
    margin:5px;
    padding: 3px;
}
.sidebar2 {
    border: 2px solid #EAEAEA;
    background-color: #2E1C2B;
    flex: 1 1 15%;
    min-width: 150px;
    padding: 5px;
    margin:5px;
}


/* other stuff and things */
img {
width:100%
}
.blinkies {
width:40%;
height: auto;
}
a:link {
color: #e7aeea;
text-decoration: none;
}

a:visited {
color: #e954b0;
text-decoration: none;
}

a:hover {
color: #FF0000;
text-decoration: underline;
}

a:active {
color: #FF0000;
text-decoration: underline;
}
iframe {
height: 157.5px;
width: 260px;
align-self: center;
}
.guestbook {
    height: 10%;
    width: auto;
}
header h1 {font-family: SimSun;margin: 0;padding: 10px;font-size: 1.75rem;

}

section {margin: 0;padding: 10px;border: 2px solid #EAEAEA;border-radius: 5px;background-color: #2E1C2B;
}

article {margin: 0;padding: 10px;border: 2px solid #EAEAEA;border-radius: 5px;background-color: #2E1C2B;

}

table {font-family: SimSun, sans-serif;color:#EAEAEA;border-collapse: collapse;width: 100%;

}

td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;

}

  

tr:nth-child(even) {background-color: #4A1942;}

#socials-list li {list-style-type: none;padding: 0; /* Remove padding */margin: 0; /* Remove margins */

  

}
#blogpost h2 {
  font-size: 30px;
margin:10px;}

#blogpost p {font-size: 15px; margin-left: 10px;}
.word {margin: auto;color: #EAEAEA;font: 700 normal 50px 'SimSun';text-shadow: 3px 3px 0px rgba(63,107,169, 0.4);font-size: 2rem;}



  
  

.art-main p {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;
}

  

.row:after {content: "";display: table;clear: both;}

  

.content {background-color: #893168;
  padding: 10px;
  border: 1px solid #EAEAEA;
width: 30%}

  

.show {display: block;}

  

/* Style the filter buttons */

.bttn {
border: none;
padding: 8px 14px;
background-color: #EAEAEA;}
.bttn:hover {
background-color: #551A8B; opacity: 0.8;}
.bttn.active {
background-color: #893168;
color: white;
}


.typewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid #dd53a8; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
/* margin: 0 auto; Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:typing 3.5s steps(30, end),
blink-caret 0.5s step-end infinite;

}
  

/* The typing effect */

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

  

/* The typewriter cursor effect */

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #893168};

}

  
  
  

img:hover {
transform:scale(2);
}

@media all and (max-width: 640px) {
  .flex-container {
    /* Shorthand property specifying flex-direction and flex-wrap */
    flex-flow: column wrap;
  }
  header {
    min-height: 75px;
  }
  .sidebar2 {
    min-height: 50px;
    /* Specifying the order so the nav appears as the first item in the flex container */
    order: 2;
  }
  .sidebar1 {
    min-height: 50px;
    /* Specifying the order so the nav appears as the second item in the flex container */
    order: 1;
  }
  .maincontent {
    /* Specifying the order so the nav appears as the third item in the flex container */
    min-height: 725px;
    order: 2;
  }
  footer {
    min-height: 25px;
    text-align: center;
  }
}