html{
    min-width: 100vh;
    min-height: 100vh;
    overflow-x:hidden;
  }

body{
      cursor: url("img/duckie.png"), default;
    background-color: rgb(38, 125, 240);
    color: #2a2635;
    background-image: url(https://i.pinimg.com/1200x/a2/e7/74/a2e7741e11cb810cfa946223acbc3856.jpg);
    background-size:  cover;
    background-repeat: no-repeat;
    background-position: center;
}


  a{
    text-decoration: none;
 color: #2a2635;
  }
  a:hover{
     color: #ffffff;

  }
  
/* nav */



.title{
    font-family: 'Segoe UI', Tahoma;
    margin-left: 10%;
    font-size: 150%;
    font-weight:bold;
    text-decoration: none;
    color: #1b1a1b;

}

.menuLink{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif

}



nav {
    font-size: 3em;
    position: fixed;
    transition: all 0.9s  ease-in-out;
    z-index: 3;
    width: fit-content;
    scale: 95%;
}

nav ul a{
    color: #141414 ;
    font-size: 80%;
    transition: all ease 0.2s ;
    text-decoration: none;

}
ul li{
    list-style-type: none;
}

nav ul a:hover{
    font-size:105%;
    color: #ffae00;
}

nav ul a:active, a:active{
    color: #1b1109;
}

.navbar {
    display: none;
  }
  
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
  }
  

  .navbar .nav-container a:hover{
      font-weight: bolder;
           color: #ffae00;
  }
  
  .nav-container {
    display: block;
    position: relative;
    height: 6rem;
  }
  
/* content */

.container img{
    height: auto;
    width: 100%;
    
    max-width: 100%;
    object-fit: contain;

    /* border: 1px dashed #F55536; */
    
}
img.no-boxShadow, #websitebutton{
    box-shadow: none;
    width: auto;
    height: auto;
    
}

.right{
  position: fixed; 
  right: -100px; 
  top: 60em; 
  transform: translateY(-50%); 
  z-index: 2; 
}

  .left{
  position: fixed; 
  left: -110px;    
  top: 60%;       
  transform: translateY(-50%); 
  }

  .center{
  position: fixed; 
  right: 20em; 
  top: 50%;    
  transform: translateY(-60%); 
  }



/* media query */
@media screen and (max-width:1100px){ 

    nav{

        left: 1vh;
        max-height: 50vh;
        min-height: 330px;
        
        
    }

    #webimg{
        position: fixed;
        right: 10%;
        bottom:0;
        
    }


    section.showcase{
        display: grid;
        grid-template-columns: 100%;
    }
    
}

@media screen and (max-width:725px){

        nav#homepage{
            display: block;
            left: unset;
            width: 100%;
            height: auto;
            font-size: xxx-large;
            
            
         
    }
    nav#homepage ul{
        padding-inline-start: 10%;
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
        overflow-y: hidden;
    } 
    nav#homepage ul li{
      margin: 0.7rem;
      padding: 0.4rem;
      width: fit-content;
      background-color: rgb(255, 254, 243);
      border-radius: 1rem;
    }
    header{
      font-size: 110%;
        margin: 1%;
        width: 100%;
        


    }
    .title{
    }

    .navbar {
        display: block;
        width: 100%;
        box-shadow: 0 1px 4px #ac739949;
      }
    nav{
        max-width: 100vw;
        display: none;
        height: auto;
        min-height: fit-content;
        
    }

        nav ul{
            display: none;
            
        }
        nav ul li{
            display: inline;
        }
        
          nav ul a:hover{
          font-size:100%;
                 color: #ffae00;
}
    .container{
        position: static;
        padding: 1rem;
        width: 100vw;
        max-width: fit-content;

    }
    

    .container ul{
      padding-inline-start: 1rem;
    }

        body{
        display: grid;
        grid-template-columns: 100vw;
        row-gap: 5px;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
        margin-top: 0;
        
        

    }
    
    
    


}


/* middle range */
@media screen and (min-width:1300px){

  p{
    font-size:105%; 
  }
  .container h1{
    font-size: 200%;
  }
  .container ul li{
    font-size: 110%;
  }
  ul li{
    font-size: 105%;
  }
  
  
  
}

/* fixing text for bigger monitors */
@media screen and (min-width:1600px){

  p{
    font-size:110%; 
  }
  .container h1{
    font-size: 250%;
  }
  .container ul li{
    font-size: 120%;
  }
  ul li{
    font-size: 110%;
  }
  
  
}