:root {
  --green: #A2CCB6;
  --darkgreen: #7DA899;
  --yellow: #FCEEB5;
  --darkyellow: #D0C89D;
  --peach: #EE786E;
  --darkpeach: #B95145;
  --off-white: #FFFFF4;
  --skyblue: #a5d4e7;
  --darkskyblue: #75AECF;
  --lavender: #dcc9f5;
  --darklavender: #b8a3e1;
  --seashell: #FFF5EE;
  --dark: #242836;
  --lightblue: #00badd;
  --purple: #755bb3;
  --darkplaceholder: #12718a;
}

body {
  display: flex;
  justify-content: center;
  background-color: var(--seashell);
  /* font-family: 'IBM Plex Mono', monospace; */
  font-family: 'Tektur', cursive;
  /* font-family: 'Architects Daughter', cursive; */
  /* font-family: 'Share Tech', sans-serif; */
  font-size: 25px;
  margin-top: 20px;
  transition: 0.6s;
}

main{
  transform: scale(0.8);
}

span {
  display: block;
  margin-top: -8.58px;
}

body.dark {
  background-color: #242836;
  transition: 0.6s;
}

header.dark {
  background-color: #242836;
  transition: 0.6s;
  color: var(--lightblue);
}

/* -------------------------------- */
/* logo change in dark mode */
.mainlogo {
  padding-left: 34px;
  width: 140px;
}

.mainlogo2 {
  padding-left: 34px;
  width: 140px;
  display: none;
}

.dark .mainlogo{
  display: none;
  transition: 0.6s;
}

.dark .mainlogo2{
  display: block;
  transition: 0.6s;
}

/* -------------------------------- */


.profile {
  width: 34.32px;
}

.github,
.contact {
  text-decoration: none;
  color: inherit;
  margin-left: 34.32px;
  margin-right: 34.32px;
}

.keyboard {
  width: 1338.48px;
  height: 449.11px;
  margin: 0 auto;
  border: 5.14px solid #000000;
  border-radius: 17.16px;
  background: #000000;
}

.row {
  margin-top: 3.43px;
  overflow: hidden;
}

.key {
  width: 85.8px;
  height: 85.8px;
  float: left;
  /* cursor: pointer; */
  cursor: crosshair;
  background-color: var(--off-white);
  color: #000000;
  line-height: 82.37px;
  text-align: center;
  margin-left: 3.43px;
  border-radius: 6.18px;

  font-family: 'IBM Plex Mono', monospace;
  /* font-family: 'Tektur', cursive; */
  /* font-family: 'Architects Daughter', cursive; */
  /* font-family: 'Share Tech', sans-serif; */
}


/* .key:hover{
  background-color: #7699a7;
} */

.key__symbols {
  line-height: 48.05px;
  background-color: var(--yellow);
}
.key__symbols.active{
  background-color: var(--darkyellow);
}
/* ----------------------------- */

.key__delete {
  width: 171.6px;
  display: block;
  align-items: center;
  background-color: var(--peach);
}

.key__delete.active{
  background-color: var(--darkpeach);
}
/* ----------------------------- */

.key__letters {
  background-color: var(--skyblue);
}

.key__letters.active{
  background-color: var(--darkskyblue);
}
/* ----------------------------- */

.key__oneandhalf {
  width: 128.7px;
}

.key__extra {
  background-color: var(--lavender);
}
.key__extra.active{
  background-color: var(--darklavender);
}
/* ----------------------------- */

.key__esc {
  background: var(--peach);
}

.key__esc.active{
  background-color: var(--darkpeach);
}
/* ----------------------------- */

.key__enter {
  width: 192.19px;
}

.key__caps {
  width: 154.8px;
}

.key__shift-left {
  width: 171.6px;
}

.key__spacebar {
  width: 514.8px;
}

.key__bottom-funct {
  width: 119.52px;
}

.key__arrow {
  background: var(--green);
}
.key__arrow.active{
  background-color: var(--darkgreen);
}
/* ----------------------------- */

.up {
  margin-top: 25%;
  align-content: center;
}

.left {
  margin-top: 40%;
  align-content: center;
}

.down {
  margin-top: 45%;
  align-content: center;
}

.right {
  margin-top: 25%;
  align-content: center;
}

.win {
  width: 30px;
  margin-top: 21%;
  align-content: center;
}

.backspace {
  width: 55px;
  margin-top: 8.58%;
  align-content: center;
}


.header {
  height: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 100;
  transition: 0.6s;
  color: var(--dark);
  font-family: 'IBM Plex Mono', monospace;
  /* font-family: 'Tektur', cursive; */
  /* font-family: 'Architects Daughter', cursive; */
  /* font-family: 'Share Tech', sans-serif; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  font-size: 28.6px;
  background-color: var(--seashell);
  border-bottom-width: 0px;
  border-bottom-style: solid;
  border-bottom-color: rgb(220, 220, 220);
}

.left-section {
  width: 291.6px;
  display: flex;
  align-items: center;
}

.middle-section {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  max-width: 2068.8px;
  margin-left: 119.52px;
  margin-right: 0;
}

.right-section {
  width: 103.68px;
  margin-right: 34.32px;
  display: flex;
  align-items: center;
  justify-content: right;
  flex-shrink: 0;
}

.radio-btn {
  width: 65.28px;
  height: 30.89px;
  padding: 1.72px;
  background-color: #242836;
  /* background-color: red; */
  border-radius: 18.86px;
  overflow: hidden;
  cursor: pointer;
}

.radio-btn .radio-inner {
  position: relative;
  width: 29.42px;
  height: 29.42px;
  background-color: #ffc207;
  border-radius: 50%;
  transition: all 0.6s;
}

.radio-btn .radio-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  /* background-color: #A2CCB6; */
  background-color: #242836;
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.6s;
}

.radio-inner.active {
  transform: translateX(calc(25.78px - -10px));
}

.radio-btn .radio-inner.active::before {
  left: -10px;
  transform: scale(1);
}



/* --------------------------------- */
/* quote colour change dark mode */
.quote1{
  text-align: center;
  /* color: var(--purple); */
  color: var(--dark);
  transition: 0.6s;
}

.dark .quote1{
  color: var(--lightblue);
  transition: 0.6s;
}

/* --------------------------------- */
/* input box and lines above it*/

.input-field {
  width: 1338.48px;
  height: 45px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  /* font-family: 'IBM Plex Mono', monospace; */
  /* font-family: 'Tektur', cursive; */
  /* font-family: 'Architects Daughter', cursive; */
  font-family: 'Share Tech', sans-serif;
  font-size: 40px;
  border: 2px solid var(--dark);
  border-radius: 6px;
  background-color: var(--seashell);
  color: var(--dark);
  text-align: left;
  cursor: crosshair;
  pointer-events: none;
  transition: 0.6s;
}


.dark .input-field{
  color: var(--lightblue);
  border: 2px solid var(--lightblue);
  background-color: var(--dark);
  transition: 0.6s;
}

.dark .input-field::placeholder{
  color: var(--darkplaceholder);
  transition: 0.6s;
}


.line1,.line2,.line3,.line4,.line5{
  /* font-family: 'IBM Plex Mono', monospace; */
  /* font-family: 'Tektur', cursive; */
  /* font-family: 'Architects Daughter', cursive; */
  font-family: 'Share Tech', sans-serif;
  color: var(--dark);
  font-size: 40px;
  transition: 0.6s;
}

.line1{
  opacity: 100%;
}

.line2{
  opacity: 70%;
}

.line3{
  opacity: 40%;
}

.line4{
  opacity: 15%;
}

.line5{
  opacity: 5%;
}


.dark .line1,.dark .line2,.dark .line3,.dark .line4,.dark .line5{
  color: var(--lightblue);
  transition: 0.6s;
}

/* --------------------------------- */