@font-face{
    font-family:"Terminal Grotesque";
    src:url("./fonts/terminal-grotesque.ttf") format("truetype");
}
@font-face{
    font-family:"Terminal GrotesqueOpen";
    src:url("./fonts/terminal-grotesque_open.otf") format("opentype");
}

body{
    font-family: Flow State;
    padding: 30px; 
    background-color: #dee0df; 
}



img{
    height: 100%;
    margin: auto;
    
    
}

p{
    color: rgb(248, 245, 52);
    font-size: 1.9em;
    font-family: Terminal Grotesque;
    text-align: right; 
    top: 0px;
    height: 60px;  
    -webkit-text-stroke: .6px black;
    color: transparent;
}

#intro{
    top: 20px;
    left: 3%;
    position: fixed;
    width: 32%;
    height: auto;
    margin: 0;
    padding-right: 3%;
    line-height: 120%; 
}

#rotating{
    display: block;
}

.adjustimg{
    width: 300px;
    height: auto;
    animation: rotation 8s infinite linear;
    position: fixed;
    opacity: .7;
}

.adjustimg:hover{
    animation: none;

}


@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }


#menu{
    position: fixed;
    /* top: 200px; */
    bottom: 0px;
    text-align: right;
    right: 30px;
    width: 300px;
    margin: auto;
    padding: 0;
    z-index: 2;
}


a.black{
    -webkit-text-stroke: .6px black;
    color: transparent;
    text-decoration: none;
    filter: blur(3px);
    
}
a.black:hover{
    -webkit-text-stroke: .6px black;
    color: transparent;
    text-decoration: none;
    filter: blur(0px);
    
}

 a span.black{
    color: transparent;
    -webkit-text-stroke: .6px black;
    filter: blur(0px);
 }
 
 #intro3{
    top: 20px;
    left: 3%;
    position: fixed;
    width: 200px;
    height: auto;
    margin: 0;
    padding-right: 3%;
    line-height: 120%; 
    filter: blur(2px);
}
#maintext{
    font-family: Terminal GrotesqueOpen;
    color: transparent;
    -webkit-text-stroke: .5px black;
    margin: 0%;
    font-size: 1.7em;
    top:120px;
    right: 30px;
    text-align: right;
    position: fixed;
    line-height: 30px;
    width: 500px;
    z-index: 3;
    
}

#organized{
    position: absolute;
    display: inline;
    height: auto;
    width: 650px;
   padding-top: 0%;
   padding-left: 10%;
   padding-right: 10%;
   padding-bottom: 10%;
  
}
iframe{
    height: 400px;
    width: 650px;
    padding-left: 60px;
    padding-top: 50px;
    
}

img.photo{
    height: 400px;
    width: auto;
    padding-left: 60px;
    padding-top: 50px;

}

img.photo2{
    height: 400px;
    width: auto;
    float: none;
    padding-left: 60px;
    padding-top: 50px;
    

}
img.photo2:hover{
    filter: blur(0px);

}

#intro3:hover{
    filter: blur(0px);

}

img.photo3{
   width: 400px;  
   height:auto;
   padding-left: 60px;  
}

.selected{
    filter: blur(0px);
}

.phonemenu{
    display: none;
}

@media only screen and (max-width: 900px) {
    iframe{
        height: 300px;
        width: 450px;
        padding-left: 10px;
        padding-top: 50px;

    }
    #maintext{
        font-size: 1.4em;
        line-height: 25px;
    }
    p{
        font-size: 1.5em;
    }
    #menu{
        width: 180px;
    }
    #organized{ 
       padding-top: 25%;    
    }
    img.photo{
        height: 300px;
        width: auto;
        padding-left: 30px;
        padding-top: 50px;
    
    }
    img.photo2{
        height: 300px;
        width: auto;
        float: none;
        padding-left: 30px;
        padding-top: 50px;
    }
    img.photo3{
        width: 300px;  
        height:auto; 
    }
  }

  @media only screen and (max-width: 600px) {
    iframe{
        height: 200px;
        width: 300px;
        padding-left: 0px;
        padding-top: 90px;
        padding-bottom: 0px;

        margin-bottom: 0px;

    }
    #maintext{
        font-size: 1.4em;
        line-height: 25px;
        width: 300px;
        padding-top: 5%;
        padding-left: 5%;
        margin: 1%;
        position: fixed;
    }
    p{
        font-size: 1.5em;
    }
    #menu{
        bottom: 0px;
        filter: blur(0px);
        margin-bottom: 270px;
        width: 300px;
    }
    #intro{
        width: 250px;
        height: auto;
        margin-top: 5px;
    }
    #intro3{
        margin-top: 5px;
    }

    #organized{ 
       padding-top: 25%;
       padding-left: 0%;
       margin: auto;   
       width: 150px; 
    }
    img.photo{
        height: auto;
        width: 300px;
        padding-left: 0px;
        padding-top: 60px;
    
    }
    img.photo2{
        height: auto;
        width: 300px;
        float: none;
        padding-left: 0px;
        padding-top: 50px;
    }
    img.photo3{
        width: 300px;  
        height:auto; 
    }
    a.black{
        filter: blur(0px);
        font-size: 1.4em;
        -webkit-text-stroke: .6px black;
    }

    
  }