*
{
    background-color: #ffddfb;
}

body
{
    display: grid; 
    grid-template-rows: auto 1fr auto auto; 
    gap: 10px; 
    margin: 5px; 
} 

/************************* GRID ELEMENTS **************************/
.header, .main, .extras, .footer 
{ 
    background-color: pink; 
    text-align: center; 
    padding: 20px; 
}

/**************************** HEADER *******************************/
.header
{
    /* Decorations */
    background-color: #ffddfb;
    text-align: center; 
    text-decoration: none;

    /* Semantics */
    width: 100%;
    position: sticky; 
    top: 0;
    z-index: 1;
    padding: 20px;
}

/* Buttons in the header */
.header a 
{
    /* Decorations */
    background-color: #ffddfb;
    text-align: center;
    padding: 15px 0px;
        /* Text */
    font-family: 'Courier Prime', monospace;
    color: #000000;
    font-size: 15px;
    text-decoration: none;
    
    /* Semantics */
    display: inline-block;
    width: 16%;
    transition: all 0.3s ease;
    position: sticky; 
    top: 0;
    z-index: 1;
}

/* Hover on the buttons in the header */
.header a:hover
{
    /* Decorations */
    background-color: #d8abc1;
    text-decoration: none;

    /* Semantics */
    position: sticky; 
    top: 0;
    z-index: 1;
}

/* Active button in the header */
.header a:active 
{
    /* Decorations */
    background-color: #f064a8;
    text-decoration: none;

    /* Semantics */
    position: sticky; top: 0;
    z-index: 1;
}

.candiHomeButton
{
    max-height: 60px;
    max-width: 60px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dropbtn 
{
    /* Decorations */
    font-family: 'Courier Prime', monospace;
    color: #000000;
    font-size: 15px;
    text-decoration: none;
    background-color: #ffddfb;
    /* Semantics */
    padding: 15px;
    border: none;
}
  
.dropdown 
{
    position: relative;
    display: inline-block;
}
  
.dropdown-content 
{
    display: none;
    position: absolute;
    background-color: #ffddfb;
    min-width: 30em;
    box-shadow: 0px 6px 12px 0px #000000;
}
  
.dropdown-content a 
{
    color: #000000;
    padding: 10px 50px;
    text-decoration: none;
    display: block;
}
  
.dropdown-content a:hover {background-color: #d8abc1;}
  
.dropdown:hover .dropdown-content {display: block;}
  
.dropdown:hover .dropbtn {background-color: #d8abc1;}

/**************************** MAIN  *******************************/
.main
{
    background-color: #ffddfb; 
    text-align: center; 
    padding: 20px; 
}

.butterfly
{
    max-height: 150px;
    max-width: 150px;
}

/* For the title */
.rectangle 
{
    /* Decorations */
    background-color: #ffddfb;
    padding: 40px 200px;
    text-align: center;
    text-decoration: none;
        /* Text */
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;    
        /* Border */
    border: 5px solid #000000;


    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
        /* Sizing */
    height: 8em;
    width: 11em;
}

/* Directory */
/* holds the buttons */
.directory
{
    /* Decorations */
    background-color: #ffddfb;

    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 60em;
}
  
.directory a 
{
    /* Decorations */
    background-color: #ffddfb;
    text-decoration: none;
    text-align: center;
        /* Text */
    color: #000000;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 20px;
    margin-top: 15px;
    line-height: 50px;
        /* Border */
    border: 3px solid #000000;

    /* Semantics */
    display: block;
    padding: 12px;
}
  
.directory a:hover 
{
    background-color: #d8abc1;
}
  
.directory a.active
{
    background-color: #f064a8;
    color: #000000;
}


/**************************** EXTRAS  *******************************/
.extras
{
    background-color: #ffddfb;
}

/* Stamp for the extras section */
.stamp 
{
    --r: 15px;
    height: 150px;
    padding: calc(2*var(--r));
    background: #f064a8;
    mask: 
      radial-gradient(var(--r),#0000 97%,#000) round 
       calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)), 
      linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* Text */
    text-decoration: none;
    color: black; 
    text-align: center;
    font-family: 'Aboreto';
    font-size: 25px;
    font-weight: bold;
}

/* Rows and Columns for the pictures on the home page */
.home-container 
{ 
    display: flex; 
    justify-content: center;  
    width: 100%; 
    flex-wrap: wrap; 
    padding: 20px; 
} 

.home-container .item 
{ 
    flex: 1;  
    max-width: 50%;  
    text-align: center;  
} 

.homeImage 
{ 
    max-width: 100%;  
    height: auto; 
}

.achillesPat
{
    max-width: 40%;
    height: auto;
}

/************************** FOOTER ************************/
.footer
{
    background-color: #ffddfb;
}

.flex-container 
{
    display: flex;
    justify-content: center;
    background-color: #ffddfb;
}

.flex-container > div 
{
    background-color: #ffddfb;
    width: 5em;
    margin: 10px;
    text-align: center;
    line-height: 75px;
}

.icons
{
    max-height: 4em;
    max-width: 4em;
}

.pinterestIcon
{
    max-height: 4.5em;
    max-width: 4.5em;
}

/**************************** ______________________BRACELET COLLECTION PAGE_______________________  *******************************/
/* These containers and buttons are for the bracelet collection menu */
h6
{
    color: #ffddfb;
    background-color: #000000;
    font-size: 15px;
}

h6:hover
{
    background-color: #ffddfb;
    color: #000000;
    transition-duration: 0.3s; 
}

.randomWordButton 
{ 
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Letters.jpeg"); 
    background-size: cover; 
}

.holidayButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Holiday.jpg"); 
    background-size: cover; 
}

.colorButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Color.webp"); 
    background-size: cover; 
}

.spaceButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Space.webp"); 
    background-size: cover; 
}

.minecraftButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Minecraft.jpg"); 
    background-size: cover; 
}

.fanButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Fan.jpg"); 
    background-size: cover; 
}

.tarotButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Tarot.jpg"); 
    background-size: cover; 
}

.musicButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Music.webp"); 
    background-size: cover; 
}

.choreButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Chore.jpg"); 
    background-size: cover; 
}

.marvelButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/Comics.jpg"); 
    background-size: cover; 
}

.timBurtonButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/timBurton.jpg"); 
    background-size: cover; 
}

.YouTubeButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/youtube.jpg"); 
    background-size: cover; 
}

.podcastsButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/podcast.jpg"); 
    background-size: cover; 
}

.strangerThingsButton
{
    color: #FFFFFF;
    background-image: url("Pictures/Bracelet Collection Background Images/strangerThings.jpeg"); 
    background-size: cover; 
}

/**************************** ______________________ALL BRACELET COLLECTION PAGES_______________________  *******************************/
.braceletPicture
{
    height: 15em;
    width: 15em;
}

/* Grid template just for the pictures */
.content
{ 
    /* Decorations */
    background-color: #ffddfb;
        /* Text */
    color: #000000;
    text-align: center;
    font-family: 'Courier Prime', monospace;

    /* Semantics */
    display: grid; 
    grid-template-columns: 20em 20em 20em;
    grid-template-rows: 8em 1.5em 1em;
    gap: 30px; 
    padding: 20px;
} 

