@charset "UTF-8";

html, body {
    margin: 0;
    padding: 0;
    text-align: center; 
}

.header-container {
    height: 50px;
    background-color: #FFA07E;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align: bottom;
}

h1 {
    font-family: jeanne-moderno-geometrique,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2rem;
    color:white;
}

.smile-icon {
    width: 100px;
    height: 100px;
    margin: -25px auto; 
}

h2 {
    font-family: jeanne-moderno-geometrique,sans-serif;
    font-weight: 700;
    font-style: normal;
    color: white; 
}

p, ul, li, a {
    margin: 0;
    padding: 0; 
}

p {
    font-family: prestige-elite-std, monospace;
    font-weight: 400;
    font-style: normal;
    border-radius: 15px 50px 30px;
    width: 300px;
    border: 15px solid#724271;
    padding: 50px;
    margin: 20px;
    height: 30%;
    background-color: #724271;
    color: white;  

}

a:link
{   text-decoration: none;
    color: #ffffff;
}

a:visited
{   text-decoration: none;
    color:#f1aae1;
}

a:hover 
{   text-decoration: none;
    color: #FFA07E;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 10px;
    gap: 10px 20px;
    row-gap: 10px;
    column-gap: 20px;
}

.box0 {
    text-align: center;
    vertical-align: middle;
    font-family: prestige-elite-std, monospace;
    font-weight: 400;
    font-style: normal;
    border-radius: 15px 50px 30px;
    width: 300px;
    border: 15px solid#724271;
    padding: 30px;
    margin: 20px;
    height: 20%;
    background-color: #724271;
    color: white;
}

.box1 {
    text-align: center;
    vertical-align: middle;
    font-family: prestige-elite-std, monospace;
    font-weight: 400;
    font-style: normal;
    border-radius: 15px 50px 30px;
    width: 300px;
    border: 15px solid#724271;
    padding: 30px;
    margin: 20px;
    height: 30px;
    background-color: #724271;
    color: white;
}

.box2 {
    text-align: center;
    vertical-align: middle;
    font-family: prestige-elite-std, monospace;
    font-weight: 400;
    font-style: normal;
    border-radius: 15px 50px 30px;
    width: 300px;
    border: 15px solid #CE96B3;
    padding: 30px;
    margin: 20px;
    height: 30px;
    background-color: #CE96B3;
    color: white;
    
}

.box3 {
    text-align: center;
    vertical-align: middle;
    font-family: prestige-elite-std, monospace;
    font-weight: 400;
    font-style: normal;
    border-radius: 15px 50px 30px;
    width: 300px;
    border: 15px solid #734681;
    padding: 30px;
    margin: 20px;
    height: 30px;
    background-color: #734681;
    color: white;
}
 
.camera-icon {
    position: relative;
    top: -290px;
    left: -260px;
} 

.books-icon {
    position: relative;
    top: -290px;
    left: -30px;
}

.one-icon {
    position: relative;
    top: -280px;
    left: -260px;
}

.two-icon {
    position: relative;
    top: -290px;
    left: -28px;
}

.three-icon {
    position: relative;
    top: -280px;
    left: -260px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

body {
    background-image: url("../images/stars-background.png");
    background-size: cover;
}

header { 
  height: 150px; 
  background-image: url("../images/thistle-header.jpg"); 
  background-size: cover; 
  background-position: center; 
 
}