@font-face {
  font-family: 'Raybees'; /* set name */
  src: url(Raybees-Regular.otf); /* url of the font */
}

.icon { /* home icon*/
    width: 30px;
    height: 30px;
    position: relative;
    top: 10px;
    left: 5px;
}
body { 
    background-color: #debbf0;
    color: black;
    font-family: Raybees;
}

.topnav { /* nav bar*/
    background-color: #000000;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    background-color: #000000; 
    padding: 0 20px; 
}

.navButt a { /* nav buttons*/
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-color: #1DBD2B; 
    color: white;
    text-decoration: none;
}

.navButt a:hover { /* nav buttons*/
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  background-color: #158C4D; 
  color: #D3D5E6;
  text-decoration: none;
}

.logo { /* nav bar logo*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.section { /* hides section*/
    display: none;
}

#home { /* home is the default section*/
    display: block;
}

.soc { /* social buttons*/
    margin-right: 20px;
}

.navButt a.homeNav { /* so home is unique and not like the nav buttons*/
    background: none;      
    color: inherit;        
    padding: 10px 20px;    
    margin: 10px;          
}

html {
  scroll-behavior: smooth;
}

/* 
https://www.w3schools.com/css/css_align.asp -centering 
https://www.1001fonts.com/raybees-font.html -font
*/