.content div 
{ 
    background-color: #ffddfb; 
        /* Text */
    color: #000000;

    height: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/**************************** ______________________BRACELET COLLECTIONS PAGE_______________________  *******************************/
.collectionsTitleRectangle
{
    /* Decorations */
    background-color: #ffddfb;
    padding: 10px 200px;
    text-align: center;
    text-decoration: none;
        /* Text */
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;    
        /* Border */
    border: 5px solid #000000;


    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
        /* Sizing */
    height: 6em;
    width: 11em;
}

/**************************** ______________________RANDOM WORDS PAGE_______________________  *******************************/
.randomWordTitleRectangle
{
    /* Decorations */
    background-color: #ffddfb;
    padding: 10px 200px;
    text-align: center;
    text-decoration: none;
        /* Text */
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;    
        /* Border */
    border: 5px solid #000000;


    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
        /* Sizing */
    height: 4.5em;
    width: 11em;
}

/**************************** ______________________HOLIDAY PAGE_______________________  *******************************/
.holidayTitleRectangle
{
    /* Decorations */
    background-color: #ffddfb;
    padding: 10px 200px;
    text-align: center;
    text-decoration: none;
        /* Text */
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;    
        /* Border */
    border: 5px solid #000000;


    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
        /* Sizing */
    height: 6em;
    width: 11em;
}

/**************************** ______________________FAN COLLECTIONS PAGE_______________________  *******************************/
.fanCollectionsTitleRectangle
{
    /* Decorations */
    background-color: #ffddfb;
    padding: 10px 200px;
    text-align: center;
    text-decoration: none;
        /* Text */
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;    
        /* Border */
    border: 5px solid #000000;


    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
        /* Sizing */
    height: 9em;
    width: 11em;
}

/**************************** ______________________STRANGER THINGS COLLECTIONS PAGE_______________________  *******************************/
.strangerThingsTitleRectangle
{
    /* Decorations */
    background-color: #ffddfb;
    padding: 10px 200px;
    text-align: center;
    text-decoration: none;
        /* Text */
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;    
        /* Border */
    border: 5px solid #000000;


    /* Semantics */
    display: inline-block;
    margin: 0;
    transition-duration: 0.4s;
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
        /* Sizing */
    height: 7em;
    width: 11em;
}

/**************************** ______________________SHIRTS PAGE_______________________  *******************************/
.shirtPicture
{
    height: 15em;
    width: 10em;
}

/**************************** ______________________ABOUT PAGE_______________________  *******************************/
.insideSquares 
{
    display: inline-block;
    border: 5px solid #000000;
    padding: 1rem 1rem;
    vertical-align: middle;
    height: 500px;
    width: 500px;
}

.aboutRectangle 
{
    background-color: #ffddfb;
    padding: 40px 200px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0;
    transition-duration: 0.4s;
    cursor: pointer; 
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* Sizing */
    height: 800px;
    width: 1450px;
    /* Text */
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 25px;    
}

/**************************** ______________________CONTACT PAGE_______________________  *******************************/
input[type=text], select, textarea 
{
    /* Decorations */
    border: 3px solid #000000;
    font-family: 'Courier Prime', monospace;

    /* Semantics */
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

/* Submit button */
input[type=submit] 
{
    background-color: #ffddfb;
    font-family: 'Courier Prime', monospace;
    font-size: 15px;
    color: #000000;
    padding: 30px 200px;
    border: 3px solid #000000;
    cursor: pointer;
}

/* Submit button hover */
input[type=submit]:hover 
{
    background-color: #d8abc1;
}
  
.container 
{
    background-color: #ffddfb;
    padding: 5px;
}

.contactLabel
{
    color: #000000;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 20px; 
}

/************************* TEXT **************************/

h1
{
    color: #000000;
    text-align: center;
    font-family: 'Aboreto';
    font-size: 50px;
    padding: 50px;
}

h3
{
    color: #000000;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 25px;
}

h4
{
    color: #000000;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 20px;
}

h5
{
    color: #ffddfb;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 20px;
    background-color: #000000;
    padding: 40px; 
}

p
{
    padding: 10px;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 20px;
    color: #000000;
}

.description-primary
{
    padding: 10px;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 20px;
    color: #000000;
}

.description-secondary
{
    padding: 10px;
    text-align: center;
    font-family: 'Courier Prime', monospace;
    font-size: 15px;
    color: #000000;
}

/*  COLOR MENU 
Background pink:                #ffddfb
Hover:                          #d8abc1
Bright pink (active, extras):   #f064a8
Accents:                        #000000

UPDATE APPARENTLY
- Figure out how to get Ladychat back on, then link it
*/