@font-face {
    font-family: TT Commons;
    src: url("../font/TTCommons-Light.ttf");
}

@font-face {
    font-family: TT Commons;
    src: url("../font/TTCommons-Regular.ttf");
    font-weight: 500;
}

@font-face {
    font-family: TT Commons;
    src: url("../font/TTCommons-DemiBold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: TT Commons;
    src: url("../font/TTCommons-Black.ttf");
    font-weight: 900;
}

@font-face {
    font-family: Encorpada;
    src: url("../font/Encorpada-Classic-Light.otf");
}

* {
    margin: 0;
    padding: 0;
    font-family: TT Commons;
}

html {
    scroll-behavior: smooth;
}

main {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

menu {
    visibility: hidden;
    position: fixed;
    left: 20px;
    bottom: 20px;
}

nav {
    display: flex;
    flex-direction: column;
}

nav>a {
    text-decoration: none;
    color: black;
    width: 200px;
    text-align: center;
    line-height: 60px;
    height: 60px;
    margin-top: 10px;
    background-color: #ffffff;
    border: solid 3px #ffffff;
}

nav>a:hover {
    background-color: rgba(0, 0, 0, 0);
    font-weight: 900;
    color: white;
}

.intro {
    background-color: #241A18;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    color: white;

}


.intro h1 {
    grid-column: 3/4;
    grid-row: 1/2;
    text-align: right;
    font-size: 200pt;
    font-weight: 900;
    line-height: 150pt;
    margin-right: 50px;
    align-self: end;
    color: #191210;
}

.introdes {
    grid-column: 1/3;
    grid-row: 1/2;
    justify-self: center;
    align-self: center;
    margin-top: -100px;
    margin-left: 100px;
}

.introdes h2 {
    font-size: 60pt;
    line-height: 50pt;
    animation: leftFadeIn 2s;
}

@keyframes leftFadeIn {
    0% {
        opacity: 0;
        margin-left: -100px;
    }

    100% {
        opacity: 1;
        margin-left: 0;
    }
}

.introdes p {
    font-style: italic;
}

.logo_sec {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 3fr;
    justify-content: center;
    align-items: center;
    background-color: #e6e6e6;

}

.logosechead {
    grid-column: 1/3;
    grid-row: 1/2;
    text-align: center;
}

.logosechead h2 {
    font-size: 60pt;
}

.show {
    animation: leftFadeIn 2s;
}

.logochoice1,
.logochoice2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.logochoice1 {
    background-color: white;
    border-left: solid 1px black;
}

.logochoice2 {
    background-color: white;
}

.logo_sec img {
    max-width: 250px;
    max-height: 200px;
}

.moodboard {
    height: 100vh;
    width: 100vw;
    display: none;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(24, 1fr);

}

#mood_board_1 {
    background-color: #0000dd;
}

.color1_1 {
    background-color: #da1f26;
    grid-column: 18/25;
    grid-row: 1/25;
}

.color1_2 {
    background-color: #d6f622;
    grid-row: 2/20;
    grid-column: 6/16;
}

.color1_3 {
    background-color: #222731;
    grid-row: 2/20;
    grid-column: 16/24;
}

.color1_4 {
    background-color: #ff0002;
    grid-row: 4/10;
    grid-column: 8/17;
}

.color1_5 {
    background-color: #7889a1;
    grid-row: 4/10;
    grid-column: 17/25;
}

.img_1 {
    background-image: url("../img/bg6.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    grid-column: 15/22;
    grid-row: 5/19;
}

.design_note_1 {
    color: white;
    grid-column: 1/5;
    grid-row: 3/8;
    padding-left: 20px;
}

h1 {
    font-weight: 700;
    font-size: 32pt;
}

.design_note p {
    margin-bottom: 10px;
}

.color_palette_1 {
    grid-row: 5/10;
    grid-column: 8/14;
    margin-left: 20px;
    display: flex;
}

.color_palette_1 h1 {
    flex: 1;
}

.color_palette_content_1 {
    flex: 5;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(6, 1fr);
    margin-left: 10px;
}

.color_palette_content_1>p {
    padding-top: 8px;
    writing-mode: vertical-rl;
}

.color_palette {
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
    border: solid 1px black;
}

.color_palette_1_1 {
    background-color: #0000dd;
}

.color_palette_1_2 {
    background-color: #da1f26;
}

.color_palette_1_3 {
    background-color: #d6f622;
}

.color_palette_1_4 {
    background-color: #222731;
}

.color_palette_1_5 {
    background-color: #ff0002;
}

.color_palette_1_6 {
    background-color: #7889a1;
}

.exampleImg {
    grid-row: 9/13;
    grid-column: 22/24;
    color: white;
    margin-left: -20px;
}

.typo_1 {
    grid-column: 7/14;
    grid-row: 11/20;
}

.typo_1>h1:nth-child(2) {
    font-size: 26pt;
}

.typo_1 p a {
    text-decoration: none;
    color: #0000dd;
    font-style: italic;
    font-weight: 500;

}

.des {
    font-weight: 500;
    font-style: italic;
    padding-bottom: 10px;

}

#mood_board_2 {
    background-color: #d79922;
}

.color2_1 {
    background-color: #efe2ba;
    grid-column: 16/25;
    grid-row: 1/25;
}

.color2_2 {
    background-color: #009c41;
    grid-row: 2/20;
    grid-column: 6/16;
}

.color2_3 {
    background-color: #4056a1;
    grid-row: 2/20;
    grid-column: 16/24;
}

.color2_4 {
    background-color: #B3E1C6;
    grid-row: 3/15;
    grid-column: 8/16;
}

.color2_5 {
    background-color: #c5cbe3;
    grid-row: 3/15;
    grid-column: 16/23;
}

.img_2 {
    background-image: url("../img/bg3.jpg");
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    grid-column: 8/16;
    grid-row: 4/12;
}

.exampleImg_2 {
    line-height: 70px;
    grid-column: 12/16;
    grid-row: 12/14;
    color: white;
}

.design_note_2 {
    grid-column: 9/13;
    grid-row: 17/25;
}

.color_palette_2 {
    grid-row: 2/10;
    grid-column: 1/10;
    display: flex;
    flex-direction: column;
}

.color_palette_2 h1 {
    flex: 1;
    padding-left: 50px;
    color: white;
}

.color_palette_content_2 {
    flex: 5;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(6, 1fr);
    margin-left: 10px;
}

.color_palette_content_2>p {
    margin-top: -10px;
    writing-mode: vertical-rl;
    color: white;
}

.color_palette {
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
    border: none;
    border-bottom: solid 1px white;
    border-top: solid 1px white;
}

.color_palette_2_1 {
    background-color: #d79922;
    border-left: solid 1px white;
}

.color_palette_2_2 {
    background-color: #efe2ba;
}

.color_palette_2_3 {
    background-color: #009c41;
}

.color_palette_2_4 {
    background-color: #B3E1C6;
}

.color_palette_2_5 {
    background-color: #4056a1;
}

.color_palette_2_6 {
    background-color: #c5cbe3;
    border-right: solid 1px white;
}

.typo_2 {
    margin-top: 25px;
    margin-left: 20px;
    grid-column: 16/22;
    grid-row: 7/20;
}

.typo_2>h1:nth-child(2) {
    font-size: 26pt;
}

.typo_2 p a {
    text-decoration: none;
    color: #4056a1;
    font-style: italic;
    font-weight: 500;

}


#mood_board_3 {
    background-color: #D7BA9A;
}

