/* -- MISC -- */
:root {
    --main-bg: rgb(255, 255, 255);
    --main-text: #000000;
    --gray-text: #5e5e5e;
    --light-gray-text: #979797;
    --white-text: #ffffff;

}

* { /* Page reset to default, always use. */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  
a { /* Adjust links also known as anchors. */
  color: var(--main-text);
  text-decoration: none;
  display: block;
  
}
  
body { /* Adjusts CSS for all of the body. */
  background-color: var(--main-bg);
  color: var(--main-text);
  font-family: 'Inter', sans-serif;
  
}

input { /* Resets input boxes CSS. */
  border-style: none;
  outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* LEFT SIDE OF THE PAGE */
.full-left-intro-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: default;
    width: 25vw;
}

.intro-header {
    font-weight: 700;
    font-size: 100px;
    letter-spacing: -4px;
    margin-bottom: 12vh;
    margin-left: -0.1vw;
    line-height: 125%;
}

.intro-container {
    color: var(--gray-text);
    font-size: 26px;
    margin-top: -10vh;
    margin-bottom: 5vh;
    line-height: 60%;
}

.intro-container p {
    font-weight: 300;
}

.intro-container i {
    color: #000000;
}

.intro1, .intro2 {
    margin-top: 2vh;
}

.grad-but {
    margin-top: -3px;
    color: #ffffff;
    width: 120px;
    height: 50px;
    background: linear-gradient(-85deg, #FE5E54, #FCD200, #06C1FF, #2D9E64);
    background-size: 500%;
    animation: gradient 15s ease infinite;
    border-radius: 10px;
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.grad-but p {
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

/* RIGHT SIDE OF THE PAGE */
.right-modules-container {
    margin-left: 280px;
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    grid-template-rows: 200px 200px 100px;
    gap: 40px;
    grid-template-areas: 
        "linkedin github photomodule"
        "twitter instagram photomodule"
        "notemodule notemodule notemodule";
}

/* LINKEDIN MODULE 1 */

.module-container-in {
    grid-area: linkedin;
    border-radius: 25px;
    height: 200px;
    width: 200px;
    border: 1px;
    border-color: rgba(0,0,0,.08);
    border-style: solid;
    background-color: #0077b513;
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transition: ease-out 0.1s;
}

.module-container-in:hover {
    background-color: #f9f9f9;
    transition: ease-out 0.1s;
}

.module-container-in:active {
    background-color: #eeeeee;
    transform: scale(0.98);
    box-shadow: 0 0 0 0px;
    transition: ease-out 0.1s;
}

.module1 img {
    width: 32%;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    height: 100%;
}

.module1 p {
    margin-top: 7px;
    color: var(--main-text);
    font-size: 15px;
}

.module1 .usertag {
    margin-top: -1px;
    font-size: 13px;
    color: var(--light-gray-text);
}

.follow-button-in {
    align-items: center;
    justify-content: center;
    display: flex;
    color: var(--white-text);
    font-weight: 700;
    height: 32px;
    width: 70%;
    font-size: 14px;
    background: #0077b5;
    border-radius: 20px;
    margin-top: 15px;
}

.follow-button-in:hover {
    background: #00659b;
}

/* GITHUB MODULE 2 */

.module-container-gh {
    grid-area: github;
    border-radius: 25px;
    height: 200px;
    width: 200px;
    border: 1px;
    border-color: rgba(0,0,0,.08);
    border-style: solid;
    background-color: #ffffff;
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transition: ease-out 0.1s;
}

.module-container-gh:hover {
    background-color: #f9f9f9;
    transition: ease-out 0.1s;
}

.module-container-gh:active {
    background-color: #eeeeee;
    transform: scale(0.98);
    transition: ease-out 0.1s;
    box-shadow: 0 0 0 0px;
}

.module2 img {
    width: 32%;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    height: 100%;
}

.module2 p {
    margin-top: 7px;
    color: var(--main-text);
    font-size: 15px;
}

.module2 .usertag {
    margin-top: -1px;
    font-size: 13px;
    color: var(--light-gray-text);
}

.follow-button-gh {
    align-items: center;
    justify-content: center;
    display: flex;
    color: var(--white-text);
    font-weight: 700;
    height: 32px;
    width: 70%;
    font-size: 14px;
    background: #000000;
    border-radius: 20px;
    margin-top: 15px;
}

.follow-button-gh:hover {
    background: #000000d5;
}

/* IMAGE DISPLAY MODULE 3 */

.module3 {
    grid-area: photomodule;
    display: flex;
}

.module3 img {
    height: 440px;
    width: 440px;
    border-radius: 20px;
    background: #000000;
    object-fit: cover;
}

.module3-note {
    position: absolute;
    width: max-content;
    border-radius: 5px;
    font-size: 15px;
    margin-top: 395px;
    margin-left: 18px;
    padding: 5px 10px 5px 10px;
    background-color: #f5f5f5;
}

/* TWITTER MODULE 4 */

.module-container-twt {
    grid-area: twitter;
    border-radius: 25px;
    height: 200px;
    width: 200px;
    border: 1px;
    border-color: rgba(0,0,0,.08);
    border-style: solid;
    background-color: #55acee10;
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transition: ease-out 0.1s;
}

.module-container-twt:hover {
    background-color: #f9f9f9;
    transition: ease-out 0.1s;
}

.module-container-twt:active {
    background-color: #eeeeee;
    transform: scale(0.98);
    transition: ease-out 0.1s;
    box-shadow: 0 0 0 0px;
}


.module4 img {
    width: 32%;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    height: 100%;
}

.module4 p {
    margin-top: 7px;
    color: var(--main-text);
    font-size: 15px;
}

.module4 .usertag {
    margin-top: -1px;
    font-size: 13px;
    color: var(--light-gray-text);
}

.follow-button-twt {
    align-items: center;
    justify-content: center;
    display: flex;
    color: var(--white-text);
    font-weight: 700;
    height: 32px;
    width: 70%;
    font-size: 14px;
    background: #55ACEE;
    border-radius: 20px;
    margin-top: 15px;
}

.follow-button-twt:hover {
    background: #4698D7;
}

/* INSTAGRAM MODULE 5 */

.module-container-ig {
    grid-area: instagram;
    border-radius: 25px;
    height: 200px;
    width: 200px;
    border: 1px;
    border-color: rgba(0,0,0,.08);
    border-style: solid;
    background-color: #e1306b10;
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transition: ease-out 0.1s;
}

.module-container-ig:hover {
    background-color: #f9f9f9;
    transition: ease-out 0.1s;
}

.module-container-ig:active {
    background-color: #eeeeee;
    transform: scale(0.98);
    transition: ease-out 0.1s;
    box-shadow: 0 0 0 0px;
}

.module5 img {
    width: 32%;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    height: 100%;
}

.module5 p {
    margin-top: 7px;
    color: var(--main-text);
    font-size: 15px;
}

.module5 .usertag {
    margin-top: -1px;
    font-size: 13px;
    color: var(--light-gray-text);
}

.follow-button-ig {
    align-items: center;
    justify-content: center;
    display: flex;
    color: var(--white-text);
    font-weight: 700;
    height: 32px;
    width: 70%;
    font-size: 14px;
    background: #E1306C;
    border-radius: 20px;
    margin-top: 15px;
}

.follow-button-ig:hover {
    background: #c7275d;
}

/* NOTEPAD MODULE 6 */

.module6 {
    grid-area: notemodule;
    display: flex;
    align-items: center;
    width: 920px;
    height: 50px;
    border-radius: 25px;
    border: 1px;
    border-color: rgba(0,0,0,.08);
    border-style: solid;
    background-color: #ffffff;
    box-shadow: 0px 3px 5px 0.5px rgba(0, 0, 0, 0.05);
    padding: 30px;
}

.container {
    height: 100vh;
    width: 100vw;
    padding: 120px 120px 0px 120px;
    display: grid;
    grid-template-areas: "full-left-intro-container right-modules-container"
}
  
.flex {
    display: flex;
}

@media (max-width: 1500px) {
    .intro-header {
        font-weight: 700;
        font-size: 90px;
        letter-spacing: -4px;
        margin-bottom: 12vh;
        margin-left: -0.1vw;
        line-height: 125%;
    }

    .full-left-intro-container {
        width: 40vw;
    }

    .intro-container {
        font-size: 23px;
    }

    .right-modules-container {
        margin-left: -10px;
        display: grid;
        grid-template-columns: 1fr 1fr 3fr;
        grid-template-rows: 200px 200px 100px;
        gap: 20px;
        grid-template-areas:
            "linkedin github photomodule"
            "twitter instagram photomodule"
            "notemodule notemodule notemodule";
    }

    .module3 img {
        height: 420px;
        width: 210px;
    }

    .module3-note {
        position: absolute;
        width: max-content;
        border-radius: 5px;
        font-size: 15px;
        margin-top: 379px;
        margin-left: 16px;
        padding: 5px 10px 5px 10px;
        background-color: #f5f5f5;
    }

    /* NOTEPAD MODULE 6 */

    .module6 {
    visibility: hidden;
    }

    .container {
        height: 100vh;
        width: 100vw;
        padding: 120px 120px 0px 120px;
        display: grid;
        grid-template-areas: "full-left-intro-container right-modules-container"
    }
}


@media (max-width: 1024px) {

}

@media (max-width: 768px) {

}

@media (max-width: 360px) {

}