style.scss

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */
/* Professional and trustworthy styles */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */
@tailwind base;
//@tailwind components;
@tailwind utilities;

.subtext li {
  color: black;
}

/* ##################################  */
/* Global vars */
/* ##################################  */
$primary: #2C3E50; // Dark Blue
$secondary: #3498DB; // Light Blue
$accent: #E74C3C; // Red
$background: #ECF0F1; // Light Gray
$text: #3498DB; // Light Blue
$subtext: #3498DB; // Light Blue
$shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // box shadow
$pearl: #F0EAD6; // Define the pearl color
$font-family-sans: 'Roboto', sans-serif; // font
$border-color: #BDC3C7; // Gray
$border-width: 1px;
$border-radius: 4px;
// Animation Speeds
$transition-duration-fast: 150ms;
$transition-duration-medium: 300ms;
$transition-duration-slow: 500ms;
// Paddings
$padding-sm: .5rem;
$padding-md: 1rem;
$padding-lg: 2rem;


@mixin subtext {
  color: $subtext;
  font-style: italic;
}

/* ##################################  */
/* Tag Styles */
/* ##################################  */
/*
html {
  // causing weird scroll behavior on mobile
  // stops before the end of the page
  // disabling for now
  overscroll-behavior: none;
}
*/

body {
  font-family: $font-family-sans;
  background-color: $background;
  color: $text;
  @apply w-screen h-screen;
  //overscroll-behavior: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-family-sans;
  color: $primary;
  @apply font-bold text-secondary;
}

h1 {
  font-size: 1.5rem;
}

.text-lg {
  font-size: 1.5rem;
}

button {
  font-family: $font-family-sans;
  background-color: $primary;
  color: #FFFFFF; // White text
  padding: $padding-sm $padding-md;
  border-radius: $border-radius;
  border: $border-width solid $border-color;
  transition: background-color $transition-duration-medium;

  &:hover {
    background-color: $secondary;
  }
}

p {
  color: $text;
}

/* ##################################  */
/* Class styles */
/* ##################################  */
.main,
.main-right,
.main-left {
  box-shadow: $shadow;
}

.main-left,
.main-right {
  background-color: $primary;
  border-color: $border-color;
  border-width: $border-width;
  border-radius: $border-radius;
  padding: $padding-sm;
  animation: moveBackground 20s ease-in-out infinite;

  @keyframes moveBackground {
    0% {
      background-position: 0% 0%;
    }

    50% {
      background-position: 100% 100%;
    }

    100% {
      background-position: 0% 0%;
    }
  }

  opacity: 0.95; // Subtle transparency
}


.main {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
    linear-gradient(315deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-color: $secondary; // Fallback color
  border-color: $border-color;
  border-width: $border-width;
  border-radius: $border-radius;
  padding: $padding-sm;
  background-image: linear-gradient(135deg, #ECF0F1 25%, transparent 25%),
    linear-gradient(225deg, #ECF0F1 25%, transparent 25%),
    linear-gradient(45deg, #ECF0F1 25%, transparent 25%),
    linear-gradient(315deg, #ECF0F1 25%, #3498DB 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-color: $secondary; // Fallback color
  animation: moveBackground 20s ease-in-out infinite;
  opacity: 0.95; // Subtle transparency

  /*@apply w-screen h-screen grid grid-cols-1 md:grid-cols-3 gap-2 p-2 border-2;*/
  @apply w-screen h-screen flex flex-col md:flex-row gap-2 p-2 border-2;

}
.main-left {
  //@apply grid grid-rows-5 col-span-1 md:col-span-1 h-full border-2 flex justify-center;
  @apply flex-1 flex flex-col md:col-span-1 h-full border-2 gap-4 pb-4;

  .hello {
    @apply flex items-center justify-center;

    h1 {
      @apply text-8xl font-bold text-secondary;
    }
  }

  .photo {
    @apply ml-auto mr-auto w-1/2
  }

  .bullet {
    @apply row-span-1 flex items-center justify-center;
  }


  .about-me {
    @apply row-span-1 flex items-center justify-center;

    .about-list {
      @apply w-3/5;

      ul {
        @apply list-none;
        @include subtext;

        li {
          @apply flex items-center;

          img {
            @apply w-2 mr-2;
          }
        }
      }
    }
  }

  .links-and-location {
    @apply row-span-1 flex items-center justify-center;

    div {
      @apply w-3/5;

      div {
        @apply flex items-center w-full;

        img {
          @apply w-2 mr-2 inline-block w-4;
        }
        p{
          @apply flex-1;
        }
      }
    }
  }
}

.main-right {
  //@apply flex-1 col-span-1 md:col-span-2 h-full border-2 flex justify-center;

  h1 {
    @apply inline-block text-8xl font-bold text-secondary;
  }
}

/* ##################################  */
/* General utility styles */
/* ##################################  */
.heading-xl {
  font-size: 2.5rem;
  font-family: $font-family-sans;
  color: $pearl; // Use the pearl color
}

.text-secondary {
  color: $secondary;
}

.location-and-links {
  color: $text;
}