@import url("navbar.css");

@font-face {
    font-family: zen-r;
    src: url(assets/ZenKakuGothicNew-Regular.ttf);
}

@font-face {
    font-family: zen-m;
    src: url(assets/ZenKakuGothicNew-Medium.ttf);
}

body {
    position:relative;
    margin:0px;
    

}

body:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background-image: linear-gradient(#ffffff00, #b3c5ca 80%), 
        url("assets/skyday_rev.jpg");
    background-repeat: no-repeat, no-repeat;
    background-attachment:fixed,fixed;
    background-position: top, top;
    background-origin: border-box, border-box;
    background-size: cover, cover;
    font-family: "zen-r", sans-serif;
    margin: 0px;
    z-index:-9;
}




    

main {
    position: relative;
    top:80px;
    bottom:0px;
    justify-self:center;
    display: grid;
    grid-template-columns: auto minmax(550px,80vw) auto;
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 10px;
    color: #080808;
    z-index: 0;

}

@media (max-width:600px) {
    main{
        grid-template-columns: auto 92vw auto;
    }
}

.conts {
    position:relative;
    grid-column: 2 / -2;
    
    margin: 50px 0px;
    padding: 20px;
    z-index:0;
}

.conts:before {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background-color: #ece6f1ee;
    z-index:-1;
}

main {h1, h2, h3{
    font-weight: normal;
    font-family: zen-m;
    color:black;
}}

main h1{
    border-bottom: 2px dashed black;
}

main h2{
    border-left: 4px solid #9e679e;
    padding-left: 15px;
    margin-top:30px;
    margin-bottom: 20px;
}

main h3{
    position: relative;
    left: 10px;
}

.text-table {
  table-layout: fixed;
  width: 100%;
  margin: 10px auto;
  border-collapse: collapse;
  tr :nth-child(1) {
    width: 100px;
    vertical-align:top;
}
}



main h3:before{
    content:"";
    position: absolute;
    left: -5px;
    bottom: -3px;
    width:50px;
    height: 15px;
    background-color: #874fa84f;
    padding-left:0px;
    z-index:1;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 0.2fr));
    gap: 20px 100px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    margin-bottom: 10px;
    background-color: #f0f0f0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-item ul li {
    font-size: 1rem;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20vw, 400px));
    gap: 50px 50px;
}

.img-container {
    position: relative;
    padding-bottom: 100%; /* 1:1 */
    height: 0;
    background-color: #4f3061;
}

.sample {
    position: absolute;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    border: 2px solid #81539b;
    margin:auto;
    
}
.credits{
    position: relative;
    margin-top:100px;
    padding-bottom:20px;
    text-align:center;
    font-size: 10pt;
}