@import url('https://fonts.googleapis.com/css?family=Jockey+One&display=swap');

* {
    margin: auto ;
    padding: auto;
    box-sizing: border-box;
}

.body{
    width: 100%;
    height: auto;

}

    .Home{
        width: 100%;
        height: 100vh;
        opacity: 0,5;
    }

    .background1{
        
        width: 100%;
        
    }
    .now {
        width:100%;
        height: 100vh;}

    .textA {
        top: -100px;
        font-family:'Jockey One', sans-serif;
        font-size: 7rem;
        font-weight: bold;
        color: white;
        text-align: center;
        margin-top: -80vh;
        text-align: center;
        }

        .textA{   
            width: 50%;
            height: 100vh;
            margin-left: 23%;
        }

        .animation:hover .textA {
            animation: movess infinite;
            animation-duration: 5s;
            position: relative;
            color:palevioletred;
        }
        
        @keyframes movess {
            0%{ top:-}
            30% {top: -80vh}
            100% {top: 30vh}
        }
        
        
        body {
            font-family: "Lato", sans-serif;
            transition: background-color .5s;
        }
        
    }
    main {
        margin: 5vmin;
        margin-top: 10vmin;
    }
    
    nav {
        
        
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2rem;
        text-align: center;
        color: white;
        margin-right: 0vh;
    }

    nav input ~ label {
    cursor: pointer;	
    }
    nav input {
        
        display:none;
        cursor: pointer;
        
    }
    nav input:checked ~ ul {
        display: block;
    }

    nav a {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2rem;
    }
    nav ul {
        padding: 1vmin;
        margin: 0;
        display: none;
    }
    ul li {
        display: block;
        margin: 1vmin 3vmin;
        border: 0;
    }
    ul li a {
        color: white;
        text-decoration: none;
        background: black;
        text-align: center;
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
    }
    ul li a:hover {
        background:white;
        color:black;
    }
    nav {
        background: black;
        padding: 2vmin;
        margin-top: -10vh;
        position: relative;
        font-family: Arial, Helvetica, sans-serif;
        
        
    }

    }


    .Aboutme{

    }
    
        .textB {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 5rem;
            margin-top: 15vh;
            text-align: center;
            position: center;
            
            }

            
            .textC{
                font-family: Arial, Helvetica, sans-serif;
                font-size: 1rem;;
                margin-top: 50vh;
                color: black;
                margin-top: -70vh;
                text-align: justify;
                display: block;
                position: absolute;
                
                background-color:rgb(216,216,216);
                
                overflow: hidden;
                width: 70%;
                height: 107vh;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
                -webkit-transition: .3s ease;
                transition: .3s ease;
                display: center;
                margin-top: -107vh;
                margin-left: 22vh;
                

            }
            .overlay{
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                text-align: center;

            }
            .photo{
                width:70%;
                height: 100vh;
                margin-top:10vh;
                position: relative;
                text-align: center;
            }


            .dark{
                opacity: 1;
                display: block;
                width: 70%;
                height: auto;
            
            
            }
            .photo:hover {
                
                opacity: 1;
                
                
            }

            .photo:hover .textC {
                opacity: 50;
                display: block;
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);

                
            }

            
        }
    }
    
    .Work{

        }
        .textE {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 5rem;
            margin-top: 35vh;
            text-align: center;
            position: center;
        
        }
        .textF {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 2rem;
            margin-top: 10vh;
            text-align: left;
            margin-left: 30vh;
            
        }
        

        
        }
        * {
            box-sizing: border-box;
        }
        
            .row {
                display: -ms-flexbox; 
                display: flex;
                -ms-flex-wrap: wrap; 
                flex-wrap: wrap;
                border: 1vw;
            }
            
            .column {
                -ms-flex: 75%; 
                max-width: 75%;
                
                align-content: center;
                margin-left: 30vh;
                border:1vw;
            }
            
            .column img {
                
                vertical-align: middle;
                width: 100%;
            }
            
            
            @media screen and (max-width: 800px) {
                .column {
                -ms-flex: 50%;
                flex: 50%;
                max-width: 50%;
                }
            }
            
            
            @media screen and (max-width: 600px) {
                .column {
                -ms-flex: 100%;
                flex: 100%;
                max-width: 100%;
            }
     
     
        }
        
        
    }  
      
    .Contact{
        
    } 
       .textG{
           font-family: Arial, Helvetica, sans-serif;
           font-size: 5rem;
           margin-top: 35vh;
           text-align: center;
           position: center;
        }
        .link {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1rem;
            text-align: center;
            
            color: palevioletred;

        }
        .otherlink {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1rem;
            text-align: center;
            
            color: palevioletred;

        }

    }   

}