@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    }

    html, body {
        height: 100vh;
        width: 100vw;
        background-color: black;
    }

    body{
        background: url(images/background.jpg) no-repeat top center;
        background-size: cover;
        background-attachment: fixed;
    }

    main {
        height: 100vh;
        position: relative;
    }

    #mobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* absolut position, top and left as 50% and transform translate -50% are essencial to keep the iframe in the middle of the phone screen, does not matter the view port size */

        height: 627px;
        width: 311px;        
        background: url(images/frame-iphone.png) no-repeat;
    }

    #screen {
        position: relative;
        top: 80px;
        left: 22px;
        width: 267px;
        height: 471px;
    }

    #social-media {
        text-align: right;
        /* moving icons to the right side */
    }

    #social-media img { 
        /* making all icons have circle shape */
        width: 50px;
        height: 50px;
        margin: 10px;
        border-radius: 50%;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.402);
        box-sizing: border-box; /* icons will not move with cursor */
    }

    #social-media img:hover{
        border: 2px solid rgb(255, 255, 255, 0.637);
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.402);
        transform: translate(-3px, -3px); /* icon slightly moves to left with the cursor touches */
        transition: transform .5s, border 1s; /* timing for the border */         
    }