/**** ----
CSS BASE FILE :: FOLLOWING THE ATOMIC DESIGN PRINCIPLES
theme name: TERASTUDIO MMXXIII
Author: TERASTUDIO team
Author URI: https://terastudio.pt/
Description: Responsive Wordpress theme, developed for your needs.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
developed for: [nome de cliente]
---- ****/

/*** --- ROOT ELEMENTS --- ***/
:root {
    --color-main: hsla(0, 0%, 0%, 1);
    --color-accent: hsla(329, 52%, 44%, 1);
    --f-main: "Sora", "Arial", sans-serif;
    --f-title: "Bebas Neue", "Arial", cursive;
    --f-bs-icons: "bootstrap-icons";

    --z-index--base: 333;
    --z-index--mid: 666;
    --z-index--top: 999;

    accent-color: var(--color-accent);
    word-break: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
*,
*::before,
*::after {
    position: relative;
    box-sizing: border-box;
}
body {
    background-color: white;
    font-family: var(--f-main);
    color: var(--color-main);
    font-size: 1em;
    line-height: 1.25;
    scroll-behavior: smooth;
}
::selection {
    background: yellow;
}

/* - SCROLLBAR - */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: hsla(0, 0%, 0%, 0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: hsla(161, 54%, 45%, 1);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: hsla(161, 54%, 30%, 1);
}
/* - end SCROLLBAR - */
/*** --- end ROOT ELEMENTS --- ***/

/*** --- ATOMS --- ***/
/*** --- Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. --- ***/

/** -- TYPOGRAPHY -- **/
h1,
h2 {
    font-family: var(--f-title);
}
h1 {
    font-size: 9.375em;
}
h2 {
    font-size: 4.375em;
}
h3,
h4,
h5,
h6 {
    font-family: var(--f-main);
    font-weight: var(--fw-main-semi);
}
h3 {
    font-size: 2.5em;
}
h4,
h5,
h6 {
    text-transform: uppercase;
}
p{
    width: 100%;
    /* max-width: 33em; */
}
.small,
small {
    font-size: 80%;
}
.lead {
    font-size: 1.25em;
}
/** -- end TYPOGRAPHY -- **/

/** -- FORMS -- **/
input:not([type="checkbox"], [type="radio"]) {
    display: block;
    padding: 20px 45px 18px;
    border-radius: 0;
}
input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"]) {
    border: 1px solid var(--color-main);
}
input:where([type="submit"], [type="reset"]) {
    text-transform: uppercase;
    background-color: white;
}
input::placeholder {
    font-size: 1.25rem;
    color: var(--fw-main-semi);
}
/** -- end FORMS -- **/

a:link{

}
a:visited {
}

a:hover,
a:focus {
    color: var(--color-accent);
}

a:active::after {
}

.btn-link {
    display: block;
    border: 1px solid var(--color-main);
    padding: 23px calc(17px + 30px + 1em) 17px;
    text-transform: uppercase;
    text-align: center;
    color: black;
    background-image: linear-gradient(0deg, black 0%, black 100%);
    background-size: 0;
    background-repeat: no-repeat;
    background-position: top left;
    transition: all 500ms ease-out;
}

.btn-link::after {
    content: "\F285";
    font-family: var(--f-bs-icons);
    position: absolute;
    right: 30px;
    bottom: 0;
    width: auto;
    height: 100%;
    background: none;
    display: flex;
    align-items: center;
}

.btn-link:hover {
    color: white;
    background-size: 100%;
}

img {
    width: 100%;
    height: auto;
}
figure {
    margin: 0;
}
/** -- OTHER ELEMENTS -- **/
hr {
    border: 0;
    height: 1px;
    background-color: black;
}

#page-top {
    padding: 0;
    margin: 0;
}
/** -- end OTHER ELEMENTS -- **/
/*** --- end ATOMS --- ***/

/*** --- MOLECULES --- ***/
/*** --- Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. --- ***/
hgroup {}
/** -- BREADCRUMBS -- **/
nav.breadcrumbs ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.4em;
    color: var(--color-accent);
}
nav.breadcrumbs li:not(:first-child)::before {
    content: "/ ";
}
nav.breadcrumbs a::after {
    width: 0;
    animation-fill-mode: both;
}
/** -- end BREADCRUMBS -- **/
/** -- BACK TO TOP -- **/
#btt-block {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    z-index: var(--z-index--mid);
    transition: all 500ms ease-out;
}
#btt-block a:hover i,
#btt-block a:focus i {
    color: white;
    transition: color 700ms ease-out;
}
#btt-block:where(.show, .bottom) {
    opacity: 1;
}
/** -- end BACK TO TOP -- **/
/*** --- end MOLECULES --- ***/

/*** --- ORGANISMS --- ***/
/*** --- Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. --- ***/

/** -- HEADER -- **/

/** -- end HEADER -- **/

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

/*** --- end ORGANISMS --- ***/

/*** --- TEMPLATES --- ***/
/*** --- Templates consist mostly of groups of organisms stitched together to form pages. --- ***/

/*** --- end TEMPLATES --- ***/

/*** --- PAGES --- ***/

/*** --- end PAGES --- ***/

/*** --- MEDIA QUERIES --- ***/
/*** --- According to Bootstrap breakpoints --- ***/

/** -- EXTRA SMALL -- **/
@media screen and (max-width: 575px) {
}
/** -- end EXTRA SMALL -- **/

/** -- SMALL -- **/
@media screen and (min-width: 576px) {
}
@media screen and (max-width: 767px) {
}
/** -- end SMALL -- **/

/** -- MEDIUM -- **/
@media screen and (min-width: 768px) {
}

@media screen and (max-width: 991px) {
}
/** -- end MEDIUM -- **/

/** -- LARGE -- **/
@media screen and (min-width: 992px) {
}

@media screen and (max-width: 1199px) {
}
/** -- end LARGE -- **/

/** -- EXTRA LARGE -- **/
@media screen and (min-width: 1200px) {
}

@media screen and (max-width: 1399px) {
}
/** -- end EXTRA LARGE -- **/

/** -- EXTRA EXTRA LARGE -- **/
@media screen and (min-width: 1400px) {
}
/** -- end EXTRA EXTRA LARGE -- **/

/*** --- end MEDIA QUERIES --- ***/