body{
background:#fcf1f6;
color:#be778d;
font-family: 'basiic';
margin: 0%;
background: url("imgs/saya-bg.jpg") no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}

@font-face{
 font-family: 'basiic';
src: url(https://cinni.net/fonts/basiic.ttf);
}
::selection {
background:pink;
color:#e000c3;
}

a{
color:#57979c;
font-weight: 600;
letter-spacing:1px;
}
a:hover{
color:#224f55;
}

hr{
color:#be778d;
border-top:1px solid #be778d;
border-left:none;
border-right:none;
border-bottom:none;
width:90%;
}

h1{
text-transform:uppercase;
background: linear-gradient(0deg, rgba(190,119,141,1) 0%, 
rgba(190,119,141,1) 5%, rgba(235,183,194,0) 5%, rgba(249,162,243,0) 100%);
font-size:1.2em;
padding:1px;
padding-left:12px;
font-weight: bold;
letter-spacing:2px;
text-align:center;
}

h2{
text-transform:uppercase;
background: linear-gradient(90deg, rgba(249,162,243,0) 0%, rgba(235,183,194,1) 25%, rgba(235,183,194,1) 75%, rgba(249,162,243,0) 100%);
font-size:1em;
padding:1px;
color:white;
letter-spacing:2px;
}

span{
font-weight:bold;
}

p{
text-align:center;
margin:15px;
font-size: 1.3em;
}

footer{
  display: flex;
  justify-content: space-between;
  font-size:0.9em;
  font-weight: 500;
  padding:10px;
  padding-top: 0px;
  margin:2px;
  margin-bottom: 20px;
  color:#6e007c;
  text-shadow: 1px 1px 2px #00b2c2;;
  }

li{
  text-align: left;
  list-style-position: inside
}

.title-link {
  text-decoration: none;
  color:#7f025e;
}

.body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  }

.layoutimg{
margin:0 auto;
width:100%;
height:auto;
position:relative;
z-index:0;
}

.content{
z-index:1;
position:relative;
float:right;
width:50%;
vertical-align:top;
padding: 10px;
/* testing purposes - switching text colour */
/* color: #00e0c6; */
/* below height value needs to change as is hacky */
height: 100vh;
box-sizing: border-box;
margin-top:30px;
display: flex;
flex-direction: column;
overflow: hidden;
/*background:rgba(204,129,247,0.5);*/
}

.header{
padding:5px;
margin:5px;
font-size:1em;
color:#8e00e0;
font-weight:Bold;
text-shadow: 0 0 5px white;
text-align:right;
}

.nav{
padding:5px;
background: #7c4441;
border:1px solid #be778d;
border-radius:2px;
margin:5px;
font-size:.9em;
}
.nav a{
margin:1px;
padding:1px;
color: #6cc2c9;
}
.nav a:hover{
  color: #132e2f;
}

.blog{
padding:2%;
background: #fcf1f6;
border:1px solid #be778d;
border-radius:2px;
Margin:5px;
font-size:.9em;
height:80%;
overflow: auto;
}

.blog img{
width:auto;
max-width:90%;
height:auto;
margin:3px;

}

.icon{
width:100px;
height:100px;
border:1px solid #be778d;
padding:1px;
margin:5px;
}


.glow-text {
  font-size: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

/* Glow and pulsate effect on hover */
.glow-text:hover {
  animation: glowPulse 2s infinite alternate;
}

.glow-text:active {
  animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(212, 0, 255, 0.6), 0 0 20px rgba(0, 221, 129, 0.945);
    transform: scale(1);
  }
  100% {
    text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.6);
    transform: scale(1.05);
  }
}


/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
background: #fcf1f6;
}
::-webkit-scrollbar-track {
background: #fcf1f6;
border-radius: 0px;
width: 0px;
border: 1px dotted #be778d;
}
::-webkit-scrollbar-thumb {
background: #f0d0df;
border: 1px dotted #be778d;
border-radius: 0px;
}

@media screen and (max-aspect-ratio:16/9) {

  .content{
    z-index:1;
    position:relative;
    float:right;
    width:90%;
    vertical-align:top;
    padding:10px;
    /* testing purposes - switching text colour */
    /* color: #e000c3; */
    /* below height value needs to change as is hacky */
    height:100vh;
    margin-top:30px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    overflow: hidden;
    }
 
  }