@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');




/* 
=================
RESETS
=================
*/


/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    3. Allow percentage-based heights in the application
  */
  html, body {
    height: 100%;
  }
  /*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    6. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    7. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    8. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    9. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }








:root {
    /* main-background-color,  */
    --main-bg-color: #ffffff;

    /* icons, synonyms-words, switch-on, bullet, drop-shadow*/
    --accent-color: #a445ed;
    --search-bg-color: #f4f4f4;

    /* ALL TEXT COLORS */
    /* font-selection, input-text, main-word, noun-text, verb-heading, verb-meaning-text, definitions-text, source-text, search-text, search-info-text, search-placeholder */
    --text-color-1: #2d2d2d;

    /* meaning heading, synonyms-heading, verb-meaning-sentence, verb-meaning-heading, source-heading,search-more-info-text   */
    --text-color-2: #757575;

    /* RULER */
    --ruler-1-color: #e9e9e9;
    --ruler-2-color: #979797;


    /* ERROR */
    --error-color: #ff5252;

    /* SHADOW */
    --shadow: #979797;


    --moon-icon-color: #2d2d2d;


    /* FONT */
    --fs-heading-L-64: 4rem;
    --line-height-L-77: 77px;

    --fs-heading-M: 1.5rem;
    --line-height-M: 29px;

    --fs-heading-S: 1.25rem;
    --line-height-S: 24px;

    --fs-body-M: 1.125rem;
    --body-line-height: 24px;

    --fs-body-S: 0.875rem;
    --body-line-height: 17px;

    --body-font-family: 'Inter', sans-serif;

    --list-font-sans: 'Inter', sans-serif;
    --list-font-serif: 'Lora',serif;
    --list-font-mono: 'Inconsolata', mono;
   

    
}

body.dark {
    --main-bg-color:#050505;
    --accent-color: #a445ed;
    --search-bg-color: #1f1f1f;
    --search-bg-color-dark: #1f1f1f;

    --text-color-1: #ffffff;
    --text-color-2: #757575;

    --ruler-1-color: #3a3a3a;
    --ruler-2-color: #3a3a3a;

    --error-color: #ff5252;

    --shadow:#a445ed;

    --moon-icon-color: #a445ed;

}





body.body-font {
    font-family: var(--body-font-family);
    background-color: var(--main-bg-color);
    font-size: var(--fs-body-M);
    
}



h1 {
    color: var(--text-color-1);
    font-size: 1.25rem;
font-size: clamp(1.25rem, 0.2816901408450705rem + 4.131455399061033vw, 4rem);
}

li {
    color: var(--text-color-1);
}



.list-font__san-serif {
    font-family: var(--list-font-sans);
}

.list-font__serif {
    font-family: var(--list-font-serif);
}

.list-font__mono {
    font-family: var(--list-font-mono);
} 


/* .list-font {
    font-family: var(--list);
} */


.wrapper {
    width: calc(100vw - 48px);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 37.5em){
    .wrapper {
        width: calc(100vw - 80px);
    }
}


@media (min-width: 62.5em){
    .wrapper {
        max-width: 736px;
    }
}






/* 
===========
#HEADER
===========
*/

.header-container {
    display: flex;
    margin-block-start: 24px;
}

.switch-theme-icon-container {
    display: flex;
    align-items: end;
}

.theme-icon {
    width: 20px;
    height: 20px;
    display: block;
    align-self: center;
    margin-left: 12px;
}




@media (min-width: 32.5em) {
    .logo {
        width: 32px;
        height: 36.5px;
    }

    .header-container {
        margin-block-start: 60px;
    }
}

@media (min-width: 62.5em) {
    .header-container {
        margin-block-start: 58px;
    }
}

/* 
----------
#DROPDOWN
----------
*/
.dropdown, 
.menu {
    width: 120px;
}


.dropdown {
    display: flex;
    color: var(--text-color-1);
    font-size: 0.875rem;
    position: relative;
    margin-left: auto;
    padding-right: 26px;
    align-items: center;
    border-right: 1px solid var(--ruler-1-color);
  }


  .select {
    position: relative;
    display:flex;
     width: 100%;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .selected {
    width: 120px;
  }

  .select > .arrow-icon-container {
    margin-left: auto;
  }


  .menu {
    width: 183px;
    position: absolute;
    top: 55px;
    right: 26px;
    display: none;
    padding: 24px;
    box-shadow: 0px 0px 30px var(--shadow);
    border-radius: 5px;
    z-index: 10;
    transition: opacity .3s ease-in;
  }

  .menu > li {
    margin-block-end: 16px;
    text-decoration: none;
    cursor: pointer;
  }

  .menu > li:hover {
    color: var(--accent-color);
  }

 
  

  .arrow-icon-container {
    display: inline-block;
  }

  .arrow-icon {
    margin-left: 16px;
    transition: transform .3s ease-in;
  }

  .show {
    display: block;
    background-color: var(--main-bg-color);
  }

 #hide {
    display: none;
  }


   .rotate { 
    transform: rotate(180deg);
  } 

  @media (min-width: 37.5em){
    .select {
        width: 95px;
    }
    .selected {
        width: 160px;
    }

   
  }


  @media (min-width: 62.5em){
    .select {
        width: 100px;
    }
    .selected {
        width: 180px;
        font-size: 1.05rem;
    }
   
  }

  /* 
  ====================
  END OF DROPDOWN STYLE
  =====================
  */



  /* 
  =================
  #SWITCH STYLE
  =================
  */
  
  .switch {
    display: flex;
    border-radius: 9999px;
    height: 20px;
    width: 40px;
}

