.nav { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column; gap: 6vh; } .icon { display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; cursor: pointer; } @media (max-width: 600px) { .nav { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: row; gap: 2vh; margin-top: 10vh } } /*Projects*/ .window{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column; gap: 4vh; } .folder { background-color: rgba(56, 56, 56, 0.7); width: 70%; height: 70%; border-radius: 2vh; display: flex; } .navFolder { height: 100%; width: 25%; } .buttonContainer { padding: 2vh; display: flex; gap: 0.7vh; height: auto; width: 100%; } .ball { border-radius: 50%; height: 1.5vh; width: 1.5vh; } .folderContent { background-color: #231B2C; width: 100%; border-left: solid black 2px; border-top-right-radius: 2vh; border-bottom-right-radius: 2vh; display: flex; justify-content: center; align-items: center; } .folderContent a { color: rgb(230, 230, 230); } @media (max-width: 600px) { .folder { width: 100%; height: 70%; } } /*Info*/ .iwindow{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column; gap: 4vh; } .icontent { background-color: #231b2cf1; width: 30%; height: 70%; border-radius: 2vh; display: flex; flex-direction: column; } .info { width: 100%; height: 100%; display: flex; align-items: center; margin-top: 1vh; flex-direction: column; } .info h1 { color: rgb(230, 230, 230); margin-bottom:0; } .info a { color: rgb(148, 148, 148); } .info b { color: rgb(230, 230, 230); } .fullInfo { width: 100%; margin-top: 2vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.1vh; } .infoBoxes { display: flex; flex-direction: row; width: 80%; gap: 2vh; } .infoBoxes a { text-align: left; flex: 1; font-size: 1.6vh; } .infoBoxes b { text-align: right; flex: 1; } .infoBtn { margin-top: 2vh; background-color: #a0a0a0e3; color: white; outline: none; border: none; height: 2vh; width: 10vh; font-size: 1.4vh; border-radius: 0.5vh; } @media (max-width: 1300px) { .icontent{ margin-top: 5vh; width: 100%; height: 80%; } } /*Contact*/ .cwindow { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column; gap: 4vh; } .content { background-color: rgba(56, 56, 56, 0.7); width: 70%; height: 70%; border-radius: 2vh; display: flex; flex-direction: column; } .cbuttonContainer { padding: 3vh 2vh; display: flex; align-items: center; gap: 0.7vh; background-color: rgba(40, 39, 41, 0.6); border-top-left-radius: 2vh; border-top-right-radius: 2vh; } .mContent { width: 100%; height: 100%; display: flex; justify-content: center; } .form { width: 90%; justify-content: center; display: flex; } .form input{ width: 99%; background-color: transparent; border: none; border-bottom: solid rgba(40, 39, 41, 0.6) 2px; font-size: 1.6vh; padding: 1vh 0; color: white; } .form input::placeholder{ color: rgb(211, 211, 211) } .form input:focus { outline: none; } .form textarea{ width: 99%; background-color: transparent; border: none; color: white; font-size: 1.6vh; padding: 1vh 0; margin-top: 1vh; height: 30vh; } .form textarea:focus { border: solid rgba(40, 39, 41, 0.6) 1px; outline: none; } .form span{ border-bottom: solid rgba(40, 39, 41, 0.6) 2px; font-size: 1.6vh; padding-right: 2vh; color: gray; padding-top: 1vh; padding-bottom: 1vh; } .icon { transition: opacity 0.3s ease; } @media (max-width: 600px) { .content { width: 100%; } }