:root {
/* COLOURS */
    --text-dark: #2f271f;
    --main: #D9BEAB;
    --secondary-main: #CE8B3A;
    
    --primary-accent-links: #A24502;
    --hover-text-light: #CE8B3A;
    --hover-text-dark: #782601;
    --hover-button: #D9BEAB;
   
    --text-light:#F2E7DC;
    --darkest: #0F1410;
    --dark-main: #1E2914;
    --dark-secondary: #54572B; /*5A5E2C*/
    --dark-accent: #4b1a0e; /*2f271f*/
}


/* FONTS */


            @font-face {
                font-family: Sinacanth;
                src: url('https://silkandbones.neocities.org/fonts/SinaNovaRegular.ttf') format("truetype");
                font-weight: normal;
	              font-style: normal; 
	              font-display: swap; 
            } /*Sinacanth - sina nova/coelacanth hybrid*/

            @font-face {
                font-family: Sinacanth;
                src: url('https://silkandbones.neocities.org/fonts/CoelacanthBold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Sinacanth;
                src: url('https://silkandbones.neocities.org/fonts/CoelacanthItalic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Aloevera;
                src: url('https://silkandbones.neocities.org/fonts/Aloevera.ttf');
                font-style: normal;
                font-weight: normal;
                font-display: swap; 
            } /*Aloevera*/
            
            @font-face {
                font-family: Quikens;
                src: url("https://silkandbones.neocities.org/fonts/QuikensRegular.otf");
                font-style: normal;
                font-weight: normal;
                font-display: swap;
            } /*Quikens*/
            
            @font-face {
                font-family: Montserrat;  
                src: url("https://silkandbones.neocities.org/fonts/Montserrat-Variable.ttf");
                font-style: normal;
                font-weight: normal;
                font-display: swap;
            }
            
            @font-face {
                font-family: Montserrat;  
                src: url("https://silkandbones.neocities.org/fonts/Montserrat-Variable.ttf");
                font-style: normal;
                font-weight: bold;
                font-display: swap;
            }
            
/* FONTS END */


        /* Menu Icons */
        #home {
          background-image: url('/images/Home.png');
          background-size: cover;
          transition: background-image 0.5s ease-in-out;
          transition: transform 0.5s ease;
        }
        
        #home:hover {
          background-image: url('https://silkandbones.neocities.org/images/HomeAnim.png');
          transform: scale(1.35);
        }

        #art {
          background-image: url('/images/Art.png');
          background-size: cover;
          transition: background-image 0.5s ease-in-out;
          transition: transform 0.5s ease;
        }
        
        #art:hover {
          background-image: url('https://silkandbones.neocities.org/images/ArtAnim.png');
          transform: scale(1.35);
        }

        #projects {
          background-image: url('/images/Projects.png');
          background-size: cover;
          transition: background-image 0.5s ease-in-out;
          transition: transform 0.5s ease;
        }
        
        #projects:hover {
          background-image: url('https://silkandbones.neocities.org/images/ProjectsAnim.png');
          transform: scale(1.35);
        }

        #plants {
          background-image: url('/images/Plants.png');
          background-size: cover;
          transition: background-image 0.5s ease-in-out;
          transition: transform 0.5s ease;
        }
        
        #plants:hover {
          background-image: url('https://silkandbones.neocities.org/images/PlantsAnim.png');
          transform: scale(1.35);
        }
        
        #likes {
          background-image: url('/images/Likes.png');
          background-size: cover;
          transition: background-image 0.5s ease-in-out;
          transition: transform 0.5s ease;
        }
        
        #likes:hover {
          background-image: url('https://silkandbones.neocities.org/images/LikesAnim.png');
          transform: scale(1.35);
        }
        
        
        



/* CURSOR */
    * {
     cursor: url('https://file.garden/aiBlP24PQBWh7mO3/Hand.ani') 32 32, auto !important;
    }




/* HIGHLIGHTING */
    ::selection {
      background: #648651;
      color: #FFFFFF;
    }

/*BOX SIZING*/
* {
  box-sizing: border-box;
}



/*GLOBAL CLASSES*/



    .content-box {
      color: var(--text-light);
      background-color: #2f271f;
      border: 3px solid var(--primary-accent-links);
      border-radius: 10px;
      font-weight: bold;
      padding-top:5px;
      overflow:hidden;
    }
    
    .content {
      width:100%;
      background-color: #d5a77c;
      height: 100%;
      border-top: 3px solid var(--primary-accent-links);
      margin-top:5px;
      
    }
    
    
    .inline {
      display:inline;
    }
    
    .center{
      display:block
    }
    
    .center img {
      margin: auto;
    } 
    
    .no-pad {
     padding: 0px;
    }
    
    .no-mar {
     margin: 0px;  
    }
    
    .dashed {
      border: 2px dashed var(--secondary-main);
      border-radius: 5px;
      text-indent: 10px;
      font-size: 15px;
    }

    .round-5 {
      border-radius:5px;
    }
        .round-top-5 {
          border-radius:5px 5px 0 0;
        }
        .round-btm-5 {
          border-radius:0 0 5px 5px;
        }
    
    .round-10 {
      border-radius:10px;
    }
        .round-top-10 {
          border-radius:10px 10px 0 0;
        }  
        .round-btm-10 {
          border-radius:0 0 10px 10px;
        }
        
    .sticker-div {
      width: 0;
      height: 0;
      display: block;
      align-self: flex-start;
    }
        .sticker {
          position: relative;
        }
        
        .sticker-left {
          position: relative;
          text-align: left;
          top: 0;
          left: 0;
        }
        
        .sticker-right {
          position: relative;
          top: 0;
          right: 0;
        }
    
    .feature-divider {
      height: 50px;
      width: auto;
      margin: 5px auto;
      display: block;
      
    }
    
    .box {
      color: var(--text-light);
      background-color: var(--primary-accent-links);
      border: 3px solid var(--secondary-main);
      border-radius: 5px;
      font-weight: bold;
      padding: 5px;
      font-size: 15px;
      margin-top:5px;
      margin-bottom:5px;
    }
    
    .green-box {
      background-color: var(--dark-secondary);
      color: var(--text-light);
      border: solid 3px var(--secondary-main);
      padding: 10px 20px;
    }
    
    .light-box {
      background-color: #CFB099;
      padding: 10px 20px;
    }
    
    .main-box {
      background-color: var(--main);
      padding: 10px 20px;
    }
    
    .row {
      display: flex;
      gap: 20px;
    }
    
    .col-1 {
      max-width: 8.333333%;  
    }
    
    .col-2 {
      width: 16.666667%;
    }
    
    .col-3 {
      width:25%;
    }
    
    .col-4 {
      width:33.333333%;  
    }
    
    .col-5 {
      width: 41.666667%;
    }

    .col-6{
      width: 50%;
    }
    
    .col-7 {
      width: 58.333333%;
    }
    
    .col-8 {
      width: 66.666667%;
    }
    
    .col-9 {
      width: 75%;
    }
    
    .col-10 {
      width: 83.333333%;
    }
    
    .col-11 {
      width: 91.666667%;
    }
    
    .col-12 {
      width: 100%;
    }
    


/*ANIMATIONS*/

.bounce {
  animation: bounce 1.5s linear infinite;}

.bounce-on-hover:hover {
  animation: bounce 1.5s linear infinite;}

    @keyframes bounce {
      0% {
     transform: translate(0px, 2px);
     animation-timing-function:ease-in-out
      }

      50% {
     transform: translate(0px, -3px);
     animation-timing-function:ease-in-out
      }

      100% {
     transform: translate(0px, 2px);
     animation-timing-function:ease-in-out
       }
    }
    
.rise {}

.rise-on-hover {}

    @keyframes rise {
      0% {
        transform: translate(0px,20px);
        animation-timing-function:ease-in-out
      }
        
      100% {
        transform: translate(0px,0px);
        animation-timing-function:ease-in-out
      }
    }


.wave-text span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}
        .wave-text span:nth-child(1) {
            animation-delay: 0s;
        }
        .wave-text span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .wave-text span:nth-child(3) {
            animation-delay: 0.4s;
        }
        .wave-text span:nth-child(4) {
            animation-delay: 0.6s;
        }
        .wave-text span:nth-child(5) {
            animation-delay: 0.8s;
        }

    @keyframes wave {
        0%, 20% {
            transform: translateY(0);
        }
        10% {
            transform: translateY(-5px);
        }
    }

.scale-on-hover:hover {
  animation: scale 1s ease;
}

    @keyframes scale {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.3);
        }
    }