@font-face {
    font-family: 'Basiic pixel';
    src: url('/css/fonts/basiic-font.ttf') format('truetype');
}
@font-face {
  font-family: 'Darumadrop One';
  font-style: NORMAL;
  src: url('/css/fonts/Darumadrop_One/DarumadropOne-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: REGULAR;
  src: url('/css/fonts/Gaegu/Gaegu-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Hachi Maru Pop';
    font-style: normal;
    font-weight: regular;
    src: url('/css/fonts/HachiMaruPop/HachiMaruPop-Regular.ttf') format('truetype');
}
/*--------------------------------------------- GENERAL FROR ALL  ---------------------------------------------*/
html {
    scroll-behavior: smooth;
}
h1{ 
    font-family: 'Gaegu'; 
    font-size: 3rem;
    margin-bottom: 0px;
    margin-top: 0px;
}
h2 {
    font-family: "Darumadrop One";
    margin-bottom: 0px;
    margin-top: 0px;

}
h3{ 
    font-family: 'Gaegu';
    font-size: 1.75rem;
}
p{ 
    font-family: 'Basiic pixel';
    font-size: 1.25rem;
    color: #ac446d
}
body {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
a {
    text-decoration: none;
    color: #9ba238; 
}
a:visited {
    color:#cf2a76;
}
a:hover {
    color: #96c242;
    text-decoration: underline;
}
main {
    margin-top: 0px;
}
ul {
    margin: 0;
    padding: 0;

    list-style-position: inside;
    list-style-type: '✫  ';
    font-family: Basiic;
    font-size: 1.2rem;
    padding: 1.25rem;
}
/*-------------------- LOADER  --------------------*/
@keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg)}
}
figure.loader img{
    width:100px;
    height:100px;
    animation: spin 1s linear infinite;
}
.loader {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width:100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url("/images/pics/loading-background.webp");  /* ../ is to out of one directory into another *add dash for absolute path, start at root directory*/
    background-repeat: no-repeat;
    background-color:#494725;
    background-position: center;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0px;
}

/*--------------------------------- NAV + SEARCH AND HOME ---------------------------------*/

div.navigation-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "home nav search";
    align-items: center;
}

