/*<!-- THIS IS THE CSS !--> */

/* PAGE LAYOUT WAS MADE USING SDGRLS LAYOUT CREATOR*/

/* DO NOT STEAL THE CODE OR REPURPOSE IT AS YOU CAN
EASILY GET IT FOR YOURSELF THROUGH THE LAYOUT CREATOR*/

/* I MADE ADJUSTMENTS TO FIT MY NEEDS PLEASE RESPECT THAT */

    :root {
      --header-image: url('https://vertexpos.neocities.org/headerIMGtrans.png');
      --body-bg-image: url('https://vertexpos.neocities.org/background3.jpg');
    }
            
            /* inconsolata */
            @font-face {
              font-family: 'Inconsolata';
              font-style: normal;
              font-weight: 200 900;
              font-stretch: 100%;
              font-display: swap;
              src: url(https://fonts.gstatic.com/s/inconsolata/v32/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyx615Mjs.woff2) format('woff2');
              unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
            }
            /* latin */
            @font-face {
              font-family: 'Inconsolata';
              font-style: normal;
              font-weight: 200 900;
              font-stretch: 100%;
              font-display: swap;
              src: url(https://fonts.gstatic.com/s/inconsolata/v32/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyya15.woff2) format('woff2');
              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            body {
                font-family: 'Inconsolata', sans-serif;
                margin: 0;
                background-color: #8CBEB2;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 125px;
                color: #5C4B51;
                background-image: var(--body-bg-image);
            }

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 900px;
                margin: 0 auto;
            }

            #container a {
                color: #8f1842;
                font-weight: bold;
            }

            #header {
                width: 100%;
                height: 80px;
                background-image: var(--header-image);
                background-size: 100%;
                background-repeat:repeat-x;
            }

            #navbar {
                height: 40px;
                background-color: #8CBEB2; /* #F2EBBF*/
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                color: #F2EBBF;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            #navbar li a {
                color: #F2EBBF;
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: #5C4B51;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }
            
            img {
            border-radius: 10%; 
            }
            
            img:hover {
              transform: scale(1.03);
              box-shadow: 0 8px 25px rgba(96, 182, 247, 0.3);
              cursor: pointer;
            }

            aside {
                background-color: #F06060;
                width: 200px;
                margin-top: 0px;
                padding: 10px;
                font-size: smaller;
            }
            
            bside {
                background-color: #F06060;
                width: 200px;
                padding: 20px;
                font-size: smaller;
            }


            main {
                background-color: rgba(243,181,98, 0.3); /* #F3B562*/
                -webkit-backdrop-filter: blur(1px);
                backdrop-filter: blur(1px);
                flex: 1;
                padding: 20px;
                order: 2;
            }

            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }
            
            /*folio stuff */
            .row {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 8px;
              margin-bottom: 20px;
            }
            
            .row,
            .row > .column {
              padding: 8px;
            }
            
            .column {
              display: none;
              padding: 8px;
            }
            
            .column.show {
              display: block;
            }
            
            .row:after {
              content: "";
              display: table;
              clear: both;
            }
            
            .show {
              display: block;
            }
            
            .btn {
              border: none;
              outline: none;
              padding: 8px 10px;
              margin-top: 5px;
              background-color: #F2EBBF;
              cursor: pointer;
              color: #54726a;
            }
            
            .btn:hover {
              background-color: #699f92;
              color: #F2EBBF;
              transform: scale(1.08);
              box-shadow: 0 8px 25px rgba(96, 182, 247, 0.3);
            }
            
            .btn.active {
              background-color: #8CBEB2;
              color: #F2EBBF;
            }
            
            /* end portfolio stuff */


            footer {
                background-color: #8CBEB2;
                color: #F2EBBF;
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            }
            
            li {
                list-style-type: square;
                margin: 20px;
                padding: 0px;
            }

            h1,
            h2,
            h3,
            h4 {
                color: #5C4B51;
            }

            h1 {
                font-size: 25px;
            }
            
            h4 {
                padding: 0px;
            }

            strong {
                color: #5C4B51;
            }
            
            li a:link {
              font-size: 14px;
              color: #5C4B51;
            }
            
            li a:visited {
              font-size: 14px;
              color: #5C4B51;
            }
            
            li a:hover {
              font-size: 14px;
              color: #F2EBBF;
            }
            
            li a:active {
              font-size: 14px;
              color: #5C4B51;
            } 

            .box {
                border: 1px solid #F2EBBF;
                padding: 10px;
            }


            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
            
            
            /* here is all the modal stuff to make project infos pop up n things */
            /* Modal Styles */
            .modal {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.7);
              z-index: 1000;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            
            .modal-content {
              margin: 30px auto;
              top: center;
              left: center;
              background: rgba(242,	235,	191, 1.0);
              overflow-y: auto;
              padding: 20px;
              width: 80%;
              max-width: 800px;
              border-radius: 10px;
              position: relative;
              max-height: 90vh;
              display: flex;
              flex-direction: column;
            }
            
            .modal-content::-webkit-scrollbar {
              width: 8px;
            }
            .modal-content::-webkit-scrollbar-thumb {
              background: #888; 
              border-radius: 4px;
            }
            
            .close {
              position: absolute;
              top: 10px;
              right: 20px;
              font-size: 30px;
              cursor: pointer;
            }
            
            #modalImages img {
              width: 100%;
              display: none;
            }
            
            #modalImages img.active {
              display: block;
            }
            
            
          /* Slides */
            * {box-sizing:border-box}

            .slideshow-container {
              max-width: 1000px;
              position: relative;
              margin: auto;
            }
            
            .mySlides {
              display: none;
            }
            
            .prev, .next {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              margin-top: -22px;
              padding: 16px;
              color: white;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 0 3px 3px 0;
              user-select: none;
            }
            
            .next {
              right: 0;
              border-radius: 3px 0 0 3px;
            }
            
            .prev:hover, .next:hover {
              background-color: rgba(0,0,0,0.8);
            }
            
            .text {
              color: #444444;
              font-size: 15px;
              padding: 8px 12px;
              position: relative;
              bottom: -5px;
              width: 100%;
              text-align: center;
            }
            
            .numbertext {
              color: #f2f2f2;
              font-size: 12px;
              padding: 8px 12px;
              position: absolute;
              top: 0;
            }
            
            .dot {
              cursor: pointer;
              height: 15px;
              width: 15px;
              margin: 0 2px;
              background-color: #bbb;
              border-radius: 50%;
              display: inline-block;
              transition: background-color 0.6s ease;
            }
            
            .active, .dot:hover {
              background-color: #717171;
            }
            
            .fade {
              animation-name: fade;
              animation-duration: 1.5s;
            }
            
            @keyframes fade {
              from {opacity: .4}
              to {opacity: 1}
            }
            
            .direct-contact-container {
              max-width: 400px;
            }
            
            .copyright {
              font: 200 14px 'Inconsolata', sans-serif;
              color: #555;
              letter-spacing: 1px;
              text-align: center;
            }
            
            hr {
              border-color: rgba(255,255,255,.6);
            }


      /* MEDIA QUERY */

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }
                
                aside {
                    width: 100%;
                }

                aside {
                    width: 100%;
                }
                
                bside {
                    width: 100%;
                }
                
            @media (max-width: 550px) {
              .row {
                grid-template-columns: repeat(2, 1fr);
              }
              .modal-content {
                width: 95%;          /* More screen real estate */
                padding: 10px;
                height: 95%;
                max-height: 95vh;
              }
              #modalVideo iframe {
                max-height: 93vh;
              }
            }
            }