::-moz-selection { /* Code for Firefox */
    color: white;
    background: #d72222;
}
  
::selection {
    color: white;
    background: #d72222;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #dedede;
    border-radius: 10px;

}



*{
    margin:0;
    transition: 0.1s;
}

button:active
{
    opacity: 0.8;
}

body
{
    margin:0;
    padding:0;
    font-family: 'Nunito',sans-serif;
    background-color: #f6f6f6;
    box-sizing: border-box;
    width:100%;
    -webkit-tap-highlight-color: transparent;
}

.giantbox
{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: left;
}

.leftbox
{
    box-sizing: border-box;
    width:calc(50% - 400px);
}

.innerbox
{
    width:800px;
    height: 100%;
    padding:20px;
    padding-bottom: 0px;
    box-sizing: border-box;
}

.rightbox
{
    box-sizing: border-box;
    width:calc(50% - 400px);
}

.header
{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.header h2
{
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
}

.header h2 img
{
    width: 25px;
    margin-right: 2px;
}

.header a
{
    text-decoration: none;
    color:white;
    background-color: #d72222;
    padding:4px;
    padding-left:10px;
    padding-right: 10px;
    font-size:16px;
    font-family: 'Nunito',sans-serif;
    font-weight:600;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    border-radius:7px;
}

.header a img
{
    width:18px;
    margin-right:5px;
    user-select: none;
    pointer-events: none;
}

.header a:active
{
    opacity: 0.8;
}

.title
{
    margin-top: 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wallpaperbox
{
    width: 100%;
    margin-top: 30px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap:10px;
}

.wallpaper
{
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    border-radius:10px;
    border:1px solid #DEDEDE;
    aspect-ratio: 9/16;
}

.wallpaper:hover
{
    transform: scale(0.95);
    opacity: 0.8;
}

.wallpaper button
{
    text-decoration: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border:0;
    background-color: #f0f0f0;
    padding:0;
    cursor: zoom-in;
}

.wallpaper button img
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform: scale(1.8);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.wallpaper img.loaded {
    opacity: 1;
}

.descriptionbox
{
    width: 100%;
    box-sizing: border-box;
    padding:20px;
    margin-top: 100px;
}

.descriptionbox h2
{
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: black;
    font-size: 25px;
    text-align: center;
    margin-bottom: 15px;
}

.descriptionbox p
{
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    color: #838383;
    font-size: 19px;
    margin-bottom: 100px;
    text-align: left;
}

.imagepreviewgiantbox
{
    width: 100%;
    height:100vh;
    box-sizing: border-box;
    background-color: #f6f6f6;
    position:fixed;
    top:0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.imagepreviewgiantboxclose
{
    position: absolute;
    right:0;
    top:0;
    box-sizing: border-box;
    padding:20px;
}

.imagepreviewgiantboxclose button
{
    border:0;
    background-color: transparent;
    cursor: pointer;
}

.imagepreviewgiantboxclose button img
{
    width:50px;
    user-select: none;
    pointer-events: none;
}

.imagepreviewgiantboxclose button:hover
{
    opacity: 0.5;
}

.imagepreviewgiantboxclose button:active
{
    opacity: 0.5;
}

.imagepreviewbox
{
    width:300px;
    box-sizing: border-box;
}

.imagepreviewbox img
{
    width:100%;
    border-radius:10px;
    box-sizing: border-box;
    border:1px solid rgba(0,0,0,0.1);
    margin-bottom: 10px;
    aspect-ratio: 9/16;
    background-color: #f0f0f0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.imagepreviewbox a
{
    display: block;
    width: 100%;
    padding:10px;
    background-color: #d72222;
    color:white;
    font-size:15px;
    font-weight:700;
    border-radius:5px;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Nunito',sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagepreviewbox a:active
{
    opacity: 0.8;
}

.imagepreviewbox a img
{
    border: 0;
    margin: 0;
    border-radius: 0;
    width: 16px;
    margin-right: 5px;
    background-color: transparent;
    opacity: 1;
}

.pinterestbox
{
    position: fixed;
    right:0;
    bottom:0;
    box-sizing: border-box;
    padding:20px;
}

.pinterestbox a
{
    border:0;
    background-color: transparent;
    box-sizing: border-box;
    width:50px;
    height:50px;
    text-decoration: none;
    display: block;
}

.pinterestbox a img
{
    width: 100%;
    box-sizing: border-box;
    user-select: none;
    pointer-events: none;
}

.wallemojifooter
{
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 50px;
    user-select: none;
    pointer-events: none;
}

.wallemojifooter p
{
    color: black;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
}

.wallemojifooter span
{
    font-weight: 700;
    margin-right: 3px;
}

.wallemojifooter p img
{
    width: 17px;
    margin-right: 2px;
    user-select: none;
    pointer-events: none;
}


.footerbox
{
	width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 20px;
    /* padding-top: 50px; */
    /* padding-bottom: 50px; */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background-color: #262626;
    border-radius: 15px 15px 0px 0px;
    margin-top: 50px;
}

.footer
{
    width: 800px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap:30px;
}

.footerelement img
{
    width:150px;
    box-sizing: border-box;
    user-select: none;
    pointer-events: none;
    margin-bottom: 10px;
}

.footerelement p
{
	font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: grey;
    margin-top: 5px;
}

.footerelement h2
{
	font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #dadada;
    margin-bottom: 10px;
}

.footerelement a
{
	font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: grey;
    text-decoration: none;
    display: flex;
    margin-bottom: 10px;
}

.footerelement a:hover
{
    text-decoration: underline;
}

.footerelementlogo h2
{
	font-family: 'Zilla Slab', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: #f2f2f2;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin: 0;
}

.footerelementlogo h2 img
{
	width: 20px;
    user-select: none;
    pointer-events: none;
	margin:0;
    margin-right: 5px;
}



@media screen and (max-width: 800px) {
    .leftbox{
        display: none;
    }
    .innerbox {
      width:100%;
    }
    .rightbox{
        display: none;
    }
    .wallpaperbox{
        grid-template-columns: 1fr 1fr;
    }
    .imagepreviewgiantbox{
        padding:50px;
    }
    .imagepreviewbox{
        width: 100%;
    }
    .footer
    {
        width: 100%;
        grid-template-columns: 1fr;
        text-align: center;
    }
	.footerelementlogo h2
	{
		justify-content: center;
	}
    .footerelement a
    {
        justify-content: center;
    }
  }