*{
    margin: 0; padding: 0;
}

html, body{
    background-color: rgb(255,246,229);
}
body{
    padding: 5vw;
    padding-top: 7vw;
}
a, a:visited{
    text-decoration: none;
    color: black;
}



h1,h2,p{
    font-family: "franklin-gothic-urw", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 50vw;
}

    h1{
        font-size: 2.5rem;
        text-align: right;
        margin-bottom: 3.5vw;
    }
    h2,p{
        font-size: 1.2rem;
        margin-bottom: 1.2rem;
    }
    h2{
        text-align: right;
        margin-bottom: 3.5vw;
    }
    .last_p{
        margin-bottom: 3.5vw;
    }



hr{
    height: 2px;
    width: 100vw; margin-left: -5vw;
    margin-top: 5vw; margin-bottom: 5vw;
    background-color: black;
}

.img_container, .link_box, .img_container_small{
    border: 2px black solid; border-radius: 10px;
}
.img_container{
    width: 50vw; height: 80vh;
    margin-bottom: 1vw;
    overflow: hidden;
}
.img_container_small{
    overflow: hidden;
}

    img, video{
        height: 100%; width: 100%;
        object-fit: cover;
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
    }
    video{
        border: 4px solid black; border-radius: 1vw;
        margin-bottom: 1vw;
        background-color: black;
    }
    audio{
        width: 50vw;
    }
    .img_fulldisplay{
        width: 50vw;
        border: 2px solid black; border-radius: 1vw;
        margin-bottom: 1vw;
    }
    .first_image{
        margin-bottom: 5vw;
    }

.link_box, .link_box p, a{
    display: block;
    width: min-content;
    cursor: pointer;
}
.link_box{
    padding: 0.8vw;
    margin-bottom: 8px;
    margin-right: 40vw; margin-left: auto;
    background-color: rgb(255,246,229);
}
    .link_box p{
        margin-bottom: 0;
        white-space: nowrap;
    }
.last_link_box{
    margin-bottom: 3vw;
}




#header{
    background-color: rgb(255,246,229);
    border-bottom: 2px solid black;
    width: 100vw; padding-left: 5vw; padding-right: 5vw;
    display: flex;
    position: fixed; top: 0; left: 0;
}
    #header .link_box{
        margin: 0.5vw;
        min-width: 3vw;
        display: flex; justify-content: center;
        padding-left: 1vw; padding-right: 1vw;
    }
    .header_text{
        margin-top: 0.7vw; margin-bottom: 0.7vw;
        width: 90vw;
    }



.two_column_container{
    display: flex;
    flex-wrap: wrap;
    column-gap: 15vw;
}
    .two_column_container .img_container, .two_column_container p, .two_column_container hr, .img_container_small, .two_column_container .img_fulldisplay{
        width: 30vw;
    }
    .two_column_container .title_box,.two_column_container .title_box h1{
        width: 28vw;
    }
    .two_column_container .img_container, .img_container_small{
        height: 50vh;
    }
    .two_column_container hr{
        margin-left: 0;
    }
    .two_column_container .link_box, .two_column_container .link_box p{
        margin-right: 0; margin-left: auto;
        width: fit-content;
        text-align: right;
    }
    .two_column_container .img_fulldisplay{
        margin-bottom: 1vw;
    }








@media (orientation: portrait){

    html,body{
        overflow-x: hidden;
    }
    body{
        padding-top: 20vw;
    }

    h1,h2,p{
        width: 90vw;
    }
    h1{
        font-size: 2rem;
        margin-bottom: 15vw;
    }
    h2,p{
        font-size: 1rem;
        margin-bottom: 15px;
    }
    h2{
        margin-bottom: 15vw;
    }
    .last_p{
        margin-bottom: 15vw;
    }



    hr{
        height: 1px;
        margin-bottom: 15vw; margin-top: 15vw;
    }

    .img_container, .img_container_small, .link_box, .img_fulldisplay, video,.title_box{
        border: 2px black solid; border-radius: 3vw;
    }
    .img_container, .img_container_small{
        width: 90vw;
        margin-bottom: 3vw;
    }
    .img_container{
        height: 80vh;
    }
    .img_container_small{
        height: 40vh;
    }
    .img_fulldisplay{
        width: 90vw;
        margin-bottom: 3vw;
    }
    .title_box{
        width: 84vw;
        padding: 3vw;
        margin-bottom: 15vw;
    }
        .title_box h1{
            width: 84vw;
        }
    .first_image{
        margin-bottom: 15vw;
    }
    .link_box{
        padding: 3vw;
        margin-bottom: 10px;
        margin-right: 0; margin-left: auto;
    }
    audio{
        width: 90vw;
    }
    
    .last_link_box{
        margin-bottom: 7vw;
    }

    #header{
        border-bottom: 1px black solid;
    }
        #header .link_box{
            margin: 1vw; margin-bottom: 3vw;
            min-width: 10vw;
            padding-left: 3vw; padding-right: 3vw;
            background-color: rgba(0,0,0,0);
        }
        .header_text{
            margin-bottom: 2vw;
        }


    
    .two_column_container{
        display: block;
    }

    .two_column_container h1,.two_column_container p,.two_column_container .img_container, .two_column_container hr, .two_column_container .img_fulldisplay{
        width: 90vw;
    }
    .two_column_container .title_box,.two_column_container .title_box h1{
        width: 84vw;
    }

}