styles.css

/*so the scolling can be seen is slower*/
html
{
    scroll-behavior: smooth; 
}
/*all, to make website go all the way*/
* 
{ 
    margin-bottom: 0;
    margin-left: 0; 
    margin-right: 0;
}
/*general body styling*/
body 
{ 
    /* overflow: hidden;  to get rid of scrollbar*/
    background-color: rgb(168, 140, 168);
    font-family: 'Roboto', sans-serif; 
}

/*hyperlinks*/
a
{
    position: relative;
    color: inherit;
    text-decoration: none;
}
/*menu buttons,highlight on hover*/
.nav-items:hover
{
    background-color:#b4bbd0;
}
/*menu buttons*/
.nav-items
{
    border: 1px solid black;
    border-radius: 100px/200px;
    background-color:#CF777E;
    width:25%;
    height: 30px;
    padding: 0.5%;
}
/*all sections*/
.text_sym
{
    font-size: 30px;
}
/*size of each section*/
.part
{
    margin-right: 0;
    margin-top: 20px;
    min-height: 1300px;
    width: 100%;
}
/*navigation bar*/
nav
{
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 90%; /* Full width */
    margin-top:10px;
}

/*section1 home*/
#part1
{ 
    
    display: grid;
  
    background-color:#eab0b5;
}
/*section2 social*/
#part2
{
    
    display: grid;
    grid-template-columns: 2fr 2fr;
    background-color:#C0ADFF;
}
/*section3 hobbies*/
#part3
{
     
    background-color:#FEF7D8;  
}
/*section4 volunteering*/
#part4
{
     
    background-color:#BEDAD0;
}
/*my name*/
.name
{
    background-color: #f3cbcfdd;
    padding: none;
    border-radius: 50%;
    font-family: 'Sriracha', cursive;
    margin-left:2%;
    font-size: 34px;
    width: 50%;
    text-align: center;
}


/*text on right next to title*/
.home_right
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    top: 10%;
    left: 55%;
    width: 38%;
    font-size: 22px;
}
/*text on left under title*/
.home_left
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    left: 8%;
    font-size: 18px;
}
/*buttons and text on page*/
.socials
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    width: 40%;
    padding: 2%;
    padding-top: -200px;
}
/*stuff on rightside*/
.socials_right
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    margin-left:50%;
    width: 40%;
    padding: 2%;
    margin-top: 10%;
    padding-top: -200px;
}
/*all titles*/
.social_title
{
    padding: 2%;
    font-family: 'Sriracha', cursive;
    width:80%;
}
/*text on socials page*/
.contact
{
    border:none;
    border-radius: 40%;
    background-color:#eae4fe;
    float:right;
}
/*hobbies summary*/
.hobby_text
{
    font-family: 'Sriracha', cursive;
    bottom: -5%;
    width:35%;
    font-size: 20px;
    margin-left: 2%;
}
/*to highlight link in text*/
.highlight
{
    background-color:#a68ff3;
    border-radius: 5px;
}
/*scrollbar with hobby images*/
.img_scroll
{
    position: absolute;
    right:10%;
    top:480%;
    height:100%;
    width:30%;
    overflow:auto;
    opacity: 85%; 
}
/*volunteer text*/
.vol
{
    font-family: 'Sriracha', cursive;
    width:40%;
    top: 50px;
    font-size: 20px;
    margin-left: 2%;
}
/*pick of shops*/
.romford
{
    position: absolute;
    top: 745%;
    margin-left:60%;
    opacity: 95%;
}
/*icon1*/

#bhfIcon
{
    position: absolute;
    margin-left:50%;
    top: 745%;
    opacity: 80%;
}
/*icon2*/

#hhIcon
{
    position: absolute;
    margin-left: 50%;
    margin-top:19%;
    top: 745%;
    opacity: 80%;   
}

/*the socials linked button*/
button
{
    padding: 2px;
    border-radius: 3px;
    border: none;   
}

/*opacity of images in scrollbar*/
.op
{
    opacity: 90%;
}

/*media query to adjust to the bigger screens at college*/
@media screen and (max-width:1930px) 
{
    /*hobbies summary*/
.hobby_text
{
    font-family: 'Sriracha', cursive;
    width:35%;
    font-size: 20px;
    margin:0 auto;
    margin-left: 2%;
}

/*volunteer text*/
.vol
{
    font-family: 'Sriracha', cursive;
    width:40%;
    font-size: 20px;
    margin:0 auto;
    margin-left: 2%;
}

/*pick of shops*/
.romford
{
    position: absolute;
    top:450%;
    margin-left:60%;
    opacity: 95%;
}
/*icon1*/

#bhfIcon
{
    position: absolute;
    top:450%;
    margin-left:50%;
    opacity: 80%;
}
/*icon2*/

#hhIcon
{
    position: absolute;
    top:450%;
    margin-left: 50%;
    margin-top:19%;
    opacity: 80%;   
}

/*scrollbar with hobby images*/
.img_scroll
{
    position: absolute;
    right:10%;
    height:100%;
    width:30%;
    top: 300%;
    overflow:auto;
    opacity: 85%; 
}

}


/*adjust section1 to smaller devices*/
@media screen and (max-width:1060px)
{
/*my name*/
.name
{
    font-family: 'Sriracha', cursive;
    margin-left:25%;
    font-size:30px;
    width: 55%;
}
/**/

#part1
{
    width: 100vw;
    height:100vh; 
    display: grid;
    grid-template-rows: none;
    background-color:#DFA4A9;
}

/*text on right nect to title*/
.home_right
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    top: 50%;
    margin-left:-20%;
    font-size: 18px;
    text-align: center;
}

/*text on left under title*/
.home_left
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    margin-left:10%;  
    width: 80%;  
    font-size: 18px;
    text-align: center;
}

/*hobbies summary*/
.hobby_text
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    top: 490%;
    width:40%;
    padding:2%;
    font-size: 16px;
}
/**/
.vol
{
    font-family: 'Sriracha', cursive;
    position: absolute;
    width: 40%;
    padding: 2%;
    font-size: 16px;
    top:725%;
}

}