@import url('https://fonts.googleapis.com/css2?family=Syne&display=swap');
      body{
        padding:1rem;
        font-family:Syne, Arial, Helvetica, sans-serif!important;
      }
      .navi{
        border-bottom:0px!important;
        text-align: center;
      }
      .navi ul, .myAccount ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .navi ul li , .myAccount ul li{ display: inline; }
      .navi ul li a{
        font-weight: bold;
        font-size: 1.25rem;
        color:black;
        padding-left:.5rem;
      }
      .navi ul li a, .myAccount ul li a{
        padding-right:.5rem;
      }
      .logo a{
        font-size:6rem;
        color:rgba(0,0,0,.7);
        text-decoration:none;
        font-weight:bold;
        transition: color 1s;
      }
      .logo a:hover{
        color:black;
      }
      .padded{
        padding-top:.5rem;
        padding-bottom:.5rem;
      }
      .bold{font-weight: bold;}
      h3{
        font-size: 1.15rem;
        font-weight: bold;
      }
      h2{

    
        font-size: 2rem;
        margin-top: 2em;
        padding: .5em;
        margin-bottom: .5em;
        background-color: rgba(0,0,0,.125);
        color: rgba(0,0,0,.87);
        border-radius: 20px 20px 0 0;
      }
      /* .what-is{
        color:rgba(0,0,0,.75);
        padding-top:.25em;
        padding-bottom:.25em;
        display:inline-block;
      }
      .what-is:hover{
          color:black;
          text-decoration:none;
      } */
      .container{margin-top:1em;}
      .skill-container{
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 1fr;
      }
      .what-is{
          background-color:rgba(255,255,255,.8);
          border:1px solid rgba(0,0,0,.1);
          display: grid;
          place-items: center;
          text-decoration: none;
          color: rgba(0,0,0,.87);
          transition:background-color .3s;
          padding:1em;
          border-radius: 20px 20px 0 20px;
          box-shadow: 0 0 10px rgba(0,0,0,.1);
      }
      .what-is:hover{
        color:black;
        background-color:rgba(0,0,0,.15);

      }
      .about-me{
        background-color: rgb(13 67 133 / 17%);
        border-radius: 20px 20px 0 0;
        color: #ffffffbf;
        padding: 1em;
      }
      .about-me * a {
        color: #fffffff7;
        font-size: inherit;
      }

.front{         background-color:hsl(0, 27%, 63%); }
.front:hover{   background-color:hsl(0, 56%, 59%); }

.back{          background-color:hsl(27, 27%, 63%); }
.back:hover{    background-color:hsl(27, 56%, 59%); }

.soft{          background-color:hsl(64, 27%, 63%); }
.soft:hover{    background-color:hsl(65, 56%, 59%); }

.ai{          background-color:hsl(104, 27%, 63%); }
.ai:hover{    background-color:hsl(104, 56%, 59%); }

.os{            background-color:hsl(191, 27%, 63%); }
.os:hover{      background-color:hsl(191, 56%, 59%); }

.software{       background-color:hsl(245, 27%, 63%); }
.software:hover{ background-color:hsl(243, 56%, 59%); }

.hobby{          background-color:hsl(322, 27%, 63%); }
.hobby:hover{    background-color:hsl(327, 56%, 59%); }

.toggle{
    cursor: pointer;
    transition:background-color .3s;
}
.grayed{
    background-color:rgb(230, 230, 230);
    color:rgba(0,0,0,.3);
}


@keyframes bgAnim{
  0%   {background-position: 0% 50%}
  50%  {background-position: 100% 50%}
  100% {background-position: 0% 50%}
}


body{
  background: linear-gradient(-45deg,  
  hsl(245, 37%, 63%) ,
  hsl(322, 37%, 63%) , 
  hsl(191, 37%, 63%) );
	background-size: 400% 400%;
	animation: bgAnim 5s ease infinite;

}
.coverGirl{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:rgba(0,0,0,.8);
}
.coverGirl img{
  display:none;
  max-width: 80vw;
  max-height: 80vh;
}

.closeCoverGirl{
  background-color:rgba(255, 255, 255, 0.838);
  color:black;
  border:0;
  margin:1em; 
  padding:1em;
}

.showSite{
  position: relative;
    display: block;
    margin-bottom:1em;
}

.years{
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #0000009c;
  padding: 0.2em 0.5em;
  color: white;
  border-radius: 10px 10px 0 10px;
}