* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    position: static;
    width: 100%;

}

@font-face {
    font-family: Banze;
    src: url(Grunge.ttf);
}

@font-face {
    font-family: urban;
    src: url(FillingsUrban_PERSONAL_USE_ONLY.otf);
}

@font-face {
    font-family: whitez;
    src: url(White\ On\ Black.ttf);
}

@font-face {
    font-family: cream;
    src: url(Cream\ Soup.ttf);
}

@font-face {
    font-family: type;
    src: url(American\ Typewriter\ Regular.ttf);
}


li:hover {
    transition: all 0.5s ease-in;
    

    padding-left: 2%;
    padding-right: -2%;
}


#bus {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px;
    color: #ffffff;
    border-bottom: 1px solid black;

    font-size: 100px;

}
.banner {}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 200px;
    font-family: Banze;
    color: snow;
    width: 10%;

}
nav {




    justify-content: space-between;


border-bottom: solid 10px snow;
    min-width: 100%;
height: 300px;
    margin-bottom: 2%;
    margin-top: 0;

}


nav ul {
   
position: static;
    justify-content: space-evenly;

}

ul li {

    justify-content: space-between;
    align-items: center;
position: static;
    list-style-type: none;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#full-size {
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* or overflow:auto; if you want scrollbars */
}

.top-left:hover{
transition: all 0.5s ease-in;
    color: #7458c1;
    width: 340px;
}

.top-left{
    font-size: 170px;
    margin-top: 2%;
}

ul li a {
    display: inline-block;
    float: right;
width: 30%;
 margin-right: 5%;
 margin-top: 1.5%;
}

.container {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr ;
    column-gap: 5px;
    width: 100%;
}

.genimg {
    max-width: 100%;
    max-height: 100%;
}

.tinn {
width: 50%;
float: right;
margin-right: 3%;
padding: 40px;
}

.tinnimage {
    width: 50%;
}

.text {
    font-size: 40px;
   
  
   float: right;
}


h1 {
font-family: cream;
color: white;


}

p {
    padding: 5px;
    color: white;
    font-family: type;
    font-size: 30px;
}

.trinity {
    border-width: 10px;
  
        border-color: snow;
        border-top-style: solid;
    margin: auto;
    text-align: center;
    overflow: auto;

    align-items: column;
    align-items: center;
    padding: 70px;

}




.gallery3 {
   
    float: left;
    width: auto;
   
  

}

.gallery3 img {
    width: 90%;
    height: auto;

}

.btext {
    color: snow;
    font-size: 2.0cm;
    text-align: center;
   
    font-family: urban;
   
}




/** Safari */
@media not all and (min-resolution: 0.001dpcm) {
  




}


/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
    and (orientation: portrait) {
    .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 50px;
    font-family: Banze;
    color: snow;
    width: 10%;

}

.spoon img{
    width: 100%;
    margin-left: 15px;
    margin-top: 20%;
}

nav {




    justify-content: space-between;


border-bottom: solid 10px snow;
    min-width: 100%;
height: 130px;
    margin-bottom: 2%;
    margin-top: 0;

}


.trinity {
    border-width: 10px;
        border-color: snow;
        border-top-style: solid;
       
        margin: auto;
        text-align: center;
        overflow: auto;
    min-width: 100%;
      align-items: column;
        align-items: center;
        
    
}

.genimg {
    max-width: 80%;
    max-height: 80%;
    width: 70%;
}

.tinn {
width: 80%;
float: right;
margin-right: 3%;
padding: 40px;
}

.tinnimage {
    width: 80%;
}

h1 {
font-family: cream;
color: white;
font-size: 15px;

}

p {
    padding: 5px;
    color: white;
    font-family: type;
    font-size: 10px;
}


}


/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
    and (orientation: landscape) {
    .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 100px;
    font-family: Banze;
    color: snow;
    width: 10%;

}

.spoon {
    width: 25%;
    margin-right: 15%;
}

.gallery3 {
    
    float: left;
    width: auto;
    margin-right: -27%;
  

}

.gallery3 img {
    width: 45%;
    height: auto;

}

.btext {
    color: snow;
    font-size: 0.9cm;
    text-align: center;
   
    font-family: urban;
   
}

.trinity {
    border-width: 10px;
        border-color: snow;
        border-top-style: solid;
       
        margin: auto;
        text-align: center;
        overflow: auto;
    min-width: 100%;
      align-items: column;
        align-items: center;
        
    
}

h1 {
font-family: cream;
color: white;
font-size: 35px;

}

p {
    padding: 5px;
    color: white;
    font-family: type;
    font-size: 20px;
}


nav {




    justify-content: space-between;


border-bottom: solid 10px snow;
    min-width: 100%;
height: 200px;
    margin-bottom: 2%;
    margin-top: 0;

}

.spoon img{
width: 100%;
margin-left: 20px;
margin-top: 10%;
}


}

/* For Tablet View */
@media screen and (min-device-width: 768px)
    and (max-device-width: 1024px) {
   .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 150px;
    font-family: Banze;
    color: snow;
    width: 10%;

}

.trinity {
    border-width: 10px;
   
    margin: auto;
    text-align: center;
    overflow: auto;

    align-items: column;
    align-items: center;
    padding: 60px;

}




.gallery3 {
   height: auto;
     margin: 5px;
  align-items: column;
        align-items: center;
    width: auto;
   margin-right: 7%;
   
  

}

.gallery3 img {
  
   width: 100%;
    height: auto;

}

.btext {
    color: snow;
    font-size: 2.0cm;
    text-align: center;
   
    font-family: urban;
   
}

nav {




    justify-content: space-between;


border-bottom: solid 10px snow;
    min-width: 100%;
height: 350px;
    margin-bottom: 2%;
    margin-top: 0;

}

.spoon img {
width: 90%;
margin-left: 50px;
margin-top: 25%;
}

}

/* tablets portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) { 
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 115px;
    font-family: Banze;
    color: snow;
    width: 10%;

}


.trinity {
    border-width: 10px;
        border-color: snow;
        border-top-style: solid;
        border-bottom-style: solid;
        margin: auto;
        text-align: center;
        overflow: auto;
    min-width: 100%;
      align-items: column;
        align-items: center;
        
    
}
.gallery3 {
    margin: 5px;
   
    width: auto;
   margin-right: -7%;
    align-items: column;
        align-items: center;
}

.gallery3 img {
    width: 80%;
    height: auto;
margin-right: -7%;
}

nav {




    justify-content: space-between;


border-bottom: solid 10px snow;
    min-width: 100%;
height: 250px;
    margin-bottom: 2%;
    margin-top: 0;

}

.spoon img {
width: 100%;
margin-left: 40px;

}
}


/** Safari */
@media not all and (min-resolution: 0.001dpcm) {
  




}