/*
 * GENERIC STYLING FOR ALL HTMLS PAGES.
 * Author: Rafael D.
 * Last Modified: 1/5/2024
 *
*/

/* Custom web-font configurations */
@font-face {
    font-family: 'Mr. Darcy';
    src: url('./Mr\ Darcy\ W01\ Regular.ttf');
}

/* Universal styling for all pages. */
html
{
    background-color: rgb(220, 220, 219);
    border-left: 0.4vw solid black;
    border-right: 0.4vw solid black;
    border-bottom: 0.4vw solid black;
}
body
{
    /*border: 0.2vw solid red;*/
    background-color: #c6b5a1;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
}
/* Applies to every element in the body. BE CAREFUL WHEN CHANGING! */
body *
{
    font-family: inherit;
}
img
{
    object-fit: cover;
    object-position: 0% 10%;
}
hr
{
    width: 20vw;
    height: 2px;
    border-radius: 30%;
    color: brown;
    background-color: brown;
}
button
{
    cursor: pointer;
}
 /* Represents large central heading text. */
.largeCenteredHeader
{
    border: 0.2vw solid rgb(215, 215, 212);
    border-radius: 13%;
    background-color: rgb(215, 214, 141);
    color: rgb(40, 77, 108);
    margin: auto;
    margin-top: 1.5vh;
    margin-bottom: 0.5vh;
    padding: 0.5vw 1vw;
}
#logoLink > h1.lora-logo {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
/* Represents a tag formatted organically. */
.formattedLink
{
    border: 0.2vw solid rgb(138, 137, 90);
    background-color: rgb(215, 214, 141);
    width: fit-content;
    padding: 0.8vw 1vw;
    text-decoration: none;
}
.formattedLink:hover
{
    background-color: rgb(138, 137, 90);
    color: white;
    font-weight: bold;
}
.hiddenElement
{
    display: none;
}
/* The following ID's can be added to an element to make it disappear for specific screen sizes.*/
@media screen and (max-width: 840px)
{
    .vanishHalf
    {
        border: 0.2vw solid green;
        display: none !important;
    }
}

