html{scroll-behavior: smooth;}

body{
   margin: 0;
   padding: 0;
   color: var(--color);
   background: var(--background);
   text-align: left;
   font-family: "open sans", sans-serif;
   scroll-behavior: smooth;
   --theme1: #3498db;
   --theme2: #2980b9;
   --background: #181818;
   --color: #fff;
   --margin: 15px;
   --padding: 15px;
   --borderRadius: 12px;
   }

   #content{
     margin: 0;
   }

   .inner-width{
     width: 100%;
     max-width: 1100px;
     margin: auto;
   }

   #navbar{
     width: 100%;
     height: 56px;
     background: var(--theme1);
     color: #fff;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     transition: all 300ms linear;
     user-select: none;
   }

   #navbar img{
     width: auto;
     height: 36px;
     margin: 10px 15px 15px 15px;
     float: left;
   }

   #navbar-links{
     float: right;
     padding: 15px;
   }

   #navbar-links a{
     margin: 0 5px;
   }

   #toggleNav{
     text-align: right;
     color: #fff;
     margin: 15px 15px 15px 15px;
   }

   #home{
     margin: 0;
     width: 100%;
     height: 100vh;
     background-image: url("assets/bg_grey.svg");
     background-size: cover;
     background-repeat: repeat-x;
     background-position: center;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
   }

   #home img{
     width: 100%;
     height: auto;
     background-image: url("blob1.svg");
     background-position: right;
     background-repeat: no-repeat;
   }

   #home button{
     width: 100%;
     height: auto;
     min-height: 40px;
     margin: var(--margin);
     background: var(--theme2);
     color: #fff;
     border: 2px solid #fff;
     border-radius: var(--borderRadius);
     font-size: 1rem;
   }

   #home button:hover{
     background: var(--theme1);
   }

   #about{
     width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: left;
   }

   #about img{
     width: 50%;
     height: auto;
   }

   #projects{
     margin: auto;
   }

   #projectContainer{
     width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
   }

   .project{
     width: 80%;
     max-width: 450px;
     height: auto;
     background: var(--theme1);
     border-radius: var(--borderRadius);
     margin: var(--margin);
     padding: 0 var(--padding) var(--padding) 0;
   }

   .project img{
     width: 30%;
     height: auto;
     border-top-left-radius: var(--borderRadius);
   }

   .project h3{
     width: calc(70% - (2 * var(--margin)));
     height: auto;
     float: right;
     margin: var(--margin);
   }

   .project p{
     margin: var(--padding);
   }

   .project button{
     width: 80%;
     height: auto;
     margin: var(--padding);
     padding: 10px;
     font-size: 1rem;
     background: var(--theme2);
     color: #fff;
     border: 2px solid #fff;
     border-radius: var(--borderRadius);
   }

   .project button:hover{
     background: var(--theme1);
   }

   #footer{
     margin: 0;
     padding: 0;
     color: #fff;
     width: auto;
     height: auto;
     font-size: 1.1rem;
   }

   #footerExpanded{
     display: none; /* FLEX */
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: stretch;
     background: var(--theme1);
     padding-bottom: 30px;
   }

   #footerContent{
     width: calc(100% - 30px);
     height: auto;
     min-height: 60px;
     background: var(--theme1);
     margin: 0;
     margin-top: -21px;
     padding: 15px;
   }

   #scroll-top{
     width: 40px;
     height: 40px;
     background: var(--theme1);
     border-radius: 12px;
     margin: 15px;
     bottom: 0;
     right: 0;
     position: fixed;
     justify-content: center;
     display: flex;
     font-size: 28px;
     color: #fff;
     transition: .1s linear;
   }

   #scroll-top i{
     margin-top: 0px;
     transition: .1s linear;
     stroke-width: 3px;
   }

   #scroll-top i:hover{
     margin-top: -5px;
   }

   .sectionTitle{
     color: var(--color);
     font-size: 2rem;
   }

   .sectionTitle::before{
     content: "#";
     color: var(--theme2);
     margin: 0 10px 0 0;
     user-select: auto;
   }

   a{
     color: inherit;
     text-decoration: none;
   }

   a:hover{
     color: inherit;
     text-decoration: underline;
   }

   i{
     text-decoration: none;
     outline: none;
     font-style: normal;
   }

   i:hover{
     text-decoration: none;
     outline: none;
   }

   var{
     font-style: normal;
   }

  ::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
  ::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}