/* ----------  */
/* VARIABLES. */
/* ----------  */

:root {
    /* Colors. */
    --blank: #fff;
    --text: #000;
    --background: #b9eab3;

    /* Sizes. */
    --max-width: 900px;
    --website-size: 800px;
    --header-height: 250px;

    --font-size: 1em;
    --header-font-size: 2.5em;

    /* Fonts. */
    --base-font: "Times New Roman", helvetica, Arial, sans-serif;
    --title-font: ;
    --header-font: ;
    --body-font: ;

    /* Text styles */
    --bold: ;
    --italics: ;
    --blockquote: ;
    --accent: #de2e72;
    --accent-dark: #460320;
    --accent-light: #ffb6c0;
    --font-on-accent: ;
    --links: ;
    --links-on-hover: ;

    /* Border styles. */
    --borders-normal: lightgray 2px solid;
    --borders-thick: lightgrey 5px solid;
    --borders-thin: lightgrey 1px dotted;

    /* Misc. styling. */
    --spacing: 15px;
    --border-radius: 4px;

    --halfspacing: calc(var(--spacing) / 2);
    --doublespacing: calc(var(--spacing) * 2)
    
    --marquee-duration: 30s;


    @media (prefers-color-scheme: dark) {}
}

/* ----------  */
/* WHOLE PAGE. */
/* ----------  */

/* This affects everything and every single element on this page. */
* {
    box-sizing: border-box;
    scrollbar-color: var(--accent);
}

/* This affects the body of the page, so basically everything visible that I add! */
body {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: var(--spacing) 5%;
    background-image: linear-gradient(rgba(255, 255, 255, 0), var(--background)), url("/Images/background_green_001.png");
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--basefont), sans-serif;
    font-size: var(--text-size);
    line-height: 1.5em;
}

/* This is the container for all the page content I care about and want a little background on, */
.container {
  margin-top: 20px;
  width: 95%;
  background: var(--blank);
  border: var(--borders-thick);
  border-radius: 7px;
  box-shadow: 0px 8px 16px 0px rgba(67, 7, 7, 0.2);
}

/* ----------  */
/* THE BASICS. */
/* ----------  */

p {
  font-family: var(--base-font);
  font-size: var(--font-size);
}

h1 {
  font-size: 2.5em;
  text-align: center;
  color: var(--accent);
  font-family: var(--title-font);
}

h2 {
  background-color: var(--accent);
  color: var(--blank);
  font-family: Butler;
  padding: var(--halfspacing);
}

h3 {
  background-color: var(--accent-light);
  color: var(--accent);
  padding: var(--halfspacing);
}

/* ----------------------  */
/* STICKY NAV / SEARCHBAR. */
/* ----------------------  */

#sticky-nav {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding: var(--halfspacing);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--blank);
    z-index: 50;
}

#SEARCHBAR {
  /* The main search bar visual element. This is the bar itself with the placeholder text and the little icon.*/
  padding: 2px;
  position: relative;
  display: inline-block;
  margin: 2px;
  margin-bottom: 3px;
  font-size: 17px;
  height: 20px;
}
#SEARCHBAR input[type=text] {
    width: 300px;
}

.dropdown-content {
  /*The style of all the possible list elements that can drop down in the search bar as you're typing. This will also be the look for text in the dropdown that hasn't been assigned a link yet.*/
  display: none;
  position: absolute;
  border: 2px grey;
  background-color: rgb(255, 255, 255);
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.dropdown-content a {
  /*Links within the searchbar dropdown content. These should be the same color as regular links in my opinion.*/
  color: rgb(107, 8, 25);
  padding: 7px;
  display: block;
}

.dropdown-content a:hover {
  /*Links within the searchbar dropdown content when you hover on them with your mouse. Only the background element should change here, really.*/
  background-color: rgb(241, 241, 241);
  transition: 0.2s;
}

#SEARCHBAR:hover .dropdown-content {
  /*Shows the full list you can filter upon hovering over the menu with your mouse.*/
  display: block;
}

/* ---------------  */
/* HEADER / TO-TOP. */
/* ---------------  */

#to-top a {
    position: fixed;
    right: var(--spacing);
    bottom: var(--spacing);
    font-size: 50px;
    text-decoration: none;
    color: var(--accent);
}

header {
  padding: var(--spacing);
  height: var(--header-height);
  width: 100%;
  background-image: url(/Images/Searching_For_A_Production_Know-How.png);
  background-position: 50%;
  background-size: cover;
  border-bottom: var(--borders-thick)
}

/* -----------------  */
/* QUICK LINKS / NAV. */
/* -----------------  */

nav {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  margin: var(--spacing);
  padding: var(--spacing);
  align-content: center;
  justify-content: space-between;
}

nav a {
  width: 20%;
  max-height: 30px;
  background-color: var(--accent-light);
  color: var(--accent-dark);
  text-align: center;
  border: var(--borders-thin);
}

nav a:hover {
  background-color: var(--accent);
}

/* ------  */
/* ASIDE. */
/* -----  */


/* ------------  */
/* MAIN CONTENT. */
/* ------------  */

section {
  text-indent: 20px;
  padding: var(--spacing);
  background-color: white;
}

.update-box {
    margin: var(--halfspacing);
    padding: 2px;
    background-image: url(/Images/background_pinkdots.png);
    border: 2px var(--accent) solid;
    border-radius: 7px;
}

/* -----  */
/* FOOTER */
/* -----  */

footer {
   height: 50px;
    width: 100%;
    display: block;
    text-align: center;
    background-color: lightgrey;
    font-size: .9em;
    margin: var(--spacing) auto;
}


/* ------  */
/* STYLING */
/* ------  */


/* --------------  */
/* HELPER CLASSES. */
/* --------------  */

.hide-desktop {
  display: none;
}

/* Center any item. */
.center-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

/* --------------  */
/* IMAGE SPECIFIC. */
/* --------------  */
#site-icon {
  position: relative;
  left: 20px;
  top: 30px;
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 0.2s ease;
  -webkit-mask-image: url(/Images/mask_heart_001.png);
  -webkit-mask-size: 250%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

#site-icon:hover {
        -webkit-mask-size: 100%;
        transform: scale(1.5) rotate(5deg);
        transition: 0.2s;
    }

@font-face {
    font-family: Butler;
    src: url(/Fonts/Butler_Regular.otf);
}

@font-face {
    font-family: Hearts;
    src: url(/Fonts/heartfont.ttf);
}

/* ---------------------  */
/* MOBILE RESPONSIVENESS. */
/* ---------------------  */

@media (min-width: 800px) {}

@media (max-width: 800px) {
  #site-icon {
    visibility: hidden;
  }

  .hide-desktop {
        display: block !important;
    }

    .hide-mobile {
        display: none;
    }
}