html{
        scroll-behavior: smooth;
    }
    
    body{
        overflow:hidden;
        transition: duration 5s;
        color:#003b54;
        background-image: linear-gradient(to right, pink , orange);
		background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed; /*This makes it so if you go into inspect and mess with the screen dimensions, the background will no longer have any white edges and will always take up the size of the screen */
        text-align: center;
        
    }

    #intro {
        font-size: clamp(1rem, 2.5vmin, 1.8rem);
        margin: 0 auto;
        max-width: 80%;
        padding: 2rem 1rem;
        color: white;
        border-radius: 10px;
        position: relative;
        top: 0vh;
        transform: translateY(-50%);
    }
    
    
    h1{
        margin:0px;
        padding:0px;
    }

    #AJCoding {
        font-size: 14vmin;
        color: brown;
        font-family: MAGNETOB;
        text-align: center;
        padding:0px;
        margin: 0px;
    }
    

    #Coding{
        transform: translate(-1.1vmin, -18vmin); 
        
    }
        
    .section{
        position:relative;
        left:-.5vw;
        top:0px;
        background-color: white;
        width: 99.6vw;
        height: 99.6vh;
        border: groove black;
        padding: 0px;
        margin: 0px;
        /*margin-top: 100%; */
        
    }

    #section0 {
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* ⬅️ align children to the top */
        position: relative;
        overflow: hidden;
        padding-top: 2rem; /* optional spacing from top */
    }
    
    
    
    .ball{
        border-radius: 50%;
        height:4rem;
        width:4rem;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 16px;
        top:50%;
        left:50%;
        display: inline-block;
        position: absolute;
        color:white;

        background: linear-gradient(-45deg, #6376ff, #7fcad4, #834296, #6376ff, #7fcad4, #834296);
        background-size: 300% 300%;
        animation: gradientMove 10s linear infinite;

        transition: transform 2s;
        animation-timing-function: linear;
        border:none;
        cursor: pointer;
        /*makes it so you can't select the text inside the ball on accident for every browser*/
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none;

        /*
        animation-duration: 10s;
        animation-delay: 10s;
        */
    }

    
    @keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 89.5% 89.5%;
    }
    }

    
    iframe{
        text-align:center;
    }
            

    @media (aspect-ratio:1.7777/1){
        body{
            color:white;      
        }
    }

    @font-face {
		src: url('../CustomFonts/MAGNETOB.TTF');
		font-family: MAGNETOB;
	}