@font-face{
    font-family:JuicyB30;
    src:url("../fonts/juicyb30.ttf") format("truetype");

}
@font-face{
    font-family:PinkBunny;
    src:url("../fonts/pinkbunny2.woff") format("woff");

}
/* This section is for block level elements */
body{
   
   display:flex;
   flex-direction:column;
   position:static;
   
 
   

}
.background{

    width:60%;
}


#container{
    display: grid;
   margin: auto;
   column-gap:0%;
   row-gap:0%;
   width:100%;
  height:70%;
   z-index:21;
}
header{
    display:flex;
    flex-direction:row;

    width:50%;
    height:10%;
    justify-content:flex-start;
    position:absolute;
    left:0%;
    top:10%;
    grid-column:1/span 3;
    flex-wrap: wrap;
  

}
footer{
    width:100%;
    height: 20%;
    position:absolute;
    bottom: 0%;

}
h1{
    color:rgb(28, 28, 97);
    font-size:300%;
}
a{
    
}
p{
    font-family:PinkBunny;
    font-size:larger;
}
/* This section is for class elements */

  
.homenav{
    display:flex;
    flex-direction:column;
justify-content: space-evenly;
position:absolute;
right:6%; 
z-index:0;
height:60%;
width:26%;
bottom:20%;



}
#about{
  display:flex;
    flex-direction:column;
justify-content: space-evenly;
position:absolute;
right:6%; 
z-index:0;
height:90%;
width:90%;
top:-10%; 
}    
  
  
/********this section is for pagelinks ******/
.plink{
height:20%;
width:100%;
bottom:40%;
position:static;
font-family:JuicyB30;
font-size: 250%;
}

/*********Section end******/


/* This section is for id elements present on index.html |4g=foreground, bkg=background */
#home-body{
  
 position:absolute;
   height:100%;
   width:100%;

}

#footbuilding4g{
    position: absolute;
    bottom:0%;
    right:-4%;
    width:45%;
    height: 20%;
   
    z-index: -13;

}
#gmbuildingbkg{
    position:absolute;
    left:-2%;
    z-index: -14;
    height:70%;
    width:25%;
    bottom:0%;
    opacity:0.8;
}
#mca4g{
    position:absolute;
    right: 35%;
    bottom: 0%;
    z-index: 15;
    height:70%;
    width:40%;
}
#welcomemoci{
    position:absolute;
    bottom:0%;
    height:50%;
    width:30%;
    z-index:16;
    right:65%;
}


/** This section is for id elements present on linkspage.html **/
#linkspagebody{
    display:flex;
    flex-direction:row;
    width:100vw;
    height:100vh;
justify-content:right;
background-color:rgb(211, 255, 255);

}
#coolsiteframe{
width:59%;
height:80%;
border-width:10px;
border-radius:1%;
border-style:solid;
border-color:rgba(164, 27, 159, 0.249);
}
#coolpeopleframe{
 width:30%;
height:80%;  
border-width:10px;
border-radius:1%;
border-style:solid;
border-color:rgba(164, 27, 159, 0.249);
}

.coolbodies{
    display:flex;
    flex-direction:column;
    width:98%;
    height:100%;
   background-color:rgba(223, 101, 183, 0.244);
   margin:2%;
   
 
}

.coolsite{
    display:flex;
flex-direction:row;
width:98%;
height:20%;
border-width: 3px;  
border-color:rgba(0, 0, 0, 0.122);
border-radius:1%;
border-style:solid;
background-color:rgba(255, 9, 206, 0.151);
    

 
}
.cooltitle{
    font-family:JuicyB30;
    color:rgb(89, 8, 103);
}
.sitetext{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:70%;
    height:80%;
   padding:2%;
   color:rgb(89, 8, 103);
   white-space:normal;
    overflow:auto;

}
.cooltext{
   color:rgb(181, 11, 127); 
}
.sitebio{
    font-family:monospace;
    margin:2%;
font-size:90%;
 height:20%;  
}

#sitecard{
height:100%;
width:30%;  
}

.title{
    font-family: PinkBunny;
    font-size:200%;
    height:20%;
   padding:1%;
}
#sitecard2{
height:100%;
width:40%;
}
#b2moci{
      position:absolute;
    bottom:-1%;
    height:30%;
    width:20%;
    z-index:16;
    right:80%;
}