/* ===========================
   RESET
=========================== */

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

html,
body{
    width:100%;
    min-height:100%;
}

/* ===========================
   BODY
=========================== */

body{
    background-color:#35404b;
    background-image:url("website-bg.gif");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% 100%;
    color:#fff;
    font-family:Helvetica, Arial, sans-serif;
}

/* ===========================
   LOGO
=========================== */

.logo{

    position:fixed;
    top:10px;
    left:10px;

    width:60px;
    height:auto;

    z-index:99999;

    -webkit-user-drag:none;
    user-drag:none;
   
   -webkit-user-select:none;
   user-select:none;

    transition:.25s ease;

}

/* ===========================
   MAIN CONTAINER
=========================== */

.about-container{

    width:min(700px,90vw);

    margin:auto;

    padding:140px 0;

}

/* ===========================
   TEXT
=========================== */

.intro,
.ending{

    width:100%;

}

.intro p,
.ending p{

    font-size:clamp(18px,2vw,23px);

    font-weight:700;

    line-height:1.35;

    margin-bottom:22px;

}

.intro p:first-child{

    font-size:clamp(22px,2vw,30px);

}

/* ===========================
   IMAGE
=========================== */

.imaginary-friend{

    display:flex;

    justify-content:center;

    margin:60px 0;

}

.imaginary-friend img{

    width:min(220px,55vw);

    height:auto;

    display:block;

    -webkit-user-drag:none;
    user-drag:none;

   -webkit-user-select:none;
   user-select:none;

   pointer-events:none;

}

/* ===========================
   EMAIL
=========================== */

.email{

    display:inline-block;

    margin-top:20px;

    color:#fff;

    text-decoration:none;

    font-size:clamp(22px,2vw,30px);

    font-weight:700;

    transition:.25s ease;

}

.email:hover{

    opacity:.6;

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:700px){

.about-container{

    padding-top:100px;
    padding-bottom:100px;

}

.imaginary-friend{

    margin:50px 0;

}

}