:root{
    --primary-color: rgb(39, 39, 39);
    --highlight-color: rgb(53, 53, 53);
    --dark-color: rgb(32, 32, 32);
    --text-color: rgb(236, 236, 236);
}

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: var(--primary-color);
    font-family: "Lexend Deca", sans-serif;
    color: var(--text-color);
}

.title{
    text-align: center;
    font-size:40px;
    margin:0px;
    margin-top:24px;
    font-weight:bold;
}

.pageText{
    text-align: center;
    margin:0px;
    margin-top:24px;
    font-size:24px;
}

.imagesBox{
    width:50%;
    left:0px;
    position:relative;
    flex-basis: 50%;
    overflow-y: auto;
}

.board{
    width:50%;
    right:0px;
    position:relative;
    flex-basis: 50%;
    overflow-y: auto;
}

.wrapper{
    width:80%;
    margin-left:10%;
    display: flex;
}

#searchBox{
    height:45px;
    width:80%;
    border:none;
    border-radius:1000px;
    outline:none;
    padding-left:30px;
    font-family: "Lexend Deca", sans-serif;
    font-weight:bold;
    background-color:var(--highlight-color);
    color: var(--text-color)
}

#searchButton{
    height:45px;
    width:100px;
    border-radius:1000px;
    outline:none;
    border:none;
    font-family: "Lexend Deca", sans-serif;
    font-weight:bold;
    font-size:14px;
    background-color:var(--highlight-color);
    color: var(--text-color);
    cursor:pointer;
}

.searchDiv{
    text-align: center;
    margin-top:40px;
    margin-bottom:8px;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-left:10px;
    margin-right:10px;
    height:64px;
}

.headerDiv{
    margin-top:40px;
    margin-bottom:8px;
    height:64px;
}

#pinnedImages{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:auto;
    justify-content:center;
}

#results{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:auto;
    justify-content:center;
}

img{
    border-radius:20px;
    margin:10px;
    height:250px;
    width:160px;
    overflow: hidden;
    object-fit: cover;
    user-select:none;
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.image{
    display:inline;
}

.header{
    text-align: center;
    font-size:36px;
}

#pexelsLink{
    font-size:24px;
    font-weight:bold;
    color: var(--text-color);
    margin-bottom:32px;
    margin-top:32px;
}

#linkDiv{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;   
}

@media(max-width:600px){
    .pageText{
        margin-left:20px;
        margin-right:20px
    }
}