@charset "utf-8";
/* CSS Document */

/* Import a fitting Google font */
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');*/
@import url('https://fonts.googleapis.com/css?family=Montserrat|Lato|Roboto+Slab|Oswald');


:root {
  --primary-font: 'Roboto Slab', serif;
  --secondary-font: 'Montserrat', sans-serif;
  --tertiary-font: 'Lato', sans-serif;
  --infotext-font: 'Oswald', sans-serif;
}

:root {
  --primary-color: hsl(342, 100%, 50%); /* bright fuchsia */
  --secondary-color: hsl(0, 100%, 95%); /* pure white */
  --tertiary-color: hsl(192, 100%, 50%); /* bright blue */
	--paragraph-color: hsl(192, 100%, 50%); /* bright blue */
  --infotext-color: hsl(60, 100%, 95%); /* pale yellow */
  --link-color: hsl(32, 100%, 50%); /* bright orange */
  --bg-color: hsl(0, 100%, 10%); /* deep black */
}

:root {
 	--small-rounding: 5px;
 	--large-rounding: 10px;
}


/* fonts */
/* Headings */
h1{
  font-family: var(--primary-font);
  color: var(--primary-color);
  font-size: 2.236em; /* based on Euclidean numbers (phi) */
  padding: 0 0px;
}

/* Sublines */
h2 {
  font-family: var(--secondary-font);
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 1.618em; /* based on Euclidean numbers (phi) */
  padding: 0 0px;
}

/* Paragraphs */
p {
  font-family: var(--tertiary-font);
  font-weight: 400;
  color: var(--paragraph-color);
  text-align: left;
  font-size: 1em;
  padding: 0 0px;
}

.infotext {
  font-size: 14px;
  font-family: var(--infotext-font);
  color: var(--infotext-color);
  font-style: italic;
}
a {
  font-size: 16px;
  font-family: var(--secondary-font);
  color: var(--link-color);
  text-decoration: none;
}

body {
  background-color: #ffffff;
}

div {
  padding: 40px;
}

div.converter {
	 max-width: 300px;
background-color: var(--bg-color);
	margin: 40px;
}

header {
	text-align: center
	
}


/* Use the imported font and the color scheme to style the form and button */
form {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 0 auto;
  padding: 00px;
  background-color: var(--secondary-color);
  border: 0px solid var(--tertiary-color);
  border-radius: var(--large-rounding);
  font-family: var(--tertiary-font);
}
label, input, button {
  margin: 10px 0;
  font-size: 16px;
  color: var(--tertiary-color);
}
input {
  padding: 10px;
  border: 1px solid var(--tertiary-color);
  border-radius: var(--small-rounding);
}
button {
  padding: 10px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--large-rounding);
  cursor: pointer;
  font-weight: 700;
}

/* Use the color scheme and the imported font to style the conversion result */
#conversion-result {
	display: flex;
  flex-direction: column;
  width: 300px;
  margin: 20px 0;
  font-size: 18px;
  color: var(--secondary-color);
  font-family: var(--tertiary-font);
  font-weight: 700;
  text-align: center;
  background-color: var(--tertiary-color);
  padding: 0px;
  border-radius: var(--small-rounding);
}


#feet-inches-result {
	display: flex;
  flex-direction: column;
  width: 300px;
  margin: 20px 0;
  font-size: 18px;
  color: var(--secondary-color);
  font-family: var(--tertiary-font);
  font-weight: 700;
  text-align: center;
  background-color: var(--tertiary-color);
  padding: 0px;
  border-radius: var(--small-rounding);
}





/*table for csv*/
 table {
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }