@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* missing_alt_tags */
body[data-environment="development"] img[alt=""], body[data-environment="development"] img:not([alt]) {
  @apply border-4 border-red-700 border-dotted p-2; }



.landing-page-header {
  /* background-image: url("<%= image_url 'DavePics/hug_70.svg' %>"); */
  @apply p-5 text-white bg-sky-900 text-center bg-cover bg-scroll h-96 bg-center sm:h-96 opacity-90;
}

.intro-text{
  @apply  m-3 p-5 
}

.intro-lead-in{
  @apply text-2xl mb-4 italic sm:text-3xl font-semibold
}

.intro-heading{
  @apply text-4xl mb-20 mt-8 font-light sm:text-5xl
}

.tell-me-more-link{
  @apply text-xl font-light text-sky-100 hover:text-sky-500 underline sm:text-3xl
}

.intro-text-body{
  @apply p-10 font-light leading-relaxed indent-4 sm:text-lg
}

.skills-header{
  @apply text-center mb-10 
}
.skills-header h2{
  @apply text-3xl font-semibold text-sky-800 
}

.skills-header p{
  @apply text-xl font-semibold text-sky-700  align-middle
}


.skill-item{
  @apply m-2 p-4 bg-blue-100 md:w-56 md:font-light md:text-sm md:px-3 md:m-1
}

.skill-item-header{
  @apply inline-block align-middle w-full flex py-4 justify-center md:py-2
}

.skill-item-header h4{
  @apply font-semibold text-sky-700 pl-2 text-lg md:text-base
}

.skill-item-header svg{
  @apply text-sky-700 h-6 align-middle md:h-5
}

.skill-items{
  @apply flex-wrap flex self-center justify-center max-w-3xl mx-auto
}

.resume-header{
  @apply bg-yellow-600 p-5 h-44 text-white text-center bg-cover bg-scroll bg-center opacity-90;
}

.resume-contact{
  @apply text-sm w-32 -rotate-90 mt-10;
}

.resume-name{
  @apply text-white text-xl font-light 
}

.resume-phone h3{
  @apply text-green-600
}

.resume-email{
  @apply font-semibold text-sm;
}

.resume{
  @apply list-disc flex flex-col sm:flex-row;
}

li{
  @apply list-disc list-inside
}

.resume-sidebar{
  @apply w-1/2 p-4
  
}

.resume-button{

}

.resume-experience-sidebar{
  
}
.resume-a-bit-about-me-sidebar{
  @apply text-sm font-extralight px-4 pb-4 leading-snug w-screen sm:w-60
  
}

.resume-a-bit-about-me-sidebar h3{
  @apply text-lg font-medium italic
  
}

.field-circle{
  @apply float-right 
}

.resume-job{
  @apply text-sm font-semibold text-sky-700 sm:text-base md:text-lg 
}
.resume-employment-dates{
  @apply italic  text-xs font-light hidden text-slate-800
}

.resume-employer{
  @apply text-base sm:text-xl leading-tight mb-4 sm:mb-2 
}

.resume-job-location{
  @apply text-xs font-medium mx-4 sm:text-base whitespace-pre
}

.resume-experience-section{
  @apply p-4 
}

.resume-experience-section h2{
  @apply text-2xl bg-slate-200 text-sky-800 mb-3
}
.resume-job-experiences{
  @apply p-2 bg-slate-50 text-sm leading-snug my-2 
}

.resume-education-sidebar{
  @apply bg-slate-200 text-sm rounded-lg p-3 leading-snug w-screen max-w-lg  sm:w-60 
}



.resume-education-sidebar .institution{
  @apply font-bold my-1 ;
}


.resume-education-sidebar .credential{
  @apply font-light text-xs leading-tight;
}

.resume-education-sidebar .focus{
  @apply text-xs italic font-light text-sky-900;
}

.resume-education-sidebar h3{
  @apply font-medium text-xl text-sky-800;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */