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

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

/* ===========================
   PAGE
=========================== */

html,
body{

    width:100%;
    height:100%;

    background:#fff;

    overflow:hidden;

}

body{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:2vmin;

}

/* ===========================
   SVG CONTAINER
=========================== */

.homepage{

    position:relative;

    /* scales nicely on every screen */

    width:min(92vw,70vh);

    /* CHANGE THIS IF YOUR SVG HAS A DIFFERENT SHAPE */

    aspect-ratio:0.72 / 1;

}

/* ===========================
   SVG
=========================== */

.homepage img{

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

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

}

/* ===========================
   HOTSPOTS
=========================== */

.hotspot{

    position:absolute;

    display:block;

    z-index:20;

    cursor:pointer;

    /* SHOW HOTSPOTS */

    /*background:rgba(255,0,0,.20);

    //border:2px solid red;

    transition:.2s;*/

}

.hotspot:hover{

    background:rgba(0,150,255,.25);

}

/* ===========================
   HOTSPOT POSITIONS
=========================== */

#work{

    left:18%;
    top:43%;

    width:17%;
    height:4.2%;

}

#projects{

    left:20%;
    top:52%;

    width:50%;
    height:4.2%;

}

#otherprojects{

    left:21%;
    top:60%;

    width:40%;
    height:4.2%;

}

#about{

    left:21%;
    top:68%;

    width:20%;
    height:4.2%;

}

#contact{

    left:21%;
    top:77%;

    width:20%;
    height:4.2%;

}

/*--------------------------
ABOUT
----------------------*/

.about-header {
    display: flex;
    justify-content: center;
    margin: 2rem 0 3rem;
}

.about-title {
    width: min(90%, 700px);
    height: auto;
    display: block;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===========================
   HOME LINK
=========================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:1rem 1.5rem;
    z-index:1000;
}

.home-link{
    text-decoration:none;
    color:#000;
    font-size:1rem;
    font-family:inherit;
}

.home-link:hover{
    text-decoration:underline;
}

/* ===========================
   LARGE MONITORS
=========================== */

@media (min-width:1600px){

    .homepage{

        width:min(75vw,85vh);

    }

}

/* ===========================
   TABLETS
=========================== */

@media (max-width:900px){

    .homepage{

        width:min(96vw,88vh);

    }

}

/* ===========================
   PHONES
=========================== */

@media (max-width:600px){

    body{

        padding:1rem;

    }

    .homepage{

        width:98vw;

    }

    .hotspot{

        border-width:1px;

    }

}