@font-face {
    font-family: 'Calson';
    src: url('../assets/fonts/LibreCaslonText-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cardinal';
    src: url('../assets/fonts/Cardinal.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Akira';
    src: url('../assets/fonts/Akira\ Expanded\ Demo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


:root {
    background-image: url(../assets/img/backgrounds/MOON.png);
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: 'Calson';
    font-size: 20px;
    font-weight: 400;
    text-align: justify;
    color: 	#6885AD;
}

/* text format */

h1{
    font-family: 'Akira';
    font-weight: 900;
    font-size: 40px;
    text-align: center;
    letter-spacing: 10px;
    color: #F45A2D; 
    display: inline-block;
    transform: scaleY(4);
    padding: 5%;
    margin-top: 13%;
}

h2{
    font-family: 'Akira';
    font-weight: 900;
    font-size: 25px;
    text-align: center;
    letter-spacing: 10px;
    color: #F45A2D; 
    display: inline-block;
    transform: scaleY(1.5);
    padding: 5%;
}

.subtitle{
    font-family: 'Calson';
    font-weight: 900;
    font-size: 24px;
    text-align: left;
    margin: 2% 0%;
}

.name{
    font-family: 'Calson';
    font-weight: 900;
    font-size: 20px;
    text-align: left;

    margin: 2% 0%;
}


p{
    line-height: 2;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #F45A2D;
}

li{
    line-height: 2;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 10%;
}

.center {
    text-align: center;
}

strong{
    font-weight: bold;
}

em{
    font-style: italic;
}

a{
    text-decoration: none;
    color: 	#6885AD;
}

a:hover{
    color: #F45A2D;
    text-decoration: underline;
    cursor: pointer;
}

.calson {
    font-family: 'Calson';
    font-size: 22px;
}

.cardinal {
    font-family: 'Cardinal';
    font-size: 26px;
    text-align: center;
    margin-bottom: 8%;
    color: #4DB6AC; 
}

.first {
    background-color: #FDE1B3;
    width: 56%;
    height: 100%;
    position: fixed;
    left: 10%;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1000;
}

.photo {
    height: 10%;
}

.content {
    padding: 5%;
}

.menu{
    background-color: #FDE1B3;
    width: 12%;
    height: 100%;
    position: fixed;
    left: 80%;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 1000;
    padding-left: 2%;
    padding-top: 5%;
}

nav {
    padding-bottom: 8%;
}

.goals, .habits, .dreams {
    border: 4px dotted #F45A2D;
    border-radius: 15px;
    margin: 5% 0%;
    padding: 2%;
}

.goals-img {
    position: absolute;
    top: 440px;
    right: -6px;
    width: 600px;
    z-index: 1100;
}

.habits-img {
    position: absolute;
    top: 1260px;
    right: -50px;
    width: 800px;
    z-index: 1100;
}

.dreams-img {
    position: absolute;
    top: 1675px;
    right: 50px;
    width: 500px;
    z-index: 1100;
}