@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');



body,html{margin:0;padding:0} *,*::before,*::after{box-sizing:border-box; position:relative;}

@font-face {
    font-family: "gotham";
    src: url("fonts/Gotham-Medium.otf");
}
@font-face {
    font-family: "hls";
    src: url("fonts/new/EBGaramond-Italic-VariableFont_wght.ttf");
}
@font-face {
    font-family: "gotham-bold";
    src: url("fonts/Gotham-Bold.otf");
}

:root{
--violet:#482683;
--lightviolet:#A1A3D2;
--lightblue:#D8EAE9;
--lightblue2:#D3E3F3;
--pink:#F5DFE1;
--lighterviolet:#D7D8EA;
--gap:2rem;
}

body,html{background: url("img/bg.jpg") ; background-size: 500px;}

.page{display: grid;width:100%;height:100dvh;left:0;top:0; grid-template-rows: 1fr 1fr; overflow: clip;}

.top{display:flex;align-items:center; justify-content:center;}
.top img{width: 500px; padding: 2rem;}
.bottom{display:flex;align-items:flex-start; justify-content:center;}
.bottom:before{content: ""; width:100%;height:120%;left:0%; transform: skewY(3deg); background-color: var(--lighterviolet); position: absolute; top: -10%;}
.bottom >div{max-width: 500px; color: var(--violet); text-align: center;padding: 2rem;}
h1,p{margin: 0; padding: 0;}
h1{font-family: hls; padding-bottom: 2rem; font-size: 45px; font-weight: 550; line-height: 2.5rem;}
p{font-family: gotham;}

@media (max-width: 600px) {
    .page{grid-template-rows: .8fr 1fr;}
    .top img{width: 300px;}
    h1{font-size: 30px; line-height: 1.5rem;}
    p{font-size: .9rem; line-height: 1.3rem;}
    
}