body{
    /*
        Sets the width according to page content.
        Prevents unexpected breaking lines and styles.
    */
    min-width: 1150px;
}
/* Mobile Screen */
@media only screen and (max-width: 480px) {
    body {min-width: 0}
}

main {
    display: flex;
    padding:20vh 0;
    justify-content: center;
}
/* Mobile Screen */
@media only screen and (max-width: 480px) {
    main {
        padding:30px 0 50px 0;
        flex-wrap: wrap;
    }
}

/* left side */
main .left img {
    border-radius:4px;
    box-shadow: 0 0 6px gray;
    transition: box-shadow .2s;
}
main .left img:hover{
    box-shadow: 0 0 15px gray;
}
/* Mobile Screen */
@media only screen and (max-width: 480px) {
    main .left img {
        width:100%;
        height: auto;
    }
}

/* right side */
main .written{
    width:560px;
    padding-top:20px;
    padding-left:50px;
    box-sizing: border-box;
}
main .written p{
    padding:10px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-align: justify;
    text-indent: 50px;
}
main .written a{
    position: relative;
    top: 60px;
    padding:14px 70px;
    color: blue;
    font-size: 24px;
    border:2px solid blue;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(50,50,50,.5);
    transition: .2s;
}
main .written a:hover{
    background-color: blue;
    color:white;
}
main .written a .material-icons{
    font-size: 26px;
}
/* Mobile Screen */
@media only screen and (max-width: 480px) {
    main .written {
        margin:0 20px;
        padding-left:0;
    }
    main .written p{font-size: 18px;}
    main .written a{
        display: block;
        width:200px;
        padding:14px 0;
        top:30px; left:50%; margin-left: -100px;
        font-size: 18px;
        text-align: center;
    }
    main .written a span{font-size: 20px !important;}
}