@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    border:0;
    font-family: Jost;
}
.button{
    color: yellow;
    text-shadow: 2px 2px 3px rgb(255, 255, 255);
}

.button:hover{
    color: rgb(0, 240, 230);
    background-color: yellow;
}

body{
    background-color:palegoldenrod;
}
.big-container{
    width:1080px;
    margin:auto;
    background-color: rgb(240, 240, 230);
}

header,
main{padding:2em;};
footer{
    width:100%;
}



header{
    width:100%;
    margin-bottom: 2em;
    background: linear-gradient(rgba(1,5,27,0.5), rgba(234,225,202,0.6)),
     url("beach.jpg");
    background-repeat: no-repeat;
    height:100vh;
    padding: 3em;
}

ul{
    text-align: right;
}

nav li{
    display:inline-block;
    list-style-type: none;
    margin: 1em;
}

nav a{
    text-transform:uppercase;
    font-family: 'Jost', sans-serif;
    text-decoration: none;
}

header h1, header h2{
    margin-top: 2em;
    margin-bottom: 1em;
    color: rgba(255, 255, 0, 0.678);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.69);
}
h2{
    margin:1.5em
}

h3{
    margin-bottom:1em;
}

p{
    margin:1.2em;
    line-height: 1.5em;
}

.left-image{
    display:flex;
    justify-content: space-evenly;
}

.right-image{
    display:flex;
    justify-content: space-evenly;
    padding-right:20px;
}

.text-picture{
    width:25%;
    max-width: 400px;
    border:10px rgb(255,200,255);
    border-radius: 5px;
}

/*card styler*/
.card{
    width: 15%;
    max-width:300px;
    border:1px solid rgb(255,200,255);
    border-radius:10px;
    max-height:3000px;
    box-shadow: 0 0 15px 5px rgb(131, 62, 116);
    overflow:hidden;
}

.card-box{
    display:flex;
    padding: 10px;
    justify-content: space-evenly;
}

.card img{
    width:100%;
    height:100px;
}
.card-text{
    text-align:center;
}
.card-text a{
    text-decoration: none;
    color:aqua;
}