.button {
    user-select: none;
}

.button:hover {
    z-index: 1;
    cursor: pointer;
    box-shadow: 0 0 8px 4px var(--b-tint-50) !important;
}

.button:active {
    opacity: 0.5;
}

.text-button:hover {
    z-index: 1;
    cursor: pointer;
    text-decoration: underline;
}

.text-button:active {
    opacity: 0.5;
}
* {
    line-height: 1.4;
    color: lightgrey;
    font-family: Helvetica;
    scrollbar-width: thin;
    scrollbar-color: var(--b) var(--b-shade-90);
}

a:link {
    text-decoration: none;
}

a:hover {
    background-color: #5f90a5 !important;
}

a:active {
    background-color: #afc8d2 !important;
}

#link:hover {
    text-decoration: underline !important;
    background-color: transparent !important;
}

#link:active {
    background-color: transparent !important;
}

#search:hover {
    background-color: transparent !important;
    opacity: 0.7;
}

#search:active {
    background-color: transparent !important;
    opacity: 0.5;
}

#donate:hover {
    opacity: 0.9;
}

#donate:active {
    border: 4px solid white !important;
}



#header:hover {
    text-decoration: underline !important;
    background-color: transparent !important;
    color: white !important;
    cursor: pointer;
}

#header:active {
    background-color: transparent !important;
    color: lightgrey !important;
    cursor: pointer;
}

h1 {
    font-size: var(--h1-font-size);
    font-weight: bolder;
}

h2 {
    font-size: var(--h2-font-size);
    font-weight: bolder;
}

h6 {
    font-size: var(--default-font-size);
    font-weight: bold;
    opacity: 0.5;
    margin: 0px
}

ul {
    margin-top: 8px;
    margin-bottom: 0px;
}

body {
    color: black;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
}

p {
    width: 100%;
    margin: 0;
}

button {
    background-color: var(--blue);
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    color: white;
    border-radius: 4px;
    border: 0;
    padding: 8px;
    text-transform: uppercase;
}

button:hover {
    opacity: 0.7;
}

button:active {
    opacity: 0.5;
}

input {
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    border-radius: 4px;
    border: 1px solid lightgray;
    background-color: var(--b-shade-50);
    color: lightgray;
    padding: 8px;
    text-align: left;
}

textarea {
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    border: 1px solid lightgray;
    background-color: var(--b-shade-50);
    color: lightgray;
    border-radius: 4px;
    resize: none;
    padding: 8px;
}

textarea::placeholder {
    color: lightgrey;
    opacity: 0.8;
}

select {
    border: 1px solid lightgray;
    background-color: var(--b-shade-50);
    color: lightgray;
}

textarea:focus-visible {
    border: 1px solid var(--b);
    outline: 1px solid var(--b);
}

input:focus-visible {
    border: 1px solid var(--b);
    outline: 1px solid var(--b);
}

select {
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    border-radius: 4px;
    border: 1px solid lightgray;
    background-color: var(--background-reading-color);
    padding: 8px;
    text-align: left;
}


label {
    font-family: var(--default-font-family) !important;
    font-size: var(--label-default-font-size) !important;
}

path {
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
}
.page-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.section-style {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
}

@media (max-width: 700px) {
    .flex-direction {
        flex-direction: column;
    }
}

@media (min-width: 700px) {
    .flex-direction {
        flex-direction: row;
    }
}



@media (min-width: 700px) {
    .flex-try-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .flex-try-row {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start;
    }
}

@media (min-width: 700px) {
    .header-style {
        height: 64px;
    }
}

@media (max-width: 700px) {
    .header-style {
        align-items: center;
    }
}

.margin-top {
    margin-top: 16px;
}

.top-left-corner-4px {
    border-radius: 4px 0px 0px 0px;
}

.top-right-corner-4px {
    border-radius: 0px 4px 0px 0px;
}
.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-start {
    align-items: start;
    justify-content: start;
}

.flex-start-center {
    align-items: center;
    justify-content: start;
}

.flex-center-start {
    align-items: start;
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flex-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.w-100 {
    width: 100;
}

.gap-16 {
    gap: 16px;
}
:root {
    --default-font-family: Helvetica;

    --default-font-size: 22px;
    --smaller-font-size: 18px;
    --smallest-font-size: 14px;

    --code-font-size: 12px;

    --large: var(--default-font-size);
    --medium: var(--smaller-font-size);
    --small: var(--smallest-font-size);

    /* Titles */
    --h1-font-size: 35px;
    --h2-font-size: 30px;
    --subtitle-font-size: var(--medium);
    
    /* Component font sizes*/
    --icon-font-size: 24px;
    --search-icon-font-size: 32px;
    --label-default-font-size: 16px;

    --blog-date-font-size: var(--small);
    --donation-font-size: var(--medium);

    --info-contact-font-size: var(--medium);
    --header-title-font-size: var(--medium);
}
.loader {
  width: 220px;
  /* control the size */
  aspect-ratio: 1;
  display: grid;
  mask: conic-gradient(from 22deg, #0003, #000);
  animation: load 1s steps(8) infinite;
}

.loader,
.loader:before {
  --_g: linear-gradient(var(--green) 0 0) 50%;
  /* update the color here */
  background:
    var(--_g)/34% 8% space no-repeat,
    var(--_g)/8% 34% no-repeat space;
}

.loader:before {
  content: "";
  transform: rotate(45deg);
}

@keyframes load {
  to {
    transform: rotate(1turn);
  }
}
:root {
    --blue: #87ceeb;
    --red: #d687eb;
    --orange: #eba487;
    --green: #9ceb87;

    --blue-dark: #446776;
    --red-dark: #6c4476;
    --orange-dark: #765344;
    --green-dark: #4e7644;

    /* 70% */
    /* --main-color-blue: #dbf0f9;
    --main-color-red: #f3dbf9;
    --main-color-orange: #f9e4db; */
    --main-color-green: #e1f9db;

    /* 80% */
    /* --lighter-color-blue: #e7f5fb;
    --lighter-color-red: #f7e7fb;
    --lighter-color-orange: #fbede7;
    --lighter-color-green: #ebfbe7; */

    --header-background-color: #1b292f;
    --search-view-background-color: var(--header-background-color);
    --bottom-background-color: var(--header-background-color);

    --background-color: #f9fdfe;
    --background-reading-color: var(--background-color);
    --light-reading-color: var(--background-reading-color);

    --linked-in-blue-color: #0072b1;

    --link-hover-color: #5f90a5;
    --link-active-color: #afc8d2;

    --donate-background-color: #ffc423;
    --donate-font-color: #121661;

    --success: #2E7D32;
    --error: #D32F2F;
}