.switch__input {
   
    display: none;
}

.switch__circle {
    border-radius: 9999px;
    width: 20px;
    background-color: #fff;
}

.switch--on {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    justify-content: flex-end;
}

.switch--off {
    background-color: var(--text-color-2);
    border: 1px solid var(--text-color-2);
}

.switch--off .switch__circle {
    border: 1px solid var(--text-color-2);
}

.switch-theme-icon-container {
    display: flex;
    align-items: center;
    padding-left: 26px;
}


/* 
===================
END OF SWITCH STYLE
===================
*/





/* 
=========
#INPUT SECTION
========

*/

.input-section {
    margin-block-start: 24px;
}

.input-container {
    position: relative;
}

.word-input {
    padding: 20px 24px;
    color: var(--text-color-1);
    width: 100%;
    height: 48px;
    border-radius: 16px;
    outline: none;
    background-color: var(--search-bg-color);
    border: 1px solid var(--search-bg-color);
}

.word-input:focus {
    border: 1px solid var(--accent-color);
}

.search-icon {
    position: absolute;
    top: 16px;
    right: 16.45px;
    cursor: pointer;
}

.no-input{
    display: none;
    color: var(--error-color);
}

.no-input.show-msg {
    display: block;
}

.word-input.input-error {
    border: 1px solid var(--error-color);
}

@media (min-width: 37.5em) {
    .input-section {
        margin-block-start: 52px;
    }

    .word-input {
        height: 64px;
    }

    .search-icon {
        top: 24px;
    }
}




/* 
==============
#WORD SECTION
==============
*/

.word {
   margin-block-start: 23px;
   margin-block-end: 7px;
}

.word-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transcript {
    color: var(--accent-color);
}

.audio-box {
    display: flex;
    width: 48px;
    margin-block-start: 23px;
    cursor: pointer;
}

svg.audio__img:hover circle {
    opacity: 1;
}

.audio__img:hover path {
    fill: #fff;
}


@media (min-width: 37.5em){
    .word {
        font-size: 4rem;
        margin-block-end: 5px;
    }

    .audio-box {
        width: 75px;
    }

    .transcript{
        /* make this dynamic later */
        font-size: 24px;
    }
}


/* 
====================
NOUN-MEANING SECTION
====================
*/

.ruler__container {
    display: flex;
    align-items: center;
    margin-block-start: 32px;
    margin-block-end: 32px;
}

.noun-verb__heading {
    color: var(--text-color-1);
    font-size: 1.5rem;
}

.meaning__title {
    margin-block-end: 17px;
}

hr {
    outline: none;
    flex: 1;
    margin-left: 23px;
    border: 1px solid var(--ruler-1-color);
    
}

ul {
    list-style: none;
}

.noun-meaning-section ul li::before{
    content: "\2022 ";  
    color: var(--accent-color);
    font-weight: bold; 
    display: inline-block; 
    width: 1em; 
    margin-left: -1em; 
}

li, p {
    font-size: 0.875rem;
font-size: clamp(0.875rem, 0.7869718309859155rem + 0.3755868544600939vw, 1.125rem);
}

.meaning__item:not(:nth-last-of-type()) {
    margin-block-end: 13px;
}

.meaning__title, 
.synonyms__title {
    color: var(--text-color-2);
}

.synonyms {
    display: flex;
    margin-top: 24px;
}

.synonyms__words {
    margin-left: 24px;
    color: var(--accent-color);
    font-weight: bold;

}

.definition-example {
    color: var(--text-color-2);
}


@media (min-width: 37.5em) {
    .ruler__container {
        margin-block-start: 42px;
        margin-block-end: 43px;
    }

    .synonyms {
        display: flex;
        margin-top: 40px;
    }
    
    .synonyms__words {
        margin-left: 40px;
    }

    .meaning__title {
        margin-block-end: 27px;
    }
    
}




@media (min-width: 62.5em) {
    .ruler__container {
        margin-block-start: 40px;
        margin-block-end: 40px;
    }

    .meaning__title {
        margin-block-end: 24px;
    }
    
}


.source-section {
    margin-block-start: 32px;
    padding-block-start: 24px;
    border-top: 1px solid var(--ruler-1-color);
}

/* .source__title {
    width: 100%;
} */

.source__link {
    display: flex;
    align-items: baseline;
}

.source__link a{
   color: var(--text-color-1);
}

.source__title {
    display: inline-block;
    color: var(--text-color-2);
    border-bottom: 1px solid var(--text-color-2);
}

.source {
    margin-right: 15px;
}


@media (min-width: 37.5em) {
    .source-section{
        display: flex;
    }

    .source__title {
        margin-right: 25px;
    }
}


/* 
==================
#NOT-FOUND SECTION
==================
*/


.not-found-section {
    margin-block-start: 132px;
    text-align: center;
}

.not-found__msg {
    color: var(--text-color-2);
    margin-block-start: 44px;
    margin-block-end: 24px;
    font-weight: bold;
}

.not-found__info {
    color: var(--text-color-2);
}

.emoji {
    width: 100%;
}



/* 
========
LOADER
========
*/

.spinner-container {
    display: grid;
    width: 100%;
    place-content: center;
    height: 50vh;

}

.spinner {
    display: inherit;
    /* Size */
    height: 4rem;
    width: 4rem;

    /* Create a curve at the top */
    border: 4px solid #d1d5db;
    border-top-color: var(--accent-color);
    border-radius: 50%;

    animation: spinner 800ms linear infinite;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}