style.scss

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

body{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    font-family: 'Montserrat', sans-serif;

    
    .home{
        background-image: url('./red-notebook-on-computer-keyboard-beside-red-ceramic-mug-3774054.jpg');
        width: 100%;
        height: 100vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        color: white;
    }
    header{
        display: flex;
        justify-content: space-between;
        padding:50px ;
        img{
            width: 75px;
            height: 75px;
        }
        .name{

            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip:text;
        }
    }
    .container{
        width: 50%;
        margin: auto;
        text-align: center;
        h1{
            font-size: 4rem;
            font-weight: bolder;
        }
        .large-text{
            font-size: 1.2rem;
        }
        .small-text{
            font-size: .9rem;
            color: #aaaaaa;
        }
    }
    .all-links{
        background-color: #222;
        min-height:100vh ;
        color: white;
        padding: 20px;
        text-align: center;
        .row{
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 50px;

            h1{
                margin: 50px;
            }    
        }
        .card{
            text-align: left;
            background: #323232;  /* fallback for old browsers */                                 
            width: 30%;
            padding: 10px;
            transition: .3s linear;
            a{
                color: #4b6cb7;
                text-decoration: none;

            }
        }
        .card:hover{
            transform: translate(-3%,-3%);
            
        }
    }
    .components{
        background-color: #130f40;
        .row{
            .card{
                background-color: #30336b;
            }
        }
    }
}