body{
    background-image: url("bgs/blue_018.gif");
    background-attachment: fixed;
    image-rendering: crisp-edges;
}

.enter{
    display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
    flex-direction: column;

}

@font-face{
    font-family: "Galindo";
  src: url("fonts/Galindo-Regular.ttf");

}

@font-face{
    font-family: "Michroma";
  src: url("fonts/Michroma-Regular.ttf");

}

@font-face{
    font-family: "BitcountInk";
    src: url("fonts/Bitcount-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf");

}

.title{
    display: flex;
    width: 100%;
    background-image: url("bgs/bluebg2.png");
    border-style: ridge;
    border-color: white;
    border-radius: 25px;
    flex-direction: column;

}

.blinkititle{
    width: 30%;
    background-image: url("bgs/fadedbg.png");
    background-size: 50%;
    border-style: ridge;
    border-color: #ff009d;

}

.left{
    display: flex;
    padding-top: 15%;
    padding-bottom: 15%;
    display: flex;
    justify-content: center;
    width: 50%;
    height: 100%;
    flex-direction: column;
    padding-right: 1%;
    font-family: "BitcountInk";
    align-items: center;

}

.blinkileft{
    display: flex;
    display: flex;
    justify-content: center;
    width: 30%;
    flex-direction: column;
    padding-right: 1%;
    font-family: "Michroma";
    align-items: center;

}


.iconleft{
    width: 100%;
    display: inline-grid;
    font-family: "Michroma";
    grid: 20% 20% 20% 20% 20% / 20% 20% 20% 20% 20%;
    justify-content: center;
    align-items: center;

}

.icon img {
    width: 100%;

}

.icon{
    width: 100%;
}

.right{
    display: flex;
    justify-content: center;
    width: 50%;
    height: 100%;
    flex-direction: column;
    padding-left: 0.5%;
    font-family: "BitcountInk";
    align-items: center;
}

.blinkiright{
    display: flex;
    justify-content: center;
    width: 30%;
    height: 100%;
    flex-direction: column;
    padding-left: 0.5%;
    font-family: "Michroma";
    align-items: center;
}

.rightside{
    width: 100%;
    height: 100%;
    background-image: url("bgs/bluebg.png");
    background-size: 50%;
    border-style: ridge;
    border-color: rgba(255, 157, 215, 1);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.leftside{
    width: 100%;
    height: 100%;
    background-image: url("bgs/bluebg.png");
    background-size: 50%;
    border-style: ridge;
    border-color: rgba(255, 157, 215, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50px;

}

.leftme{
    display: flex;
    justify-content: center;
    padding-bottom: 1%;

}

.rightme{
    display: flex;
    justify-content: center;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}

.welcome{

    display: flex;
    justify-content: center;
    font-family: "BitcountInk";
    font-size: 50px;
    color: White;
    text-shadow: 2px 2px rgba(18, 168, 170, 1);

}

.button a{
    display: flex;
    padding-left: 50%;
    padding-right: 50%;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 1px 1px #ff009d;
    text-decoration: none;
}

.button a:hover{
    font-weight: bold;
    color: #ff009d;
    text-shadow: 1px 1px white;
}

.button a:hover::before, .button a:hover::after{
    font-weight: bold;
    color: #ff009d;
    text-shadow: 1px 1px white;
    content: url(img/53.gif);
    visibility: visible;
}

.button a::before, .button a::after{
    margin-right: 2.5%;
    content: url(img/53.gif);
    visibility: hidden;
}


.icon{
}

.rows{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.enter{
    display: flex;
    flex-direction: row;
}

.textbox{
    display: flex;
   Width: 90%;
   margin: 0 5% 0 5%;
   justify-content: center;
   flex-direction: column;

}

.textbox p{
    display: block;
   Width: 90%;
   margin: 5% 5% 0 5%;
   justify-content: center;
   overflow-wrap: break-word;
   color: white;
   font-family: "Michroma";
   text-shadow: 2px 2px rgba(61, 117, 117, 1);

}

.header{
    display: flex;
   align-items: center;


}

.header p{
    display: flex;
   Width: 100%;
   color: white;
   font-family: "BitcountInk";
   text-shadow: 2px 2px rgba(61, 117, 117, 1);
   scale: 2;
   margin-left: 100%;
   margin-top: 50%;

}

.sweetheart{
    display: flex;
    justify-content: center;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    width: 100%;
}

.sweetheart img{
    width: 30%;
}

.about::before{
    content: url(img/heartswirl.gif);
    padding-right: 2.5%;
}

.twopart{
    flex-direction: row;
    display: flex;
}

.abouttext{
    display: flex;
   Width: 50%;
   margin: 0 5% 0 5%;
   justify-content: center;
   flex-direction: column;
   color: white;
   font-family: "Michroma";
   text-shadow: 2px 2px rgba(61, 117, 117, 1);

}

.aboutpic{
    display: flex;
    height: 100%;
    justify-content: center;
    margin-top: 5%;
}

.aboutpic2{
    display: flex;
    height: 100%;
    rotate: 0 1 0 180deg;
    margin-top: 5%;
}

.about{
    padding-top: 1%;
}

#inverse{
    rotate: 0 1 0 180deg;
}

#sideabout{
    height: auto;
    width: 50%;
}

#toocute{
    width: 100%;
    height:100%;
    scale: 1.5;
}

#pcaddict{
    width: 100%;
    height:100%;
    scale: 1.5;
    margin-top: 5%;
}

#topone{
    margin-bottom: 5%;
}

#linuxuser::after{
  content:url(img/tux_avatar_for_horgrathi_by_jsepia.gif);
  scale: 0.5;

  
  }
  
#pinoy::after {
  content:url(img/puff120.gif);
  }
  
#prnoun::after{
  content:url(img/smallflyingpig.gif);
  }
  
#age::after{
  content:url(img/usagi.gif);
  }
  
#audhd::after{
  content:url(img/blobquestion.gif);
  }
  
#artist::after{
  content:url(img/blobpaint.gif);
  }
  
#introvert::after{
  content:url(img/nerd.gif);
  }
  
#poly::after{
  content:url(img/puff3.gif);
  }