#mood_board_3 h1,
#mood_board_3 h2 {
    font-family: Encorpada;
}

#mood_board_3 h1 {
    font-size: 24pt;
}

.color3_1 {
    background-color: #899490;
    grid-column: 18/25;
    grid-row: 1/25;
}

.color3_2 {
    background-color: #a48158;
    grid-row: 3/16;
    grid-column: 16/22;
}

.color3_3 {
    background-color: #b2b2b2;
    grid-row: 5/19;
    grid-column: 3/10;
}

.color3_4 {
    background-color: #d2ccac;
    grid-row: 7/21;
    grid-column: 5/12;
}

.color3_5 {
    background-color: #25312F;
    grid-row: 18/22;
    grid-column: 13/19;
}

.img_3 {
    background-image: url("../img/bg4.jpg");
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat;
    grid-column: 15/21;
    grid-row: 4/15;
}

.exampleImg_3 {
    line-height: 70px;
    grid-column: 20/21;
    grid-row: 5/15;
    color: black;
    writing-mode: vertical-rl;
}

.design_note_3 {
    grid-column: 19/24;
    grid-row: 16/25;
    margin: 20px 0px 0px 20px;
}

.color_palette_3 {
    grid-row: 17/22;
    grid-column: 13/19;
    display: flex;
    flex-direction: column;
}

.color_palette_3 h1 {
    flex: 1;
}

.color_palette_content_3 {
    flex: 5;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
}


.color_palette_content_3>p {
    margin-top: 5px;
    color: white;
    text-align: center;
}

.color_pal_3 {
    border-left: 0;
    border-right: 0;
    border-top: solid 1px white;
    border-bottom: solid 1px white;

}

.color_palette_3_1 {
    background-color: #899490;
}

.color_palette_3_2 {
    background-color: #D7BA9A;
}

.color_palette_3_3 {
    background-color: #a48158;
}

.color_palette_3_4 {
    background-color: #b2b2b2;
}

.color_palette_3_5 {
    background-color: #d2ccac;
}

.color_palette_3_6 {
    background-color: #25312F;
}

.typo_h1_3 {
    grid-column: 4/5;
    grid-row: 8/21;
    writing-mode: vertical-rl;
}

.typo_3 {
    margin-left: 20px;
    grid-column: 5/11;
    grid-row: 9/22;
}

.typo_3>h1:nth-child(2) {
    font-size: 26pt;
}

.typo_3 p a {
    text-decoration: none;
    color: #a48158;
    font-style: italic;
    font-weight: 500;

}

.des_3 {
    color: gray;
}

footer {
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

footer p {
    color: white;
}