:root{--font-x: "Caveat", cursive;--font-header: "Comfortaa", cursive;--font-main: "Play", sans-serif;--font-light: #fffff2;--font-dark: #343231}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:var(--font-main);color:var(--font-light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;width:100%;min-width:250px}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.form_container_wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-25%);width:100%;max-width:800px;min-width:250px;margin:0 auto}.x{font-family:var(--font-x);margin-right:2.5px}h1 .x{margin-right:10px;font-size:4rem}h1{font-family:var(--font-header);font-size:4rem;text-align:center;margin-top:5rem}#convert_text{font-size:1.5rem;width:60%;text-align:center;margin:1rem auto 5rem}.button{font-family:var(--font-header)}.main_button_x{color:var(--font-dark)}.modal_title{font-family:var(--font-header)}.modal_text h3,.modal_text p,.modal_text span,.modal_text a{color:var(--font-dark)}.form_grid{z-index:1;padding:0 .5rem;display:grid;grid-template-areas:"top top top top top top top" "left mid mid right right right right";grid-template-rows:auto;grid-template-columns:repeat(7,1fr);min-width:250px}.form_grid h3{grid-area:top;font-size:1.5rem;margin:.4rem 0}.form_img{grid-area:left;display:flex;justify-content:center;align-items:center}.form_grid input{grid-area:mid;margin-right:.5rem}#currency_to_convert,#target_currency{grid-area:right}.flex_center{display:flex;justify-content:center;align-items:center}.form_div img{width:40px;height:40px}@media screen and (min-width: 800px){h1,h1 .x{margin-top:10rem;font-size:6rem}}@media screen and (max-height: 800px){h1{margin-top:2rem}#convert_text{margin-bottom:1rem}}@media screen and (max-height: 540px){.form_container_wrapper{margin:1rem auto;position:static;transform:none;top:auto;left:auto}#convert_text{margin:20px auto}}@media screen and (max-width: 310px){h1,h1 .x{font-size:2rem}.form_grid h3,#convert_text{font-size:1rem}#convert_text{margin-bottom:.5rem}}
