:root {
    --dark-purple: #23103A;
    --blue-grey: #282D4F;
    --saturate-orange: #FF6C00;
    --deeper-blue: #010038;
    --litecoin-blue: #537EC5;
    --honey-orange: #F39422;
    --newton-beige: #D49B54;
    --purple-rain: #712B75;
    --purple-berry: #46244C;
    --just-white: #FAFAFA;
    --just-black: #1C1C1C;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0; 
}

html {
	font-size: 62.5%;
	font-family: 'inherir', 'Seoge UI', sans-serif;
	scroll-behavior: smooth; 
}

body {
    background-color: var(--just-black);
}

header {
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    font-family: 'Alien Encounters', sans-serif;
    background: var(--dark-purple);
    height: 12rem;
    width: 100%;
    max-height: 30%;
}


header h1 {
    font-size: 5rem;
    margin-top: 1.2rem;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke: 1px var(--saturate-orange);
}


/*first secton*/

.site-card--cryptos {
    height: auto;
    width: 100%;
    padding: 4% 4%;
    display: inline-block;
    background: linear-gradient(180deg, var(--dark-purple) 16.69%, var(--deeper-blue) 100%);
    text-align: center;
}


.main-exchange--subtitle {
    margin: 1rem;
    font-size: 1.5rem;
    color: #9907B1;
    text-shadow: 2px 2px 3px #1C1C1C;
}



.site-card--logos {
    display: inline-block;
    align-self: center;
    justify-content: center;
    margin: 3.5rem 0;
}


.site-card--cryptos .site-card--card {
    height: 31%;
    margin: 5%;
    display:inline-block;
    width: 90%;
    max-width: 1000px;
    border-radius: 10px;
    background: linear-gradient(145.8deg, var(--purple-rain) 16.69%, #18066A 100%);
    box-shadow: 0px 0px 3px var(--just-black);
}

.site-card--card p {
    font-size: large;
    padding: 1rem;
    text-align: center;
    font-weight: 300;
    margin: 3rem 0;
    color: var(--just-white);
    text-shadow: 2px 2px 5px var(--just-black);
}

.site-card--description1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inherit', sans-serif;
    font-size: 1.2rem;
    font-weight: 100;
    margin-top: 3rem; 
}

.site-card--description1 article {
    text-align: left;
}

.site-card--description2 article {
    text-align: right;
}

.site-card--description1 article, .site-card--description2 article {
    margin-top: 3rem;
    padding: 5% 2%;
    color: var(--just-white);
}


.site-card--description2, .site-card--description1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-family: 'Inherit', sans-serif;
    font-weight: 100;
    margin-top: 4rem;
    text-shadow: 1.2px 1.2px 0.6px var(--soft-purple); 
    width: 100%;
}

.orangeLine {
    border-style: solid;
    border-color: var(--honey-orange);
    height: 0.2rem;
    margin-top: 1rem;
    margin-bottom: 5rem;
}



/*second secton*/

.site-second {
    height: auto;
    padding: 4% 4%;
    width: 100%;
    background: linear-gradient(180deg, var(--deeper-blue) 16.69%, var(--litecoin-blue) 100%);
    display: inline-block;
    text-align: center;
}

.site-second--card {
    display: inline-block;
    margin: 0 10%;
    margin-top: 1rem;
    margin-bottom: 3.4rem;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--purple-rain) 16.69%, #18066A 100%);
    padding: 5%;
}

.site-second--card p {
    font-size: medium;
    font-weight: 300;
    color: var(--just-white);
    text-shadow: 1.2px 1.2px 5px var(--soft-purple);
}


.site--button {
    padding: 4%;
    border-radius: 10px;
    display: inline-block;
    justify-content: center;
    margin: 2.5rem 10%;
    background: linear-gradient(100deg, #E17726 16.69%, #680599 100%);
    color: var(--just-white);
    box-shadow: 0px 0px 5px var(--just-black);
    text-shadow: 2px 2px 1px var(--soft-purple);
    font-weight: bolder;
    text-decoration: none;
    font-size: large;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 200ms linear;
}

.site--button:hover {
    transform: scale(1.1);
    cursor: pointer;
    transition: transform 200ms linear;
}

.site--button:active, #equalButton:active {
    color: var(--soft-purple);
}

.site-second--text {
    font-size: small;
    font-weight: 300;
    font-family: 'Inherit', sans-serif;
    color: var(--just-white);
    text-shadow: 0px 0px 5px var(--just-black);
    margin: 5rem 0;
}


