body {
        /*
        background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 33%, rgba(255, 0, 89, 1) 66%, rgba(0, 179, 255, 1) 100%);
        animation: gradient 15s ease-in infinite;
        */
        background: white;
        animation: gradient 15s ease infinite;
        color: white;
        margin: 0px;
    }
    
    .sectionHeader {
        background: linear-gradient(90deg, #111111, #444444);
        display: inline-grid;
        color: white;
        width: 100%;
        height: 200px;
        align-items: center;
        text-align: center;
        font-size: x-large;
        margin-bottom: 2%;
    }
    
    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
    #linkedIn,
    #github,
    #gmail {
        max-width: 52px;
        max-height: auto;
        margin-right: 13px;
        margin-left: 13px;
        margin-top: 13px;
        margin-bottom: 13px;
    }
    
    #linkedIn:hover,
    #github:hover,
    #gmail:hover {
        transform: scale(1.2, 1.2);
        transition: 500ms;
    }
    /*Card Wiew Taken from www.w3schools.com
/* Float four columns side by side */
    
    .videoContainer {
        width: inherit;
        height: inherit;
        border-radius: inherit;
        object-fit: fill;
        overflow: hidden;
        display: block;
    }
    
    .column {
        float: right;
        width: 300px;
        padding: 0 10px;
        justify-content: center;
    }
    /* Remove extra left and right margins, due to padding in columns */
    
    .row {
        margin: 0 -5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Style the counter cards */
    
    .card {
        box-shadow: 0 4px 8px 0 rgba(34, 33, 33, 0.61);
        /* this adds the "card" effect */
        height: 200px;
        width: 200px;
        border-radius: 10px;
        margin: 50px;
        display: table;
        opacity: 50%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: 300ms ease-in-out;
        background-color: white;
    }
    
    .card-large {
        box-shadow: 0 4px 8px 0 rgba(34, 33, 33, 0.61);
        /* this adds the "card" effect */
        height: 250px;
        width: 500px;
        border-radius: 10px;
        margin: 2%;
        display: table;
        opacity: 80%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: 300ms ease-in-out;
        background-color: white;
    }
    
    .card-large:hover {
        opacity: 100%;
        transform: scale(1.2);
        transition: 300ms ease-in-out;
        cursor: pointer;
    }
    
    .card:hover {
        opacity: 100%;
        transform: scale(1.2);
        transition: 300ms ease-in-out;
    }
    
    .cardCoverLarge {
        position: absolute;
        vertical-align: middle;
        cursor: pointer;
        top: 0%;
        width: inherit;
        height: inherit;
        vertical-align: middle;
        background: linear-gradient(45deg, rgba(132, 133, 134, 0.9), rgba(60, 65, 71, 0.9));
        border-radius: inherit;
        visibility: hidden;
        color: white;
        opacity: 0%;
        transition: 300ms ease-in-out;
        pointer-events: none;
        
    }
    
    .cardCover {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        background: linear-gradient(45deg, rgba(132, 133, 134, 0.95), rgba(60, 65, 71, 0.95));
        border-radius: inherit;
        visibility: hidden;
        color: white;
        opacity: 0%;
        transition: 300ms ease-in-out;
    }
    
    .card-large:hover>.cardCoverLarge {
        transition: 300ms ease-in-out;
        visibility: visible;
        opacity: 100%;
    }
    
    .card:hover>.cardCover {
        transition: 300ms ease-in-out;
        visibility: visible;
        opacity: 100%;
    }
    /* Responsive columns - one column layout (vertical) on small screens */
    
    @media screen and (max-width: 600px) {
        .column {
            display: block;
            margin-bottom: 20px;
        }
    }
    
    section {
        padding-bottom: 200px;
    }
    
    #title {
        align-items: center;
        text-align: center;
        padding: 20px;
        color: black;
    }
    .switch {
        position: relative;
        display: flex;
        width: 60px;
        height: 34px;
        margin:10px
      }
      
      /* Hide default HTML checkbox */
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      /* The slider */
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 40px;
        width: 40px;
        left: 0px;
        bottom: 4px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        box-shadow: 0 0px 15px #2020203d;
        background: white url('https://i.ibb.co/FxzBYR9/night.png');
        background-repeat: no-repeat;
        background-position: center;
      }
      
      input:checked + .slider {
        background-color: #2196f3;
      }
      
      input:focus + .slider {
        box-shadow: 0 0 1px #2196f3;
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(24px);
        -ms-transform: translateX(24px);
        transform: translateX(24px);
        background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
        background-repeat: no-repeat;
        background-position: center;
      
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }
     
      /* Navbar */
      .navbar {
        overflow: hidden;
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10;
      }
      
      /* Links inside the navbar */
      .navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }
      
      /* Change background on mouse-over */
      .navbar a:hover {
        background: #ddd;
        color: black;
      }