body {
  color: #814F4D;
  font-family: "zain", serif;
  font-size:18px;
  font-weight:bold;
}

::-webkit-scrollbar{
width: 3px; 
}
 
::-webkit-scrollbar-track{
  background-color: transparent;
}
 
::-webkit-scrollbar-thumb{
background-color: #DF9017;
}


.life-savers-regular {
  font-family: "Life Savers", serif;
  font-weight: 400;
  font-style: normal;
}

.life-savers-bold {
  font-family: "Life Savers", serif;
  font-weight: 700;
  font-style: normal;
}

.life-savers-extrabold {
  font-family: "Life Savers", serif;
  font-weight: 800;
  font-style: normal;
}

.zain-extralight {
  font-family: "Zain", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.zain-light {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zain-regular {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zain-bold {
  font-family: "Zain", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zain-extrabold {
  font-family: "Zain", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.zain-black {
  font-family: "Zain", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.zain-light-italic {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.zain-regular-italic {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.yarndings-20-regular {
  font-family: "Yarndings 20", system-ui;
  font-weight: 400;
  font-style: normal;
}


#postcard{
position:fixed;
top: 40px;
left:90px;
transform: rotate(357deg);
}

#header{
position:fixed;
top: 395px;
left: 140px;
transform: rotate(356deg);
color:#FF0000;
  text-shadow:0px 0px 8px #ffffff;
}

#cardback{
position:fixed;
top: 135px;
left: 560px;
transform: rotate(4deg);
}

#card{
position:fixed;
top: 150px;
left: 570px;
transform: rotate(4deg);
height:375px;
width:521px;
padding:10px;
}

#nav{
position:fixed;
top: 265px;
left: 1130px;
transform: rotate(4deg);
height:265px;
width:130px;
overflow-x:hidden;
overflow-y:scroll;
overflow: auto;
}

#icicles{
position:fixed;
top: -100px;
left: 0px;
height:317px;
width:100vw;
   background-image: url('icicle.png');
     background-repeat infinte;
}

 
h1{
margin: 0px;
color: #ff0000;
font-size: 45px;
font-weight: bold;
font-family: "life savers", cursive;
}

h2{
margin: 0px;
color: #536A36;
font-size: 36px;
font-weight: bold;
text-align: right;
font-family: "life savers", cursive;
}

h3{
  margin: 0px;
color: #DF9017;
font-size: 36px;
font-weight:normal;
text-align: center;
    font-family: "Yarndings 20", system-ui;
}

a{
text-decoration: none;
color: #96600F;
 font-family: "zain", sans-serif;
font-size: 14pt;
}


#header a{
margin: 0px;
color: #ff0000;
font-size: 45px;
font-weight: bold;
font-family: "life savers", cursive;
}

#orn1{
position:fixed;
top: -35px;
left: 1280px;
transform: rotate(335deg);
}

#orn2{
position:fixed;
top: -5px;
left: 0px;
transform: rotate(25deg);
}

#orn3{
position:fixed;
top: 300px;
left: 310px;
transform: rotate(357deg);
}

#orn4{
position:fixed;
top: 154px;
left: 1045px;
transform: rotate(359deg);
}