html, body { width: 100%; overflow-x: hidden; } body { font: 20px Montserrat, sans-serif; line-height: 1.8; color: #f5f6f7; } p { font-size: 16px; } .margin { margin-bottom: 45px; } .bg-1 { background: linear-gradient(to right, #3f51b5, #021b79); color: #ffffff; } .bg-2 { background-color: #1d273f; color: #ffffff; } .bg-3 { background-color: #ffffff; color: #555555; } .bg-4 { background-color: #1d273f; color: #fff; } .bg-5 { background-color: #eef3f7; color: #474e5d; } .container-fluid { padding-top: 40px; padding-bottom: 40px; } .navbar { font-size: 16px; margin-bottom: 0px; position: fixed; top: 0px; width: 100%; border: none; border-radius: 0px; z-index: 999; background-color: #f8f8f8; box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; } .navbar-collapse { padding-top: 6px; } .main { margin-top: 50px; position: fixed; height: 100%; padding-bottom: 50px; } .main-page { overflow: auto; height: 100%; } .my-info { min-height: calc(100vh - 50px); display: flex; flex-direction: column; justify-content: center; align-items: center; } .fa, .fab { padding: 20px; font-size: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%; } .fa:hover { opacity: 0.7; } .fa-linkedin { background: #007bb5; color: white; } .fa-skype { background: #00aff0; color: white; } .fa-envelope { background: #dd4b39; color: white; } .fa-phone { background: #430297; color: white; } .fa-github { background: black; color: white; } .contact-me a:hover { text-decoration: none; color: white; } .img-responsive { height: 300px; width: 300px; } #TOOLS img { display: block; margin-left: auto; margin-right: auto; width: 100px; height: 100px; padding: 5px; background-color: white; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } #TOOLS .large-img { height: 100%; max-width: 400px; max-height: 250px; min-width: 200px; min-height: 125px; } .SKILLS { text-align: center; } .skills-icon .fa { font-size: 50px !important; } .fa:hover, .fab:hover { color: white; opacity: 1; } .horizontal-rule { margin: 20px 48%; border-top: 1px solid white; } #TOOLS .col-sm-3 { padding-bottom: 20px; } #TOOLS h5 { font-weight: bold !important; } .where-text { font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blink-text { animation: blink 1s linear infinite; } .navbar-nav li { padding: 0px !important; } .navbar-nav li a { padding: 10px !important; border-bottom: 2px solid #f8f8f8; } .navbar-nav li a:hover { color: #3f51b5 !important; border-bottom: 2px solid #3f51b5; } .card { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; max-width: 300px; margin: auto; text-align: center; background-color: white; margin-top: 20px; } .card img { padding: 8px; width: 100%; height: 200px; } .button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background: linear-gradient(to right, #3f51b5, #021b79); text-align: center; cursor: pointer; width: 100%; font-size: 18px; } .button:hover { color: white; } .title { height: 40px; } .link-primary { color: #2d97cb !important; } .link-primary:hover { color: #3f51b5 !important; } .navbar-brand { padding: 0px 10px; } .navbar-brand img { height: 50px; width: 200px; } .fa-chevron-up { background-color: #3f51b5; color: white; border-radius: 10px; padding: 10px; } h1 strong { font-size: 60px; } .design-text { text-shadow: 0 1px 0 hsl(174, 5%, 80%), 0 2px 0 hsl(174, 5%, 75%), 0 3px 0 hsl(174, 5%, 70%), 0 4px 0 hsl(174, 5%, 66%), 0 5px 0 hsl(174, 5%, 64%), 0 6px 0 hsl(174, 5%, 62%), 0 7px 0 hsl(174, 5%, 61%), 0 8px 0 hsl(174, 5%, 60%), 0 0 5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.3); } footer { padding: 15px 0px; font-size: 16px; }