html,body{
    font-family:Arial, Helvetica, sans-serif;  
}
body{
    background-image:url(images/bg2.png);
    background-size:cover;
    background-repeat:repeat;
}
/*body *{
    border:solid 1px rgb(0, 255, 0);}/* !!DEBUG!! */

    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: none;
        
    }
    .allContain{
        height:200vh;
    }
    header.mainHead{
        height:100px;
        width:100%;
        background-color: rgba(255, 255, 255, 0.33);
        text-align:center;
        align-items: center;
        top:0;
        bottom:0;
        position:fixed;
        z-index:99;
    }
    footer{
        height:50px;
        width:100%;
        background-color: rgba(255, 255, 255, 0.33);
        text-align:center;
        align-items: center;
        bottom:0;
        position:fixed;

    }
    footer p{
        text-align:center;
        margin:auto;
        height:20px;
        padding:15px;
        width:100%;
        color:rgb(127, 210, 255);
        text-shadow: 3px 3px 6px black;
        font-size:12px;
    }
    header.mainHead h1{
        font-size:16px;
        color:rgb(198, 235, 255);
        text-shadow: 3px 3px 6px black;
        float:right;
        display:flex;
        align-items: center;
        height: 100%;
        width:180px;
    }
    .headSubScript{
        color:rgb(127, 210, 255);
        font-size:12px;
    }
    .blueHighlighter{
        color:rgb(127, 210, 255);
    }
    header.mainHead img{
        float:right;
        display:block;
        max-height:100%;
        position:relative;
    }
    header.mainHead .dd{
        background-image:url(images/dropdownIcon.png);
        color:rgb(198, 235, 255);
        float:left;
        display:block;
        width:60px;
        height:50px;
        margin: 25px 25px 25px 25px;
    }
    header.mainHead .ddContent{
        display:none;
        position:absolute;
        color:white;
        float:right;
    }
    .dd:hover .ddContent{
        display:block;
    }
    
    a.navButton{
        min-width:3cm;
        width:4cm;
        height:1.2cm;
        padding:0.1cm;
        display:flex;
        justify-content: center;
        align-items: center;
        transition:0.3s;
    }
    a.navButton:link{
        color:rgb(66, 129, 163);
        text-decoration: none;
        background-color:rgb(198, 235, 255);
    }
    a.navButton:visited{
        color:rgb(66, 129, 163);
        text-decoration: none;
    }
    a.navButton:hover{
        color:rgb(198, 235, 255);
        background-color:rgb(66, 129, 163);
        transform: scale(1.3,1.3);
        transform: 0.2s;
    }


    div.pageContent{
        height: calc(200vh - 60px);
        width:95%;
        display:block;
        margin:auto;
        margin-top:110px;
        margin-bottom:110px;
        background-color: rgba(0, 0, 0, 0.33);
        color:rgb(198, 235, 255);
        text-shadow: 2px 2px 3px black;
    }
    div.pageContent p{
        float:right;
        margin:auto;
        padding:2%;
        width:100%;
        text-align:center;
    }
    .homeGalCapt{
        font-size:20px;
        color:rgb(127, 210, 255);
    }
    table.imageDisplay{ /* what was i THINKING.*/
        margin:auto;
        height:1000px;
        max-height:20%;
        width:80%;
        text-decoration:bold;
    }
    table.imageDisplay td{
        max-height:20%;
        height:300px;
        width:50%;
        text-align:center;
        vertical-align:top;
        padding-bottom:0px;
    }
    table.imageDisplay tr{
        max-height:50%;
        height:200px;
    }
    div.galImageSingle{
        display:inline-block;
        margin:auto;
        width:100%;
        max-width:350px;

    }
    div.galImageSingle img{
        display:block;
        margin:auto;
        width:100%;
        max-width:350px;

    }
    div.galImageSingle img:hover {
        border-radius:50px;
        background-color:rgba(152, 219, 255, 0.15);
        transition:0.2s;
        transform: scale(2,2);
    }
    #galImageUNIQUE{
        padding-top:70px;
    }
    #galImageUNIQUE img:hover{
        border-radius:1px;
    }

    /* about page stuff */
    #aboutPageContain{
        height:105vh;
    }
    #aboutPageContent{
        height: calc(105vh - 60px);
    }
    #tempImageHold{
        float:right;
        display:block;
        margin:auto;
        height:300px;
        width:300px;
        border-top:10px solid transparent; /* this is a stupid solution but if i dont use it the margins refuse to cooperate*/
        margin-right:20px;
    }
    #boxDiv2{
        float:left;
        display:block;
        margin:auto;
        height:300px;
        width:97%;
        max-width:600px;
        border-top:10px solid transparent; /* this is a stupid solution but if i dont use it the margins refuse to cooperate*/
        margin-left:20px;
    }
    #tempImageHold img{
        display:block;
        margin:auto;
        width:100%;
        height:100%;
        border-radius:7px 7px 0px 0px;
    }
    #portraitLabel{
        font-size:90%;
        width:100%;
        text-align:center;
        background-color: rgba(255, 255, 255, 0.33);
        color:rgb(127, 210, 255);
        border-radius: 0px 0px 7px 7px;
        border-top-style:none;
    }
    #textbox2{
        font-size:90%;
        width:100%;
        margin:auto;
        text-align:center;
        background-color: rgba(255, 255, 255, 0.33);
        color:rgb(127, 210, 255);
        border-radius: 7px 7px 7px 7px;
        border-top-style:none;
    }
    div.Organizer{
        display:block;
        height:100%;
        width:100%;
    }
    #organPara{
        color:rgb(127, 210, 255);
        font-size:max(1.1vw , 16px); /* quick shoutout to freecodecamp user denii927 for posting their code which taught me i could do this*/
        float:left;
        text-align:left;
        height:370px;
        max-width:calc(100% - 330px);
    }
    #organPara2{
        color:rgb(127, 210, 255);
        font-size:max(1.1vw , 16px);
        float:left;
        text-align:left;
        max-height:370px;
        max-width:100%;
    }
    #organPara2 a{
        text-decoration: none;
        color:rgb(0, 166, 255);
    }
    #organPara2 a:hover{
        color:white;
        transition:0.2s;
    }

    /* art portfolio page stuff */

    div.trueArtHolder{
        width:100%;
        display:grid;
        height:30%;
        gap:10px;
        grid-template-columns:1fr 1fr 1fr;
        grid-template-rows: max-content max-content max-content;
        padding:10px 5% 0px 5%;
        justify-content: center;
    }
    div.artpageImgHolder{
        height:100%;
        width:100%;
    }
    div.artpageVideoHolder{
        display:block;
        margin:auto;
        justify-content: center;
        height:100%;
        width:fit-content;
        grid-column-start:1;
        grid-column-end:4;
        max-width:400px;
    }
    div.artpageVideoHolder video{
        display:block;
        margin:auto;
        padding-top:30px;
        
    }
    .artpageVideoHolder video:hover{
        animation-name: imgHover;
        animation-duration:0.2s;
        transition:0.2s;
        transform: scale(1.1,1.1);
    }
    div.artpageVideoHolder .imgCaption{
        display:block;
        margin:auto;
        width:400px;
        background-color: rgba(255, 255, 255, 0.33);
        color:rgb(127, 210, 255);
        border-radius: 7px 7px 7px 7px;
        height:0px;
        visibility: hidden;
        opacity:0;
        font-size:0px;
    }
    .artpageVideoHolder:hover .imgCaption{
            animation-name: imgHover;
            animation-duration:0.2s;
            visibility: visible;
            opacity:1;
            width:100%;
            max-width:400px;
            height:auto;
            transition:0.3s;
            font-size:100%;
            transform:translate(0px,min(20px, 100%));
    }
    div.artpageImgHolder img{
        max-width:100%;
        max-height:200px;
        display:block;
        margin:auto;
    }
    div.artpageImgHolder .imgCaption{
        margin-left:5%;
        margin-right:5%;
        width:90%;
        background-color: rgba(255, 255, 255, 0.33);
        color:rgb(127, 210, 255);
        border-radius: 7px 7px 7px 7px;
        height:0px;
        visibility: hidden;
        opacity:0;
        font-size:0px;
    }
    @keyframes imgHover{
        10%{
            border-radius:50px;
            border:solid 15px rgba(152, 219, 255,0.10);
            transform:scale(1.1,1.1);
            transition:0.2s;
            
        }
        50%{
            border-radius:0px;
        }
        100%{
            border: solid 0px transparent;
        }
    }

    div.artpageImgHolder:hover{
            animation-name: imgHover;
            animation-duration:1s;
    }  
    div.artpageImgHolder:not(:hover){
        transition:0.2s;
    }
    div.artpageImgHolder:not(:hover) .imgItem,.imgCaption{
        transition:0.2s;
    }
    div.artpageImgHolder:hover .imgItem{
            transform:scale(2,2);
            transition:0.2s;
            opacity:1;
    }
    div.artpageImgHolder:hover #needsPixels{
        image-rendering:pixelated;
    }
    div.artpageImgHolder:hover .imgCaption{
            transform:translate(0px,min(30px, 150%));
            visibility: visible;
            opacity:1;
            width:90%;
            height:auto;
            transition:0.3s;
            font-size:100%;
            
    }
    #artPageContain{
        height:200vh;
    }
    #artPageContent{
        height: calc(200vh - 60px);
    }

    /* contact page */
    #contactPageHolder{
        display:grid;
        justify-content: center;
    }
    .formHolder{
        float:right;
        margin-left:2.5%;
        margin-right:2.5%;
        height:80vh;
        width:95%;
        padding:10px;
    }
    .formHolder form{
        text-align:center;
    }
    .formHolder input,textarea{
        margin-top:5px;
        padding:5px;
        text-align:center;
        color:white;
        border-radius:5px;
        border-top:rgba(255,255,255,0.2) 2px solid;
        border-right:rgba(255,255,255,0.2) 2px solid;
        border-left:rgba(0, 0, 0, 0.2) 2px solid;
        border-bottom:rgba(0, 0, 0, 0.2) 2px solid;
        background-color:rgba(152, 219, 255,0.5);
        box-sizing: border-box;
    }
    .formHolder input:hover,textarea:hover{
        background-color:rgba(152, 219, 255,0.6);
    }
    .formHolder input:focus,textarea:focus{
        box-sizing: border-box;
        background-color:rgba(152, 219, 255,0.9);
        color:rgb(52, 76, 88);
        transition:0.2s;
        animation-name:imgHover;
        animation-duration:0.4s;
        transform: scale(1.3,1.3);
    }
    .formHolder textarea:focus{
        transform: translate(0px,15px) scale(1.15,1.15);
        transition:0.2s;
        margin-top:15px;
        margin-bottom:25px;
    }

    .formHolder input:not(:focus),textarea:not(:focus){
        transition:0.2s;
    }
    #inputMessage{
        width:90%;
        height:250px;
        resize:none;
        text-align:left;
    }
    .sendButt{ /* im a mature adult */
        width:60%;
    }
    #emailLink a{
        display:inline-block;
        text-decoration: none;
        color:rgb(127, 210, 255);
    }
    #emailLink a:hover{
        animation-name:imgHover;
        animation-duration:0.3s;
        font-size:25px;
        padding:20px;
        border-radius: 5px;
        background-color:rgba(152, 219, 255, 0.15);
        transition: 0.2s;
    }
    #emailLink a:not(:hover){
        transition:0.2s;
    }

    /* resume page */

    #resumeDisplay{
        display:block;
        margin:auto;
        max-width:20%;
        opacity:0.5;
    }
    #oneHundredPercentNotAVirus{
        
        display:inline-block;
        margin-top:5px;
        padding:5px;
        text-align:center;
        color:rgb(66, 129, 163);
        text-decoration: none;
        background-color:rgb(198, 235, 255);
        text-shadow: 1px 1px black;
        border-radius:5px;
        border-top:rgba(255,255,255,0.2) 2px solid;
        border-right:rgba(255,255,255,0.2) 2px solid;
        border-left:rgba(0, 0, 0, 0.2) 2px solid;
        border-bottom:rgba(0, 0, 0, 0.2) 2px solid;
    }
    #oneHundredPercentNotAVirus:hover{
        color:rgb(198, 235, 255);
        background-color:rgb(66, 129, 163);
        border-top:rgba(255,255,255,0.2) 2px solid;
        border-right:rgba(255,255,255,0.2) 2px solid;
        border-left:rgba(0, 0, 0, 0.2) 2px solid;
        border-bottom:rgba(0, 0, 0, 0.2) 2px solid;
        border-radius: 5px;
        transform: scale(1.1,1.1);
        transition:0.2s;
    }
    #oneHundredPercentNotAVirus:not(:hover){
        transition:0.1s;
    }

    #resumeDisplay:hover{
        box-sizing:border-box;
        transform:scale(3,3)translate(0,32%);
        opacity:1;
        transition:0.2s;
        border:transparent 0px solid;
    }
    #resumeDisplay:not(:hover){
        transition:0.2s;
    }

    /* just for fun */
    #goofyPageContain{
        height:80vh;
        animation-name:containRattle;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }
    #goofyDropdown{
        animation-name:containRattle;
        animation-duration: 0.2s;
        animation-iteration-count: infinite;
    }
    @keyframes containRattle{
        25%{
            rotate:2deg;
        }
        75%{
            rotate:-2deg;
        }
        100%{
            rotate:0;
        }
    }
    #goofyContent{
        height:calc(80vh);
        animation-name:spinAnim;
        animation-duration: 6s;
        animation-iteration-count: infinite;
    }
    div.spinHold{
        
        display:grid;
        grid-template-columns:max-content max-content max-content;
        grid-template-rows: max-content max-content max-content;
        align-content: center;
        justify-content: center;
        width:100%;
        height:100%;

    }
    @keyframes spinAnim{
        0%{
            transform:scale(1,1);
        }
        25%{
            border: solid 1px blue;
            background-color: rgb(156, 163, 96);
            transform:scale(2,0.5);
            font-size:5px;
        }
        50%{
            border-width:20px;
            border-radius:250px;
            background-color: rgb(16, 102, 172);
            transform: scale(0.5,2);
            
        }
        75%{
            background-color: rgb(59, 187, 87);
            transform: scale(0.5,0.5);
            font-size:30px;
            border:solid 1px red;
        }
        100%{
            transform:scale(1,1);
            rotate:360deg;
        }
    }
    div.theSpinerrr{
        align-content: center;
        width:200px;
        height:200px;
        display:block;
        margin:auto;
        background-color:red;
        animation-name:spinAnim;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    #jPageContain{
        height:80vh;
    }
    #jPageContent{
        height:80vh;
    }
    div.gridder{
        height:100%;
        width:100%;
        display:grid;
        align-content: center;
        justify-content: center;
    }
    div.gridder p{
        font-size:12px;
        animation-name:containRattle2;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes containRattle2{
        0%{
            border:0px solid transparent;
        }
        25%{
            font-size:10px;
            rotate:1deg;
        }
        50%{
            background-color: rgba(255, 0, 0, 0.09);
            border: 5px solid rgba(255, 0, 0, 0.025);
            border-radius: 350px;
            rotate:-1deg;
        }
        75%{
            font-size:14px;
            rotate:1deg;
            
        }
        100%{
            font-size:12px;
            rotate:0;
            border:0px solid transparent;
            rotate:-1deg;
            
        }
    }
    /* mobile */
    @media screen and (max-width:800px) {
        #tempImageHold,#boxDiv2{
            float:none;
            margin-left:0;
            margin:auto;
        }
        #organPara,#organPara2{
            font-size:16px;
            float:clear;
            text-align:center;
            max-width:100%;
        }
        div.galImageSingle img:hover {
            transform: scale(1.5,1.5);
        }
        div.trueArtHolder{
            grid-template-columns:50% 50%;
            grid-template-rows:max-content max-content max-content;
        }
        #artPageContain{
            height:130vh;
        }
        #artPageContent{
            height: calc(130vh - 60px);
        }
        #resumeDisplay{
            min-width: 200px;
        }
        #resumeDisplay:hover{
            box-sizing:border-box;
            transform:scale(2,2)translate(0,32%);
            opacity:1;
            transition:0.2s;
            border:transparent 0px solid;
        }
        div.artpageVideoHolder{
            grid-column-start:1;
            grid-column-end:3;
            width:min(100%, 400px);
        }
        .artpageVideoHolder video{
            width:min(100%, 400px);
        }
        #artPageContain{
            height:170vh;
        }
        #artPageContent{
            height:calc(170vh - 60px);
        }
        #aboutPageContain{
            height:175vh;
        }
        #aboutPageContent{
            height: calc(175vh - 60px);
        }
    }