/*-------------------- NAV BAR --------------------*/
div.navbar {
    width: min(100%, 50rem);
    background-color: #90A57E;
    margin-top: 2%;
    overflow: auto; /* CHANGE LATER AS MAKES IT COVER WHOLE PAGE*/  
    white-space: nowrap; /* NO CLUE WHAT THIS DOES*/ 
    text-align: center;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    z-index: 2;
}
div.navbar a{
    display: inline-block; /* CHANGE LATER AS NOT RESPONSIVE */ 

    color:#424337;
    font-family: 'Darumadrop One';
    font-size: 22px;
    /*font-size: ; SEE IF YOU SHOULD ADJUST FONT SIZE*/
    text-decoration: none;
    text-align: center;

    padding-left: 7%; /* CHANGE LATER AS NOT RESPONSIVE */
    padding-right: 7%;  
    padding-top: 1%;
    padding-bottom: 1%;
    
}
div.navbar a:hover{
    color: #3B161C;
    background-color:#C097A0;
    
}
div.navbar a:active{
    color: #3B161C;
    background-color:#C097A0;
}
div.nav-wrapper {
    grid-area:nav;
    display: flex;
    justify-content: center;
}
/*-------------------- TAPE ENDS STYLING  --------------------*/
div.nav-tape-left {
    display:flex;
    height: 48px;
    margin-top: 2%;
    aspect-ratio: 2354/1501;
    overflow: hidden;
}
div.nav-tape-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
div.nav-tape-right {
    display: flex;
    height: 48px;
    margin-top: 2%;
    aspect-ratio: 2180/1510;
    overflow: hidden
}
div.nav-tape-right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*-------------------- HOME BUTTON --------------------*/
button.home-button {
    grid-area: home;
    display: flex;
    height: 48px;
    width: 48px;
    margin-top: 16px;
    margin-left: 16px;
    aspect-ratio: 1/1;
    overflow: hidden;
}
button.home-button img{
    width:90%;
    height:90%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
button.home-button img:hover {
    transform: scale(1.10);
}

/*-------------------- SEARCH BUTTON --------------------*/
button.search-button {
    grid-area: search;
    display: flex;
    height: 48px;
    width: 48px;
    margin-top: 16px;
    margin-right: 16px;
    aspect-ratio: 1/1;
    overflow: hidden;
}
button.search-button img{
    width:100%;
    height:100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
button.search-button img:hover {
    transform: scale(1.10);
}
/*-------------------- BUTTON NO STYLING  --------------------*/
button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer; /* maybe style later w custom hehe*/
	outline: inherit;
}
/*--------------------------------- BACKGROUND IMAGES  ---------------------------------*/
.page-Home { 
    background-image: url("/images/pics/homepage-background.png");  /* ../ is to out of one directory into another *add dash for absolute path, start at root directory*/
    background-repeat: no-repeat;
    background-color:#383032; /* need to change this color*/
    background-position: center;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0px;
}
.page-Creative { 
    background-image: url("/images/pics/creative-background.jpg");  
    background-repeat: no-repeat;
    background-color:#a1767c; 
    background-position: center;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0px;
}
.page-About {
    background-image: url("/images/pics/about-background.jpg");  
    background-repeat: no-repeat;
    background-color:#a1767c; 
    background-position: center;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0px;
}
/*--------------------------------- HOMEPAGE CONTENT  ---------------------------------*/
/*divider that contains the image*/
div.welcome-image {
    width: min(100%,700px);
    aspect-ratio: 3835/985;
    overflow: hidden
}
/*the image in the divider*/
div.welcome-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*display: block; I DONT WANT YOU*/
    transition: transform 0.3s ease;
}
div.welcome-image img:hover{
    transform: scale(1.02);
}
div.homepage-center {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5.25%;
}
div.homepage-notes {
    display: flex;
    flex-direction: row;
    gap: 15%;
    width: 100%;
}
div.homepage-interests {
    flex: 1 1 0;
    min-width: 0;
    margin-top: -3%;
}
div.homepage-interests img{
    width: 110%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
div.homepage-interests img:hover{
    transform: scale(1.02) rotate(4deg);
}
button.homepage-picofmonth {
    flex: 1 1 0;
    min-width: 0;
    margin-top: -2%;
    margin-right: 5%;
    margin-left: 5%;
}
button.homepage-picofmonth img{
    width: 85%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}
.homepage-picofmonth img:hover{
    transform: scale(1.01) rotate(-3deg) translate(-7px) ;
}
.page-Home h2{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
    justify-content: center;
    font-family: Gaegu;
    color: #faf5ed;
    font-size: 1.7rem;
    text-align: center;
}
.page-Home p{
    margin: 0px;
}
/*----------------------------------- ABOUT PAGE  -----------------------------------*/
h3.About-h3{
    color: #cf2a76;
    font-size: 3.2rem;
    margin-top: 15%;
    margin-bottom: 5%;
}
p.About-stats{
    color: #7e3327;
    font-size: 1.5rem;
    padding-left: 1.5rem;
}
.page-About main{
    position: relative; /*for the reference of the tabs*/
    background-color: #fbf1f5;
    margin-top: 7%;
    margin-left: 18%;
    margin-right: 18%;
    margin-bottom:3%;

    border: 5px solid #7e3327;
}
.page-About main.website-active{
    background-color: #f1fbf1;
    border: 5px solid #3b161c;
}
.page-About main.website-active h3{
    color: #9ecf2a;
    margin-top: 2.88rem;
    margin-bottom: 0.956rem;
}
.page-About main.website-active p.About-stats{
    color: #277e47;
    font-size: 1.5rem;
    padding-left: 1.5rem;
}
div.main-page {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
}
div.top-main-page {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
figure.me {
    display: flex;
    width: 35%;
    height: auto;
    margin-top:-4%;

}
.me img{
    width:100%;
    height: auto;
    display: block;

}
/*----General table---*/
table {
    font-family: Basiic;
    border-collapse: collapse;
    width: 100%;
    border-spacing: 3px;
}
th {
    background-color: #c77195;
    padding: 0.5%;
    font-family: Gaegu;
    font-size: 20px;
    color:#fbf1f5
}
td {
    display: table-cell;
    padding: 8px;
    border: 3px solid #fbf1f5; /*-- gave the border but removed the drak outline turned it white*/
    background-color: #f6d6df;
}

/*----Interests table---*/
table.iemdinterests {
    border: 3px solid #c77195;
}
td.tdborder {
    padding: 0px;
    border:0px;
}
td.category {
    background-color: #f3bcce;
    font-size: 20px;
    color: #ac446d;
    vertical-align: top;
}
td.tdborder {
    background-color: #fbf1f5;
}

table.Stats {
    border: 3px solid #b4c27b; 
}
th.Stats {
    background-color: #b4c27b;
}
td.Stats {
    background-color: #eff3df;
    border: 3px solid #b4c27b;
}
td img {
    max-height: 4.13rem;
    width: auto;
    display: inline;
    vertical-align: middle;
    transition: transform 0.3s ease;
}
.stat-entry img:hover{
    box-shadow: 0 0 3px 2px #f1b5c8;
    transform: scale(1.01);
}

th:nth-child(1) {
    min-width: 145px;
}
/*----Stats table---*/
.stat-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.socials img{
    max-width: 40px;
    height:auto;
}
.socials img:hover {
    filter: drop-shadow( 0 0 10px #f1b5c8);
    /*box-shadow: 0 0 3px 2px #f1b5c8;
    border-radius: 10px;*/
    transform: scale(1.01) rotate(-4deg);
}
.socials a:nth-child(2) img:hover,
.socials a:nth-child(4) img:hover {
    transform: scale(1.01) rotate(4deg);
}

/*----- inventory stuff-----*/
.inventory {
    display: flex;
    justify-content: space-between;
    row-gap: 1rem;
    column-gap: 1rem;
}
.inventory-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

    max-width: 35rem;
    padding: 0.3rem;
    row-gap: 0.5rem;
    column-gap:0.5rem;


    background-image: radial-gradient(#fbf1f5 15%, transparent 15%),
     radial-gradient(#fbf1f5 15%, transparent 15%);
    background-color: #c9d4d8;
    background-position: 0 0, 50px 50px;
    background-size: 100px 100px;
    /*height: 200px;*/
    width: 100%;
    /*background-color: #c9d4d8;*/
    border: 3px solid #8bc4d9;
    border-radius: 15px;
}
.inventory-images img{
    max-height: 5.5rem;
    min-height: 68px;
    width: auto;
}
.inventory-list {
    display: flex;
    align-items: center;
    background-color: #8bc4d9;
    border-radius: 15px;
    min-width: 14rem;
}
.inventory-list li:hover {
    color: #ac446d;

}
.highlighted {
    filter: drop-shadow( 0 0 6px #ac446d);
}
/*----FAQs---*/
div.FAQs {
    width: 17rem;
    height: 32.5rem;
    overflow-y: auto;
    padding: 1.25rem;

    background-color: #f6d6df;
    border: 3px solid #c77195
}


/*--------------------------------- CREATIVE PAGE  ---------------------------------*/
div.creative-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
    margin-left: 10%;
    flex-direction: row;
    gap: 0%;
}
div.drawing-gallery-pic {
    flex: 1 1 0;
    min-width: 0;
}
div.drawing-gallery-pic img{
    width: 125%;
    height: auto;
    display: block;
}
div.photo-gallery-pic {
    flex: 1 1 0;
    min-width: 0; 
}
div.photo-gallery-pic img{
    width: 75%;
    height: auto;
    object-fit: contain;
    display: block;
}
/*--------------------------------- GALLERY PAGE  ---------------------------------*/
figure.art-gallery {
    margin-left: 8%;
    margin-right: 8%;
}
figure.photo-gallery {
    margin-left: 8%;
    margin-right: 8%;
    
}

/*------------------------------------------------need to do responsive------------------------------------------------*/

.hidden {
    display: none;
}

/*--------------------------------- HOMEPAGE CONTENT + NAVBAR  ---------------------------------*/
@media only screen and (max-width: 700px) {
  h2.homepage {
    font-size: 1.3rem;
  }
  div.homepage-center {
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 7.5%;
  }
}
@media only screen and (max-width: 800px) {
    div.nav-tape-left {
        display:none;
    }
    div.nav-tape-right {
        display:none;
    } /*not reallt satisfied w this maybe have to do sm with overflow? want it to stick and scale but not shrinl then vpw is smaller than dic*/
}
/* When the screen gets narrow, move Home/Search above the nav */
@media only screen and (max-width: 915px) {
  div.navigation-grid {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "home search"
      "nav nav";
  }
  button.home-button {
    height:35px;
    width: auto;
    margin-top: 10px;
    margin-left: 10px;
  }
  button.search-button {
    height:35px;
    width: auto;
    margin-top: 10px;
    margin-right: 10px;
  }

  div.homepage-notes {
    flex-direction: column;
    align-items: center;
  }
  div.homepage-interests {
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 10%;
  }
  div.homepage-interests img{
    width: 100%;
    height: auto;
  }
  div.homepage-picofmonth {
    margin-left: 10%;
    margin-right: 10%;
  }
  div.homepage-picofmonth img{
    width: 100%;
    height: auto;
    display: block;
  }
}
@media only screen and (max-width: 1197px) {
    div.homepage-notes {
        gap: 8%;
    }
    div.homepage-interests {
        margin-top: 2%;
    }
    div.homepage-picofmonth {
        margin-top: 2%;
    }
    /*also change the sizing of the inventory items below this  so there isn't the awkward spacing*/
}
/*--------------------------------- CREATIVE CONTENT  ---------------------------------*/
@media only screen and (max-width: 915px) {
  div.creative-content {
    flex-direction: column;
    align-items: center;
  }
  /*---gotta adjust about page image get's squashed below above viewport width*/
  div.drawing-gallery-pic {
    margin-top: 5%;
    margin-left: 0%;
    margin-right: 7%;
  }
  div.drawing-gallery-pic img{
    width: 100%;
    height: auto;
  }
  div.photo-gallery-pic {
    margin-left: 2%;
    margin-right:12%;

  }
  div.photo-gallery-pic img{
    width: 100%;
    height: auto;
    display: block;
  }
}