/*third secton*/

.third-section {
    height: auto;
    padding: 4% 4%;
    width: 100%;
    background: linear-gradient(180deg, var(--litecoin-blue) 16.69%, #39447C 100%);
    display: inline-block;
    text-align: center;
}

.third-section--currency-card {
    height: 31%;
    margin-top: 2rem;
    display:inline-block;
    width: 90%;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(145.8deg, var(--dark-purple) 16.69%, #12091D 100%);
    box-shadow: 0px 0px 3px var(--just-black);
    margin-bottom: 10rem;
}

.third-section--currency-card h2 {
    font-size: x-large;
    display: inline-block;
    width: 70%;
    color: var(--just-white);
    border-radius: 7px;
    background-color: var(--purple-rain);
    margin: 2rem 0rem;
    padding: 2%;
    box-shadow: 0px 0px 3px var(--just-black);
}

.third-section--currency-card #message {
    font-size: small;
    font-weight: bold;
    color: var(--just-white);
    margin: 1rem 10%;
    padding: 2%;
    font-size: large;
}

.third-section--currency-card--bar {
    height: 31%;
    margin: 2%;
    width: 90%;
    display: flex;
}

#currencies--input, #currencies--output {
    width: 27%;
    margin: 10% 0%;
    margin-left: 4%;
    border-style: none;
    border-radius: 10px 0px 0px 10px;
    box-shadow: 0px 0px 3px var(--just-black);
    background: linear-gradient(180.8deg, var(--purple-rain) 16.69%, #39163B 100%);
    height: auto;
    color: var(--just-white);
    padding: 2%;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-weight:500;
    font-size:1.5rem;
}

option {
    background-color: var(--just-black);
}

#currencies--input::placeholder, #currencies--output::placeholder {
    color: var(--just-white);
    opacity: 0.6;
}

.third-section--currency-card--bar #amount, .third-section--currency-card--bar #result {
    align-self: center;
    width: 68%;
    border-style: none;
    background-color: var(--dark-purple);
    text-align:left;
    padding: 2%;
    font-size: large;
    color:#dbd8e9;
    font-weight: bold;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0px 2px 2px 0px;
    text-shadow: 0px 0px 3px var(--just-black);
}

form a#exchangeButton {
    background: var(--purple-rain);
    margin: 0;
}

/* footer  */

footer {
    display: inline-block;
    text-align: center;
    font-family: 'Inherit', sans-serif;
    background: linear-gradient(180.8deg, #39447C 16.69%, var(--dark-purple) 100%);
    height: auto;
    width: 100%;
}


footer > p {
    margin-top: 1rem;
    margin: 2%;
    color: var(--just-white);
    font-size: x-small;
    text-align: left;
}

.footer--links {
    padding: 3%;
    list-style: none;
    margin-top: 3rem;
    text-align: left;
    color: var(--just-white);
    font-size: small;
    font-weight: 400;
}

.footer--links h3 {
    font-size: large;
    margin-bottom: 1.5rem;
}

.footer--links > div {
    display: flex;
    flex-direction: column;
} 

.footer--links a {
    font-weight: bold;
    color: var(--just-white);
    text-decoration: none;
    margin: 2%;
    width: 50%;
    transition: all 200ms linear;
}


.footer--by {
    font-size: large;
    color: var(--just-white);
    text-align: left;
    padding: 3%;
    margin-top: 5rem;
}


.footer--github {
    padding: 0 2%;
    display: flex;
    text-align: left;
    align-items: center;
}

.footer--github a {
    font-weight: bold;
    font-size: large;
    padding: 0.8%;
    color: var(--just-white);
    text-decoration: none;
}

.footer--github-button-profile:hover, .footer--github-button-repository:hover {
    transform: scale(1.05);
    transition: transform 200ms linear;
}

.footer--github-button-profile, .footer--github-button-repository {
    transform: scale(1);
    transition: transform 200ms linear;
}

.footer--links a:hover {
    color: var(--saturate-orange);
    transition: all 200ms linear;
}

.footer--github-button-profile:active, .footer--github-button-repository:active, .footer--links a:active {
    color: var(--soft-purple);
}

.footer--repository {
    padding: 3%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    font-size: medium;
    color: var(--just-white);
}

.footer--repository a {
    margin-right: 3rem;
    font-weight: bold;
    color: var(--just-white);
    text-decoration: none;
}