/* FRONT POP-UP WINDOW STYLING.

    Class Usage:
        + CLASS: .frontWindow
            + ID: #closeButton
                + <button>
            + <div>, or some other grouping element.
    Represents a pop up window which takes up the entire
    viewport and appears in front of all other elements
    in the DOM.
*/
.frontWindow
{
    /*border: 0.2vw solid blue;*/
    background: rgba(80, 80, 80, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0vw;
    top: 0vw;
    z-index: 100;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.frontWindow > #closeButton
{
    /*border: 0.2vw solid red;*/
    margin-left: 55vw;
    margin-top: 15vh;
}
.frontWindow > #closeButton > button
{
    border-radius: 80%;
    padding: 0.8vw 1vw;
    background-color: lightcoral;
    font-weight: bolder;
}
.frontWindow > #closeButton > button:hover
{
    background-color: rgb(132, 70, 70);
    color: white;
}
.frontWindow > :not(#closeButton)
{
    margin-top: 8vh;
}

/* Testimony Carousel*/

.testimony-container{
    display: flex; 
    flex-direction: row;
    position: relative;
    margin-top: 1vw;
    margin-bottom: 2vw;
    margin-top: 0px;
    justify-content: center;
    font-family: 'Mr. Darcy';
}
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: rgb(180, 19, 19);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0vw;
    border-radius: 3px 0 0 3px;
  }

   /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next {font-size: 11px}
  }


/* Universal components; may/not be used in all pages. */
/* CAROUSEL COMPONENT STYLING.

    Class Usage:
        + CLASS: unicarousel
            + <nav>
                + CLASS: slidebuttons
            + CLASS: slideclass

    Any component with the "unicarousel" class attribute will contain
    a navigational menu where site viewers can click through the slides.
    In order for slide buttons to be styled using this set, the buttons
    must each be assigned the "slidebuttons" class. There should also be
    a section where slides are alternated and shown using the
    "slideclass" attribute. Additionally, the html file with the
    carousel must link to the "carouselScript.js" scripting file in the
    head.
*/
.unicarousel
{
    /*border: 0.2vw solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.unicarousel > nav
{
    /*border: 0.2vw solid blue;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 10vw;
    max-height: 120px;
}
.slidebuttons
{
    font-size: large;
    /* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    border-radius: 50%;
    border: 0;
    background-color: #222121;
    color: cornsilk;
    width: 10vw;
    max-width: 120px;
    height: 90%;
    opacity: 0.7;
    margin-left: -0.8vw;
    transition: opacity 0.5s, background-color 0.3s, color 0.3s, font-size 0.3s, width 0.5s, border-radius 0.5s;
}
.slidebuttons:hover
{
    opacity: 1.0;
    background-color: cornsilk;
    color: #222121;
    font-size: larger;
    width: 12vw;
    z-index: 5;
    font-weight: bold;
    border-radius: 48%;
}
.slidebuttons:active
{
    background-color: brown;
    color: white;
}
.unicarousel > .slideclass
{
    /*border: 0.2vw solid darkgreen;*/
    border: 1vw solid black;
    margin: auto;
    height: 65vh;
    width: 80%;
    max-width: 1000px;
}
.unicarousel > .slideclass > img
{
    height: 100%;
    width: 100%;
}
@media screen and (max-width: 915px)
{
    .unicarousel
    {
       /* border: 0.2vw solid indigo;*/
        flex-direction: row;
        align-items: center;
        height: 450px;
    }
    .unicarousel > :not(.slideclass):not(nav) /* Get rid of everything except for the navigation and the images. */
    {
        /*border: 0.2vw solid red;*/
        display: none;
    }
    .unicarousel > nav
    {
        border-top: 1vw solid black;
        border-bottom: 1vw solid black;
        border-right: 1vw solid black;
        display: flex;
        flex-direction: column;
        height: fit-content;
        height: 100%;
        max-height: 1000px;
        width: 20%;
        box-sizing: border-box;
    }
    .unicarousel > nav > .slidebuttons
    {
        /*border: 0.2vw solid blue;*/
        border-radius: 0%;
        margin: 0;
        width: 100%;
        max-width: 1000px;
    }
    .unicarousel > .slideclass
    {
        border-right: none;
        margin: 0;
        height: 100%;
        width: 80%;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 530px)
{
    .unicarousel > nav
    {
        display: none;
    }
    .unicarousel > .slideclass
    {
        width: 100%;
        height: 70%;
        border-right: 1vw solid black;
    }
}

/* LARGE WINDOW COMPONENT STYLING.

    Class Usage:
        + CLASS: largewindow
            + <img/>
            + <div>

    The "largewindow" class is used to represent a component that takes
    up the width of nearly the entire viewport, (around 70%.) This
    component is used to represent an individual section of a page with
    semi-related/individual content relative to the items around it.
*/
.largewindow
{
    border: 1vw solid black;
    display: flex;
    width: 80vw;
    height: 40vw;
    max-height: 600px;
    margin: auto;
}
.largewindow:first-child
{
    /*border: 0.2vw solid blue;*/
    width: 70%;
}
.largewindow > div
{
    /*border: 0.2vw solid purple;*/
    position: relative;
    display: flex;
    flex-direction: column;
    width: 30%;
}

/* SECTION HEADER COMPONENT STYLING.

    Class Usage:
        + CLASS: sectionhead
            + <h1>, or some other textual component
            + <hr/>

    The section header component is typically used to introduce a new
    section of a document or unrelated content relative to other
    content around it. By default, is horizontally-centered in the
    middle of the document.
*/
.sectionhead
{
    /*border: 0.2vw solid red;*/
    margin-top: 2vw;
    margin-bottom: 2vw;
    display: flex;
    flex-direction: column;
}
.sectionhead > *
{
    /*border: 0.2vw solid blue;*/
    width: 30vw;
    margin: auto;
}
.sectionhead :not(hr)
{
    /*border: 0.2vw solid green;*/
    text-align: center;
}

/* MULTI-WINDOW COMPONENT SYLING.

    Class Usage:
        + CLASS: multiwindow
            + <div>, or some other grouping component

    A multi-window is used when multiple semi-related blocks of
    content need to be displayed. Each block carry even amounts
    of emphasis with this styling, with the intent of perfect balance.
    Although generic divs are recommended, any grouping component can
    be used as long as they are direct children of the "multiwindow"
    class, (minimum of 3 recommended, maximum of 5!)
*/
.multiwindow
{
    /*border: 0.2vw solid red;*/
    display: flex;
    justify-content: center;
}
.multiwindow > *
{
    /*border: 0.2vw solid blue;*/
    border-top: 0.3vw solid black;
    border-bottom: 0.3vw solid black;
    padding: 5%;
    margin-bottom: 5%;
    width: 20%;
}

#hoverwindow {
    height: 30vw;
    min-height: 300px;
}

/* INTERACTIVE WINDOW STYLING.

    Class Usage:
        + <div>, or some other grouping component
            + CLASS: interwindow
                + Some element to be displayed upon hover, (i.e. img)

    An interactive window represents an area of the page which
    should show some hidden  element when hovered over by the user.
    Any component with the ".interwindow" class must
    be contained within some grouping parent component which
    is used to specify the size/padding/margins/etc...
*/
.interwindow
{
    /*border: 0.2vw solid green;*/
    text-align: center;
    text-decoration: none;
    padding: 0;
    color: red;
    max-width: 30vw;
    min-width: 30vw;
}
.interwindow:hover
{
    color: cornsilk;
}
.interwindow > *
{
    /*border: 0.2vw solid red;*/
    background-color: rgba(0, 0, 0, 0.5);
    color: inherit;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* TINY IMAGE STYLING.

    Class Usage:
        + <img class="tinyimg" />

    Represents a miniaturized version of an image, with
    proper scaling.
*/
.tinyimg
{
    /*border: 0.2vw solid blue;*/
    width: 2rem;
    max-width: 45px;
}

/* ORGANIC FORM STYLING.

    Class Usage:
        + <form class="organicForm">
            + <div class="formEntry">...
                + <label>
                + <input>

            + <div class="submitField">
                <button>

    Represents a form styled to use natural colors.
*/
.organicForm
{
    /*border: 0.2vw solid red;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50vw;
    height: fit-content;
    margin: auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
}
.organicForm i
{
    color: red;
}
.organicForm > .formEntry
{
    /*border: 0.2vw solid blue;*/
    width: 70%;
    margin-bottom: 1vw;
    text-align: center;
}
.organicForm > .formEntry > label
{
    border: 0.17vw solid rgb(40, 77, 108);
    border-radius: 10%;
    background-color: rgb(63, 124, 173);
    color: white;
    font-weight: bold;
    padding: 0.5vw 0.5vw;
}
.organicForm > .formEntry > input
{
    border: 0.17vw solid rgb(40, 77, 108);
}
.organicForm > .submitField
{
    /*border: 0.2vw solid green;*/
    width: 40%;
    text-align: center;
    font-weight: bold;
}
.organicForm > .submitField > button
{
    font-family: inherit;
    font-weight: inherit;
    padding: 1vw 2vw;
}

/* HEADER BOX STYLING.

    Class Usage:
        + CLASS: box
            + CLASS: bio

    Represents a large, page-wide box with some text short inside.
*/
.box {
    /*border: 1px solid  black;*/
    /* border-top: 0.2vw solid black;
    border-bottom: 0.2vw solid black; */
    display: flex;
    align-items: center;
    text-align: center;
    
    padding: 10vw;
    max-height: 200px;
    /*background: rgb(235, 228, 228);*/
    background-color: #201f1e;   
    background-repeat: no-repeat;
    background-size: cover;
}
.box > .bio {
    border: 0.1vw solid rgb(8, 8, 18);
    width: 90%;
    margin: 5%;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    background-color: white;
}

/* Custom popup window styling */

.customAlertBox {
    box-sizing: border-box;
    border: 0.2vw solid green;
    border-radius: 8px;
    background-color: azure;
    padding: 0px 10px;
    animation-name: popAlert;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes popAlert {
    0% {top: 0px;}
    100% {top: 120px;}
}

.checkmarkIcon > div:first-child {
    /* border: 0.2vw solid red; */
    animation-name: checkP1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.checkmarkIcon > div:last-child {
    /* border: 0.2vw solid blue; */
    width: 0px;
    animation-name: checkP2;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes checkP1 {
    0% {min-width: 0px; max-width: 0px;}
    50% {min-width: 20px; max-width: 20px;}
    100% {min-width: 20px; max-width: 20px;}
}
@keyframes checkP2 {
    0% {min-width: 0px; min-height: 10px;}
    35% {min-width: 0px; min-height: 10px;}
    60% {min-width: 50px; min-height: 10px;}
}