:root{
  --dark: black;
  --darker: #222222;
  --darkest: #333333;
  --gray: #6B7280;
  --light: #EEE;
  --yellow: #FC5A34;
  --byellow: #FFFF33;
}
* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Fira sans', sans-serif;
}
body {
  flex-wrap: wrap;
  min-height: 100svh;
  background: var(--dark);
  color: #EEE;
}
body h5{
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
}
.main_body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background: var(--dark);
  color: #EEE;
}
.main_body main h2{
  font-size:1.25rem;
 }
header {
  padding: 1rem 1rem;
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
}
body h1 {
  padding: 2rem 1rem;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--gray);
  margin-bottom: 1rem;
}

input, button {
  appearance: none;
  border: none;
  outline: none;
  background: none;
}
.name-input{
  color: var(--light);
  text-align: center;
  font-size: 1rem;

}



#radios {
  position: relative;
  display: flex;
  justify-content: flex-end;
  border-color: var(--darker);
  border-width: 2px;
  margin-top: 0.5rem;
  border-style: solid;
 padding:1rem;
 padding-right: 0;
  border-radius: 1rem;
  z-index: 5;
}
.bckgrnd,
.labels {
  width: 50%;
  font-size: 1rem;
  text-align: center;
  margin-right: -0.5rem;
  font-weight: 700;
  z-index: 2;
  cursor: pointer;
}
#radios input {
  display: none;
}
#radios label{
  transform: translatex(-15px);
 }

#bckgrnd {
  height: 100%;
  width: 50%;
  border-radius: 1rem;
  background-color: var(--yellow);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
}


#new-lang-rad1:checked+.labels {
  color: var(--darkest);
}

#new-lang-rad2:checked+.labels {
  color: var(--darkest);
}

#new-lang-rad3:checked+.labels {
  color: var(--darkest);
}


#new-lang-rad1:checked ~ #bckgrnd {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
  visibility: visible;
}
#new-lang-rad2:checked ~ #bckgrnd {
  visibility: visible;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}
#new-lang-rad3:checked ~ #bckgrnd {
  visibility: visible;
  transform: translateX(185%);
  transition: transform 0.5s ease-in-out;
}



/* New word input */
.newWordInput{
  width:100% !important;
  padding:1rem;
  margin-top:10px;
  margin-bottom:10px;
  background-color:transparent;
  border-radius:1rem;
  background-color: var(--darker);
  color: var(--light);
  font-size: 1.25rem;
 }
 
 /* Col */
 .main_body .col{
  width:650px;
 
 }
 
 /* Label */
 #radios label{
  font-size:1.8rem;
  text-transform:uppercase;
  text-align:center;
 }
 
 /* Heading */
 #word-form h3{
  font-size:1.5rem;
 }

 #newWordElements h3 span {
  font-size: 1.25rem;
}

 /* Action buttons */
#word-form .action-buttons{
  text-transform:uppercase;
  font-weight:600;
  font-size:1.5rem;
  background-color:var(--yellow);
  border-top-left-radius:1rem;
  border-top-right-radius:1rem;
  border-bottom-left-radius:1rem;
  border-bottom-right-radius:1rem;
  padding-left:1rem;
  padding-right:1rem;
  padding-top:1rem;
  padding-bottom:1rem;
  margin-top: 2rem;
 }
 
 /* Action buttons */
 .main_body .col header #word-form .action-buttons{
  width:100% !important;
 }
 
 /* Heading */
 .main_body .col header #word-form span h3{
  margin-top:1% !important;
 }
 
 
/* Button */
 .js-clear{
  text-transform:uppercase;
  background-color:#a30000;
  font-weight:700;
  font-size:1rem;
  border-radius:1rem;
  width: 100%;
  padding:1rem;
  visibility: hidden;
 }

 .edit_btn {
  text-transform:uppercase;
  font-weight:600;
  font-size:1.5rem;
  background-color:var(--yellow);
  border-top-left-radius:1rem;
  border-top-right-radius:1rem;
  border-bottom-left-radius:1rem;
  border-bottom-right-radius:1rem;
  padding-left:1rem;
  padding-right:1rem;
  padding-top:1rem;
  padding-bottom:1rem;
  margin-top: 2rem;
 }
 
 .edit_btn:disabled {
  background-color: #6B7280;
 }
 #showBegins h1{
  padding-top:4rem;
  text-transform: uppercase;
  color: #b9b9b9;
  font-size: 3rem;
  font-weight: 500;
 }

 #submitted {
  display: flex;
  flex-direction: column;
  width:650px;
  justify-content: space-evenly;
  background: var(--dark);
  color: #EEE;
  padding: 2rem 1rem;
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
}

#submitted h2 {
  font-size: 2rem;
}

/* List */
#submitted ul{
  padding-left:2rem;
 }

#submitted li h3 {
  font-size: 1.5rem;
  font-weight: 600!important;
  line-height: 2.5rem;
  color: #FFCB4C;
}

/* Loc */
#loc,  #job, #event, #sit {
  font-size: 1.5rem;
  font-weight: 500!important;
  line-height: 2.5rem;
  color: var(--light);
  font-weight:400 !important;
}

 
 /* Logo */
.logo{
  display:block;
  padding-top:1%;
  margin-right:auto !important;
  margin-left:auto !important;
  width:35%;
 }

 #showBegins {
  display: none;
 }

 #js-clear {
  display: none;
 }

 .btn {
  font-family: sans-serif;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.8px;
  padding: 15px 50px;
  border-radius: 1rem;
  box-shadow: 1px 2.9px 16px rgba(27, 139, 249, 0.4);
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
}
.btn:hover {
  box-shadow: 3px 4.9px 16px rgba(27, 139, 249, 0.6);
  letter-spacing: 5px;
}
.btn--clicked {
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  padding: 15px 2px;
  width: 50px;
  color: transparent;
  z-index: -10;
}

.color {
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: 0.8s ease;
  border-radius: 50%;
  background-color: transparent;
  z-index: 10;
}

.expanded {
  width: 200%;
  padding-bottom: 200%;
  height: auto;
}

.color--blue {
  background-color: #1b8bf9;
  transition-delay: 0.25s;
}

.color--orange {
  background-color: #FF6C19;
  transition-delay: 0.5s;
}

.color--green {
  background-color: #41FF9F;
  transition-delay: 0.75s;
}

.color--white {
  background-color: #f9f9f9;
  transition-delay: 1s;
}



 @media only screen and (max-width: 700px) {
.logo {
  padding-top: 5%;
  width:80%;
}
#newWordElements h3 span {
  font-size: 1rem;
}
body {
  min-height: 100svh;
}

h5 {
  font-size: 1.2rem!important;
}

#word-form h3 {
  font-size: 1.2rem!important;
}


/* Button */
.js-clear{
  text-transform:uppercase;
  background-color:#a30000;
  font-weight:700;
  font-size:1rem;
  border-radius:1rem;
  width: 90%;
  padding:1rem;
  /* display: none; */
 }

 }