*::after,
*::before{
box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
}

body{
    scroll-behavior: smooth;
}

.header.nav{
    text-align: center;
   /* height: 60px; */
}

@font-face {
  font-family: myThirdFont;
  src: url("Roboto/static/Roboto-ExtraBold.ttf");
}

.link_header{
  transition: 200ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
    position: relative;
    top: 20px;
    text-align: center;
    font-size: 2rem;
    text-decoration: none;
    color: hsl(0, 0%, 0%);
    font-family: myThirdFont;
}

.link_header:hover{
  color:hsl(240, 73%, 74%);
}

@font-face {
  font-family: myFourthFont;
  src: url("Roboto/static/Roboto-Regular.ttf");
}

.header.description{
    color: hsl(0, 0%, 50%);
    margin-top: 1.8em;
    font-family:myFourthFont;
}

.btn.btn_phone,.nav.nav_phone{
    display: none;
  }

.nav.menu_desktop{
    text-align: center;
    margin-top: 2em;
    display: flex;
    justify-content: center;
}

.cont.submenu{
    border: 1px solid black;
    width: 200px;
    height: 100px;
}

@font-face {
  font-family: mySecondFont;
  src: url("Roboto/Roboto-VariableFont_wdth\,wght.ttf");
}


.li.desktop{
    display: inline;
    margin-left: 0.8em;
}

.link.desktop{
  transition: 200ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  font-size: 1.2em;
  color: hsl(0, 0%, 0%);
  text-decoration: none;
  font-family: mySecondFont;
  
}

.link.desktop:hover{
  color:hsl(240, 73%, 74%);
  text-decoration:underline; 
  text-decoration-color: hsl(240, 73%, 74%);
  text-underline-offset: 10px;
  text-decoration-thickness: 1.5px;
}

.link.desktop.active2{
  text-decoration:underline; 
  text-decoration-color: hsl(240, 73%, 74%);
  text-underline-offset: 10px;
  text-decoration-thickness: 1.5px;
}

:is(.link.desktop.active2):hover{
  color: hsl(0, 0%, 0%);
}


.link.desktop.c{
    color: hsl(0, 0%, 0%);
    text-decoration: none;
}

.link.desktop.c:hover{
  color: hsl(240, 73%, 74%);
}

.account.ul{
    margin-left: 0.4em;
}

.menu_option{
    display: none;
    list-style: none;
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 113px;
    border: 1px solid hsl(0, 0%, 91%);
    background-color: hsl(0, 0%, 98%);
    border-radius: 5px;
    margin-left: 0.6em;
}

.box1,.box2{
    text-align: left;
    border-bottom: 1px solid hsl(0, 28%, 93%);
    height: 40px;
    padding-top: 1em;
    padding-left: 0.7em;
}

.anchor1,.anchor2{
    display: block;
    font-size: 1.2rem;
    color: hsl(0, 0%, 0%);
    text-decoration: none;
}

.anchor1:hover,.anchor2:hover{
    color: hsl(240, 73%, 74%);
}
.box1:hover,.box2:hover{
    border-bottom: 2px solid hsl(240, 73%, 74%);
}

.box2{
    border: 0;
}

.arrow.icon{
    width: 15px;
    height: 15px;
    rotate: -90deg;
    position: relative;
    top: 3px;
}

.footer.main{
  font-family: mySecondFont;
  font-size: 0.9rem;
    margin-top: 4em;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    text-align: center;
    border-top: 1px solid hsla(0, 0%, 0%, 0.12);
 }

.btn.log_out,.btn.warning_delete{
  cursor: pointer;
  transition: 170ms cubic-bezier(0.23, 1, 0.320, 1);
  background-color: transparent;
  border: 0;
  font-family: mySecondFont;
  font-size: 1.05rem;
}

.menu_option.user{
  height: 58px;
}

.btn.log_out_mobile{
  cursor: pointer;
  background-color: transparent;
  border: 0;
  font-family: mySecondFont;
  font-size: 1.05rem;
  color: hsl(0, 0%, 97%);
}

.btn.log_out:hover{
  color: hsl(240, 73%, 74%);
}

.btn.warning_delete:hover{
color: hsl(0, 88%, 47%);
}

 @font-face {
    font-family: myFirstFont;
    src: url("Roboto/static/Roboto-Regular.ttf");
  }
  

 @media screen and (max-width:889px) {
.menu_option{
    margin-left: -7.8em;
}
 }

 @media screen and (max-width:777px) {
    .nav.menu_desktop{
        display: none;
      }
      .btn.btn_phone{
        display: block;
        width: 50px;
        height: 50px;
        background:none;
        margin-top: 2rem;
        position: relative;
        left: 10px;
        cursor: pointer;
        border: 0;
      }
      .nav.nav_phone{
        display: none;
        position: absolute;
        z-index: 2;
        width: 100%;
        background-color:hsl(240, 4%, 16%);
      }
      .big_content{
        position: relative;
        top: -10px;
        margin-top: 0.7em;
      }

      .close_nav{
        position: relative;
        left: -20px;
        top: 10px;
        color: hsl(0, 0%, 97%);
        background-color: transparent;
        font-size: 2rem;
        border: 0;
        float: right;
        cursor: pointer;
      }

      .nav.nav_list{
        padding-top: 3em;
        width: 95%;
        margin: auto;
      }
      .account_phone{
        /* padding-top: 1em; */
        width: 95%;
        margin: auto;
      }
      .nav.nav_link,.nav.nav_link.ac5,.nav.nav_link_m{
        color: hsl(0, 0%, 97%);
        transition:250ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
        font-family: myFirstFont;
        text-decoration: none;
      }
      .nav.nav_link:hover,.nav.nav_link.ac5:hover,.nav.nav_link_m:hover{
        color:hsl(240, 73%, 74%);
      }
     
      .active:hover{
        color:hsl(240, 73%, 74%);
      }

      .nav_li{
        padding: 1em;
        border-bottom: 1px solid hsl(0, 0%, 50%);
        list-style: none;
      }
      .li.nav{
        list-style: none;
        padding: 1em;
        color: hsl(0, 0%, 97%);
        border-bottom: 1px solid hsl(0, 0%, 50%);
      }

      .popup_menu_phone{
        display: none;
        /* transition: 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19); */
        transition: 0.2s cubic-bezier(.62,.16,.13,1.01);
      }

      .arrow.icon.mobile{
        float: right;
        rotate: 0deg;
        width: 20px;
        height: 20px;
      }
      .nav.nav_link_m{
        color: hsl(0, 0%, 97%);
        margin-left: 0.8em;
      }
      .ac_open{
        transition: 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation: 200ms open cubic-bezier(0.19, 1, 0.22, 1);
        rotate: 180deg;
      }
      .ac_close{
        transition: 120ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation: 200ms close cubic-bezier(0.19, 1, 0.22, 1);
        rotate: 180deg;
      }
 }

 @keyframes open {
    0%{rotate: 0deg;}
    100%{rotate: 180deg;}
 }

 @keyframes close {
  0%{rotate: 180deg;}
  100%{rotate: 0deg;}
}