@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
}
html, body{
    background: #1d1d19;
    width: 100%;
    height: 100%;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
a{
    color: #dad7d4;
    /*color: #fff;*/
    text-decoration: none;
    font-weight: 300;
}
a:hover{
    color: #c6a99b;
}

.logo{
    position: absolute;
    top: 50px;
    left: 50px;
    width: 30%;
    height: 30%;
    z-index: 999;
    transition: top 300ms, width 300ms, height 300ms;
}
.logo img{
    max-width: 100%;
    max-height: 100%;
}

.intro{
    position: absolute;
    bottom: 10%;
    left: 50px;
    font-size: 20pt;
    color: #fff;
    width: 840px;
    transition: opacity 300ms 100ms;
    color: #c8bab3;
}

#page{
    position: absolute;
    /*top: 5%;*/
    /*left: 5%;*/
    bottom: 5%;
    right: calc(10% + 500px);
    top: calc(20px + 10%);
    left: 50px;
    /*top: 0;*/
    /*left: 0;*/
    /*bottom: 0;*/
    /*right: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background: rgba(255,255,255,0.8);*/
    /*background: rgba(153, 143, 137, 1);*/
    /*background: #c8bab3;*/
    background: #333;
    /*background: #1d1d19;*/
    z-index: 999;
    border-radius: 30px;
    opacity: 0;
    transition: opacity 300ms, transform 300ms, box-shadow 300ms;
    display: none;
    /*box-shadow: 0 0 0 0 #13130f, -3px 1px 13px 8px #c8bab3;*/
    transform: scale(0.9);
    color: #c8bab3;
}

.main-image{
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 80vw;
    max-height: 80vh;
    /*margin: -50% -50%;*/
    transform: translate(-50%,-50%);
    box-shadow: 0 0 80px 80px #1d1d19 inset;
}
.main-image img{
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 50%;
    opacity: 0.7;
}
.main-image .image-border{
    width: 110%;
    height: 110%;
    box-shadow: 0 0 300px 300px #1d1d19 inset;
    position: absolute;
    top: -5%;
    left: -5%;
    color: #fff;
    border-radius: 50%;
}


.computer{

    position: absolute;
    top: 500px;
    right: 0;
    height: 608px;
    width: 592px;
    /*584,21052631578947368421052631579*/

    background: url('../images/projects/Apple iMac Pro.png');
    background-size:  100% 100%;
    margin-top: -120px;

    z-index: 9;

/*    5920 x 6080 */
}
.computer iframe{
    position: absolute;
    top: 159px;
    left: 40px;
    width: 512px;
    height: 288px;
    border: 0;

}
.computer iframe{
    /*position: absolute;*/
    /*top: 159px;*/
    /*left: 40px;*/
    /*width: 512px;*/
    /*height: 288px;*/
    /*border: 0;*/

    width: calc(512px * (1/0.7) ); /* new width (100 * (1/0.8) )*/
    height: calc(288px * (1/0.7) ); /* new height (400 * (1/0.8) ) */

    transform: scale(0.7);
    transform-origin: 0 0;
}

.under-construction{
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 999;
    color: #a61d00;
    font-size: 40pt;
}

@media only screen and (max-width: 2020px) {

    .intro{
        font-size: 17pt;
    }
    .intro span{

        background: rgba(29, 29, 25, 0.88);
    }

}
@media only screen and (max-width: 1919px) {

    .intro{
        font-size: 15pt;
    }

}
@media only screen and (max-width: 950px) {

    .under-construction{
        font-size: 30pt;
    }
    .intro{
        left: 5%;
        width: 90%;
        bottom: auto;
        top: 70%;
    }

}
@media only screen and (max-width: 690px) {

    .under-construction{
        top: 20%;
        font-size: 25pt;
    }

}