@font-face {
  font-family: Balsamiq; 
  src: url(Fonts/Balsamiq_Sans/BalsamiqSans-Regular.ttf); 
}
@font-face {
  font-family: Jua; 
  src: url(Fonts/Jua/Jua-Regular.ttf); 
}
@font-face {
  font-family: Risque; 
  src: url(Fonts/Risque/Risque-Regular.ttf); 
}
/* helloo, I don't mind you taking a peek at my code but fyi 
it's a mess cause I keep changing and removing stuff */
:root {
    --Blue-color: #b4879e;
    --Red-color: #c8577d; 
    --Green-color: #d98cad; 
    --Dark-color: #5b3951; 
    --bg-color: #f5e1ee; 
    --Large-font: 40px; 
    --Medium-font: 30px; 
    --Small-font: 25px; 
    --Blog-font: 18px; 
    --Headline-font: Risque; 
    --Written-font: Balsamiq;
}

body{
    background-color: var(--bg-color);
    background-image: url(plaid-cotton-candy.jpg);
}

.Center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
}
#notFoundd{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: var(--Headline-font);
    font-size: var(--Small-font);
    color: var(--Dark-color);
    text-align: center;
    margin-top: 10%;
}

#Entrance{
 display: flex;
 justify-content: center;
 margin-top: 10%;
 width: 100%;
}
#warnings{
    width: 35%;
    color: var(--Dark-color);
    font-family: var(--Written-font);
    font-size: 25px;
    border: 30px solid transparent; 
    border-image: url(whitelace.png) 34 round;
    padding: 10px;
    border-image-slice: 34 fill;
}
#warnTop{
    display: flex;
    justify-content: space-between;
}
.Headlines{
    font-size: 55px;
    font-family: var(--Headline-font);
    display: flex;
}
a.greenL{color: var(--Green-color);}
a.greenL:link  {text-decoration: underline; color: var(--Green-color);}
a.greenL:hover {text-decoration: underline; color: var(--Blue-color);}

a.blueL{color: var(--Blue-color);}
a.blueL:link  {text-decoration: underline; color: var(--Blue-color);}
a.blueL:hover {text-decoration: underline; color: #92a4c4;}

a.redL{color: var(--Red-color);}
a.redL:link  {text-decoration: underline; color: var(--Red-color);}
a.redL:hover {text-decoration: underline; color: #92a4c4;}

img.m1{
  width: 100%;
  height: auto;
}

#home{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 3%;
    width: 100%; 
}
#hTop{
   width: 45%;
   justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 30px solid transparent; 
    border-image: url(whitelace.png) 34 round;
    padding: 10px;
    border-image-slice: 34 fill;
}
#img1{
    width: 40%;
}
#homeIntro{
    font-size: var(--Small-font);
    width: 90%;
    color: var(--Dark-color);
    text-align: center;
    font-family: var(--Written-font);
}
#hMenu{
    margin-top: 1%;
     font-family: var(--Headline-font);
    font-size: var(--Large-font);
    color: var(--Dark-color);
}
#hBottom{
    font-size: var(--blog-font);
    width: 90%;
    color: var(--Dark-color);
    text-align: center;
    font-family: var(--Written-font);
    margin-top: 2%;
}
#rss{
    color:var(--Blue-color);
}
#guestbook{
    color: var(--Blue-color);
}
#back2intro{
    color: var(--Red-color);
}

#about{
     display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 3%;
    width: 100%; 
}
#aTop{
    width: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
img.aboutImg{
    width: 70%;
    height: auto;
}
#aDivider{
    display: flex;
    justify-content: center;
}
#aboutInfo{
    font-family: var(--Written-font);
    font-size: var(--Small-font);
    color: var(--Dark-color);
    text-align: center;
}

@media (max-width: 912px){
    #warnings{
    width: 85%;
    }
    #hTop{
        width: 80%;
    }
       #aTop{
        width: 75%;
    }
}
@media (max-width: 430px){
    #warnings{
    width: 95%;
    }
    #hTop{
        width: 90%;
    }
    #homeIntro{
        width: 95%;
    }
    #hMenu{
        font-size: var(--Medium-font);
        margin-bottom: 2%;
    }
    #aTop{
        width: 95%;
    }
}