/* CURSOR */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/flower-58-fb7de198-32.webp') 32 32, auto !important;
}

body{
background-image: url("/images/bg-images/about-bg.jpg"); background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
/* FONT */
p, li{
  font-family: 'Nunito';
  font-weight: 500;
  font-size: large;
  font-style: normal;
}
h1,h2,h3{
    font-family: "Coiny", system-ui;
    font-weight: 400;
    font-size:x-large;
    font-style: normal;
}
h4{
    font-family: "Coiny", system-ui;
    font-weight: 400;
    font-size:large;
    font-style: normal;
}
a{
    font-family: "Coiny", system-ui;
    font-weight: 100;
    font-size:medium;
    font-style: normal;
}



h1{
    text-align: center;
    color: white;
    font-size: 50px;
}

/*HOME LINK*/
.home-link p{
 text-align: center;
 margin-top: -30px;
 font-size: 30px; 
 color: white;
}



/*ABOUT CONTENT BOX*/
.about-content{
    background-color: rgba(255, 255, 255, 0.66);
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    left: 950px;
    bottom: 350px;
    height: 300px;
    width: 670px;
    padding: 10px;
}

.windows-frame-1{
    position: absolute;
    z-index: -1;
    left: 820px;
    bottom: 200px;
     height: 600px;
    
}

/*QUIZ BOX*/
.quiz-box{
    background-color: rgba(255, 255, 255, 0.66);
    overflow-y: auto;
    position: absolute;
    left: 1390px;
    bottom: -150px;
    height: 310px;
    width: 400px;
    padding: 10px;
}
.windows-frame-3{
    position: absolute;
    z-index: -2;
     width: 600px;
    height: 600px;
    left: 1300px;
    bottom:-300px;
}

.quiz-title{
    text-align: center;
    text-decoration: underline;
}

/*BIO BOX*/
.about-content .bio-box{
 text-align: center;
}


/*FUN FACTS BOX*/
.facts-box{
    background-color: rgba(255, 255, 255, 0.66);
    position: absolute;
    width: 300px;
    height: 350px;
    left: 940px;
    bottom:-185px;
    padding: 10px;
}
.windows-frame-2{
    position: absolute;
    z-index: -2;
     width: 500px;
    height: 600px;
    left: 860px;
    bottom:-300px;
}

/* ABOUT ME ART */
.about-me-art{
    position: absolute;
    height: 950px;
}
/* FOOTER */
footer {
  position: absolute;
  border: 9px solid #255227;
  border-radius: 40px;
  left: 600px;
  bottom: -300px;
  width: 700px;
  padding: 15px;
  background-color: white;
  display: flex;
  justify-content:center;
}
footer{
    font-family: "Coiny", system-ui;
    font-weight: 100;
    font-size:medium;
    font-style: normal;
}


/* MEDIA QUERY */
/* ABOUT ME ART */
@media only screen and (max-width: 922px){
   .about-me-art{
    height: 500px; ;
   } 
/*HOME LINK*/
.home-link{
    left: 430px;
    bottom: 800px;
}
/*ABOUT CONTENT BOX*/
.windows-frame-1{
    left: 400px;
    bottom: 450px;
    height: 350px;
}
.about-content{
     left: 470px;
    bottom: 510px;
    height: 200px;
    width: 390px;
}
/*FUN FACTS BOX*/
.windows-frame-2{
    height: 300px;
    left: 430px;
    bottom:200px;
    width: 250px;
}
.facts-box{
    width: 170px;
    height: 160px;
    left: 460px;
    bottom:255px;
    overflow-y: scroll;
}
/*QUIZ BOX*/
.windows-frame-3{
    width: 290px;
    height: 300px;
    left: 650px;
    bottom:200px;
}
.quiz-box{
     left: 699px;
    bottom: 270px;
    height: 150px;
    width: 180px;
}
.quiz-box img{
    height: 100px;
}
/* FOOTER */
footer{
    left: 100px;
  bottom: 60px;
}
}


@media only screen and (max-width: 1700px){
/* ABOUT ME ART */
       .about-me-art{
    height: 780px; ;
   } 
/*HOME LINK*/
.home-link{
    left: 790px;
    bottom: 680px;
}
/*ABOUT CONTENT BOX*/
.windows-frame-1{
    left: 800px;
    bottom: 250px;
    height: 450px;
}
.about-content{
     left: 900px;
    bottom: 380px;
    height: 200px;
    width: 500px;
}
/*FUN FACTS BOX*/
.windows-frame-2{
    height: 350px;
    left: 850px;
    bottom:-10px;
    width: 290px;
}
.facts-box{
    width: 205px;
    height: 200px;
    left: 879px;
    bottom:70px;
    overflow-y: scroll;
}
/*QUIZ BOX*/
.windows-frame-3{
    width: 400px;
    height: 350px;
    left: 1120px;
    bottom:-10px;
}
.quiz-box{
     left: 1170px;
    bottom: 69px;
    height: 200px;
    width: 280px;
}
.quiz-box img{
    height: 120px;
}
/* FOOTER */
footer{
    left: 500px;
  bottom: -200px;
}

}