* {
    margin:0; padding: 0; border: 0;
    box-sizing: border-box;
}
/* default styles for the root/html */
:root {
    font-size: 62.5%; /*16px * .625 = 10px root font size */

    /* css variables for site colors */
    --color-bg1: #EEE5E9;
    --color-bg2: #EFC88B;
    --color-font1: #222222;
    --color-accent1: #CF5C36;
}

body {
    background-color: rgb(88, 88, 151);
    color: var(--color-font1);
    font-size: 1.4rem;
    height: 2000px;
}

h1 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 50px;
}

span {
    
}

#sticky  a {
    text-decoration: none;
    color: white;
    border: 4px solid white;
    padding: 10px;
    margin-left: 5px;
}

#sticky {
    border: 0px solid red;
    background-color: #10101a;
    height: cover;
    padding-top: 17px;
    height: 50px;
    padding-left: 4px;
    position: sticky; top: 0;
    
    
}

#sticky #in {
    margin-left: 0;
    border: 4px solid red;
    margin-left: 67%;
}

#navs {
    border: 0px solid red;
    
}

#navs #ha {
    border: 0px solid red;
    padding: 16px 10px 16px 3px;
    display: flexbox;
    background-color: rgb(207, 188, 224);
}

#ha a {
    padding-left: 50px ;
    padding-right: 50px ;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgb(160, 151, 151);
    margin-left: 6.5%;
    background-color: rgb(207, 188, 224);
    text-decoration: none;
    color: rgb(134, 113, 73);
}


#navs #ha :hover{
    
    background-color: rgb(115, 165, 162);
}
/* hb */
#navs #hb {
    border: 0px solid red;
    padding: 10px 10px 9px 3px;
    display: flexbox;
    background-color: rgb(156, 119, 64);
    margin-top: 30px;
}

#hb a {
    padding-left: 50px ;
    padding-right: 50px ;
    padding-top: 10px;
    padding-bottom: 10px;
   
    margin-left: -1%;
    background-color: rgb(156, 119, 64);
    text-decoration: none;
    color: rgb(44, 40, 32);
    font-weight: 700;
}


#navs #hb :hover{
    
    background-color: rgb(223, 216, 126);
}

#va {
    text-align: center;
    padding: 10px;
    display: inline-block;
    margin-top: 10px;
    width: 200px;
    
}

#va a {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    padding: 5px 10px 5px 10px;
    border: 4px solid rgb(2, 1, 1);
    text-decoration: none;
    color:whitesmoke;
    font-weight: 800;
    background-color: rgb(50, 58, 61);
    border-radius: 10px;
}

#va :hover {
    
    padding: 5px 20px 5px 20px;
 
  
    
    
}

ul {
    list-style-type: none;
}

#vb {
    text-align: center;
    padding: 10px;
    display: inline-block;
    
    
}

#vb a {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding: 5px 10px 5px 10px;
    border: 1px solid rgb(146, 146, 146);
    text-decoration: none;
    color:rgb(0, 0, 0);
    font-weight: 800;
    background-color: rgb(209, 240, 252);
    width: 200px;
    
}

#vb ul  :hover {
    
    border: 2px solid rgb(0, 0, 0);
    color: rgb(61, 3, 3);
   
  
    
    
}

ul {
    list-style-type: none;
}
#ga {
    display: inline-block;
    vertical-align: top;
    margin: 20px;
    
}
#ga ul{
    display: inline-grid;
    border: 6px solid rgb(19, 21, 26);
    grid-template-columns: auto auto auto;
    padding: 10px;
    border-radius: 12%;
}
.grid  {
    
    display: inline-grid;
    border: 0px solid red;
    grid-template-columns: auto auto auto;
    padding: 20px;
    text-align: center;
}

#ga ul li a {
    text-decoration: none;
    color:rgb(0, 0, 0);
    font-weight: bold;
}

#ga ul :hover {
    border: 1px solid rgb(168, 166, 166);
    border-radius: 30px;
}