@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@font-face {
font-family: 'Skia';
font-style: normal;
font-weight: normal;
src: local('Skia'), url('skia.woff') format('woff');
}

* {margin:0;padding:0;text-decoration: none;}
*, *::before, *::after {box-sizing: border-box;}
li{list-style-type: none;}
h1,h2,h3,h6{text-align:center;}
img {max-width: 100%; height: auto;}

h2.appeal{padding:20px;color:var(--primary);background-color:var(--middle);width:90%;margin:0 auto;}

.appeal .star{color:var(--gold-light);}

section p{font-size:1.2em;padding:30px;color:#333;}
section h2{color:var(--secondary);padding:5px;font-size:2rem;}

:root {
--primary: white;
--secondary: #2A549C;
--middle: #4c7ed5;
--light: aliceblue;

--blue-dark: #2A549C;
--blue: #597cbf;
--blue-mid: #8da7cf;
--blue-light: #bcd2e3;

--gold-dark: #960;
--gold: #cc99aa;
--gold-mid: #e6ccd5;
--gold-light: rgb(255, 212, 148);

--pink-dark: #f09;
--pink: #f4c7d4;
--pink-mid: #f8e0e7;
--pink-light: #fcecf2;



--gold: #960;
--pink: #f09;
}




body {
background: var(--light);
font-family: 'Work Sans', sans-serif;font-weight: 400;
border-top:2px var(--primary) solid;
}

a {font:bold 1.1em/1.2em serif;color:var(--middle); border-bottom: 1px var(--gold) solid;}

a:hover {border-color:var(--pink);color:var(--gold);color:#999;}

.container{max-width:1000px;margin:auto; border:#4c7ed5 1px solid;}

.star{color:var(--gold);margin-left:3px;padding:0;}

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
}

.h3-icon{font-size:2rem;}

.material-symbols-outlined{
font-size:4rem;
}


a.btn {
border: none;
font-family: inherit;
font-size: 0.8rem;
color: inherit;
background: none;
cursor: pointer;
padding: 10px 5px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

a.btn .star{color:var(--gold-light)}

a.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

a.btn-gold {
background: var(--gold);
color: var(--primary);
box-shadow: 0 6px var(--gold-light);
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

a.btn-gold {
border-radius: 40px;
}

a.btn-gold {
box-shadow: 0 4px var(--gold-light);
top: 2px;
}

a.btn-gold:active {
box-shadow: 0 0 var(--gold-light);
top: 6px;
}

input,textarea{
background: rgba(255,255,255,0.05);
padding: 10px 16px;
border-radius: 20px;
border: 2px solid #9893D8;
color: #f2f2f2;
font-size: 1em;
}