.btn--remix{
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix:hover{
  background-color: #D0FFF1;
}

*,
*::before,
*::after{
  font-family: Verdana, sans-serif;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root{
  --color-bg: #222222;
  --color-text-main: #dfdfdf;
  --color-text-header: #2800FF;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

body{
  font-family: var(--font-family) sans-serif;
  font-size: 16px;
  letter-spacing: 0.1px;
  background-color: var(--color-bg);
  color: var(--color-text-main);
}

li{
  list-style-type: none;
  position: relative;
  display: inline-block;
}

.navbar{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #dfdfdf;
}
.nav-left{
  align-self: flex-end;
  display: flex;
  margin-right: 40px;
}
.nav-right{
  align-self: flex-end;

  margin-left: 40px;
}
.search{
  font-size: inherit;
  background: inherit;
  color: #dfdfdf;
  border: 0;
  padding: 3px;
}
.khan-logo{
/*  filter: brightness(106%) saturate(100%) contrast(1000%) invert(100%);;*/
  max-width: 170px;
}
.search-icon, .course-icon{
  height: 20px;
  filter: invert(100%);
}

.main{
  font-size: 1.35rem;
  margin: 100px auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 1200px;
/*  height: 600px;*/
  height: 100%;
/*  border: 2px solid white;*/
}

.home-left, .home-right{
/*  height: 50%;*/
}

.home-left{
/*  border: 2px solid white;*/
  width: 1440px;
}
.home-left img{
  object-fit: cover;
  width: 100%; 
  height: 100%;
}

.home-right{
  height: 50%;
  margin: 40px 0;
}
.home-right > *{
  padding: 1.5rem 0;
}

.underline-drawing{
/*  height: 100%;
  width: 100%;*/
  position: relative;
/*  margin: auto;*/
}
.underline-drawing img{
  position: absolute;
  height: 100px;
  width: 500px;
  object-position: center;
  object-fit: cover;
/*  filter: invert(86%);*/
  right: 0;
  left: 15rem;
  position: absolute;
/*  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;*/
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}



.main-secondary{
  text-align: center;
  font-size: 2rem;
  background: #323232;
  height: 100vh;
  padding: 5rem 0;
}
a{
  color: #dfdfdf;
  text-decoration-line: none;
  padding: 6px;
}

.button-look a {
  background-color: #6660e2;
  color: #ffffff;
  padding: 0.8rem;
  margin: 0 5px 0 0;
  border-radius: 5px;
/*  border: 1px solid #6660e2*/
}

.button-look a:hover{
  background: #dfdfdf;
  color: #000000;
/*  border: 10px solid #dfdfdf;*/
}

/* base image ********************** */
.base{
  text-align: center;
  font-size: 2rem;
  margin: 3rem 0 0 0;
}
.base-image{
  margin: auto;
  width: 100%;
/*   max-width: 1000px; */
}

@media screen and (max-width: 720px){
  .main{
    font-size: 1.35rem;
    margin: 100px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
  /*  height: 600px;*/
    height: 100%;
  /*  border: 2px solid white;*/
  }
  .home-left{
  /*  border: 2px solid white;*/
/*    width: 1440px;*/
    width: 100%;
  }
  .nav-left{
    align-self: flex-end;
    display: flex;
    margin-right: 0;
  }
  .nav-right{
    align-self: flex-end;

    margin-left: 0;
  }
}