* {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

.container {
    width:550px;
    margin:0 auto;
}

/* ========================
          LAYOUT
============================ */

body {
    background: rgba(229, 229, 229, 1);
    font-family: 'Poppins', sans-serif;
    color: #F8F8F8;
}

header {
    background-color: #fff;
    height:81px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

main {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 100%);
}

.profiles{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 600px auto auto;
}
/* ========================
          TYPOGRAPHY
============================ */
h3,
p {
    margin-left:30px;
}

h3 {
    font-size:2.5rem;
}

p{
    font-size:1.5rem;
    font-weight:400;
    color: #B7B7B7;
    margin-bottom:15px;
}

.info {
    grid-column: 1/2;
    grid-row:2/3;
    z-index: 1;
}

.bio {
    grid-column:1;
    grid-row:3;
    z-index: 1;
}
/* ========================
          IMAGES
============================ */

img {
    width: 100%;
}
/* Icons */

.profile-icon, 
.logo-icon,
.chat-icon {
    display:block;
}

.profile-icon{
    width:32.33px;
}

.logo-icon {
    width:84px;
}

.chat-icon {
    width:34px;
}

.like-icon {
    width:48px;
}

.nope-icon {
    width:40px;
}

/* Profile Imgs */

.profile-img, .profile-img-div::after {
    border-radius: 15px;
    margin:0px 8px;
}

.profile-img{
    height: 100%;
}

.profile-img-div{
    position: relative;
    width:534px;
    grid-column:1 / -1;
    grid-row: 1 / -1;
}

.profile-img-div::after{
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) -11.44%, rgba(0, 0, 0, 0) 39.97%);
}

/* Nope/Like Banners */

.nope-img,
.like-img {
    display: none;
    width:233px;
    transform: rotate(-30deg);
    margin-top:50px;
    margin-left:25px;
    grid-column:1/ 2;
    grid-row:1 / 2;
    z-index: 1;
}
/* ========================
          BUTTONS
============================ */

.btns {
    display:flex;
    justify-content: center;
    align-items: center;
}

button{
    display:block;
    width:92px;
    height:92px;
    border-radius:50%;
    border:none;
    background-color:#fff;
    box-shadow: 0px 10px 20px #E9E9EA;
    margin:10px 12px 22px 12px;
}

.like-btn:hover,
.like-btn:focus{
    background-color:#DBFFF4;
    box-shadow: 0px 10px 20px #CCF1E6;
}

.nope-btn:hover,
.nope-btn:focus{
    background-color:#FFE7EF;
    box-shadow: 0px 10px 20px #EDD9DF;
}