style11.css

:root {
    --offset: 60px;
    --w: 700px;
    --grey: rgb(186, 186, 186);
    --offp: 45px;
    --wh: #fff;
    --hh: 3.4rem; 
    --marg: 5rem;
    --h1: 100px;
    --f2: 1.33rem;
    --f2a: 1.26rem; 
    --col: #ff9d00;
    --dist: 1.5rem;
    --logoh: 2.3rem;
}

.none {
    display: none;
}

.ar {
    font-family: Arial, Helvetica, sans-serif;
    

}

.grey {
    color: var(--grey);
    padding-right: 11px;
}

.grey::after {
    content: "";


}

a{
    color: black;
    text-decoration: none;
}

a:hover{
    color: gray;
}
a:current{
    color: var(--col);
}

.bg{
    background-color: var(--wh);
}

body,
html {
    padding: 0;
    margin: 0 5px;
    font-size: 16px;
    scroll-behavior: smooth;
    background-color: white;
}

:root {
    box-sizing: border-box;
}





header{
  
    width: calc( var(--marg) + 100px);
    display: flex;
    position: fixed;
    top: 0;
    height: auto;
    padding: 5px 0 0;
    
    z-index: 100;
}


main{
padding-top: 3.5rem;
scroll-behavior: smooth;
overflow: scroll;
height: calc(100vh - var(--hh));

}



h1, h2, h3, h4, h5, h6{
    font-weight: normal;
    margin: 0;
}

.logo svg{
height: var(--logoh);
color: var(--col);
}

.logo{
    padding: 0 auto;
    width: var(--marg);
 
}


h1{
    font-size: var(--logoh);

    width: var(--h1);
}

.about{
    width: 100%;
    overflow: auto;
    padding-bottom: 2rem;
    scroll-margin: 4rem;
}

summary{
    width: calc( 6rem + 100px);
    float: left;

}

.bio{
    font-size: 1.65rem;
}

h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--f2a);
}

.cv{
    padding: 4rem 0;
    display: flex;
    flex-wrap: wrap;

}

.col{
    width: 47vw;
    flex-shrink: 0;
    padding: 0 4rem 4rem 0 ;
    box-sizing: border-box;
}


.col h2, .col p {
    padding-left: var(--marg);
    padding-bottom: 1.5rem;
}

ol, ul{
    list-style: none;
    padding: 0;
    margin: 0;
}


.prim>li{ 
    display: flex;
    flex-direction: row;
    padding-bottom: 1rem;
}

.prim div{
    width: var(--marg);
    font-family: Arial, Helvetica, sans-serif;
    
    float: left;
    flex-shrink: 0;
}

.sec{
    float: left;
    width: auto;
}

.sec>li, .ter>li{
    list-style: "— " inside;
}

.ter, .col>p{ 
    padding-left: var(--marg);
}



.numbers{
    width: var(14rem);
   
   
    position: sticky;
  
    float: left;
    height: 100vh;
    overflow: scroll;
}

.num{
  
    display: block;
    position: sticky;
   top: 0;
  
   
background-color: white;

   
}

.numbers, .info, .more, .newsbox{
    top: var(--dist);
}

.newsbox  .info,  .newsbox .more{
    top: 0;
}
.num, .info, .des{
    height: 1.8rem;
    box-sizing: border-box;
    padding-top: 3px;
}

.num, .date, .status{
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--f2a);
}
.title, .des {
    font-size: var(--f2);
}

.title{
    display: none;
}

.contents{
    float: right;
  
  
    width: calc(100% - var(--marg));
    background-color: #fff;

}


.info{
 width: calc(47vw - var(--marg));
 float: left;
position: sticky;

 height: 100vh;
 background-color: white;

}

.title{
width: 50%;
float: left;
}

.date{
    width: 8rem;
    float: left;
}


.more{
    width: calc(100% - (47vw - var(--marg)));
    float: right;

    position: sticky;

    background-color: #fff;
    padding-bottom: 8rem;
}


.des2{
    padding-top: .5rem;
}

.links{
    padding-top: 2rem;
}


.link{
    border-bottom: 1px solid black;
    padding: 3px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    margin: 3px 5px 3px 0;

}
.link:hover{
    color: var(--grey);
    border-bottom: 1px solid var(--grey);
}



.imgs{
    z-index: 110;
    width: calc(100% - (47vw - var(--marg)));
    float: right;
 
    position: relative;
    background-color: #fff;
    overflow: auto;
padding-bottom: 16rem;
}

.img-box{
padding:  0 3rem 4rem;

text-align: center;
}

img{
max-width: 100%;
max-height: calc(100vh  - 10px);

}

.buffer{
    width: 100%;
    height: 2px;
    overflow: auto;
}



.news, .news> *{
   background-color: transparent;
}

.anews{
    color: var(--col);
}
.newsbox{
    position: sticky;
   
    overflow: auto;
    width: 100%;
    margin-bottom: 4rem;
    
}
.newsbox .info{
    height: fit-content;
}


input{
   
 
    opacity: 0;
    cursor: pointer;
   
    width: 0;
}

.checkbox{
    width: var(--marg);
    position: sticky;
    top: 0;
    overflow: auto;
   margin-top: 1rem;
   padding-bottom: 1rem;
    display: block;
   
}

.checkmark{
  border: 2px solid black;
  height: 1rem;
  width: 1rem;
}
.checkmark:hover{
 background-color: var(--grey);
  }

input:checked#toggleproj   ~ div .hide { 
display: none;
      
 }
 input:checked#toggleproj  ~ .checkbox >.checkmark { 
    background-color: var(--col);
          
     }

 input:checked#toggleproj   ~ div .info { 
    height: 1.8rem;
          overflow: clip;
     }
  input:checked#toggleproj   ~ div .more { 
       padding-bottom: 0;
   
         }
         input:checked#toggleproj   ~ div .newsbox { 
          margin-bottom: 0;
          top: 0;
                   
              }
    

     input:checked#toggleproj   ~ div > * { 
       position: inherit;
    
     overflow: visible;
              
         }
         input:checked#toggleproj   ~ .contents  { 
            position: sticky;
            top: var(--dist);
             overflow: scroll;
                   
              }
         input:checked#toggleproj   ~ div.numbers  { 
            position: inherit;
         
          overflow: visible;
                   
              }

         input:checked#toggleproj   ~ .numbers{ 
          height: auto;
                   
              }
 
                 

     input:checked#toggleproj   { 
      z-index: 100;
      
               
          }
    

@media screen and (max-width: 700px) {
 :root {
    --offset: 60px;
    --w: 700px;
    --grey: rgb(160, 160, 160);
    --offp: 45px;
    --wh: #fff;
    --hh: 3.4rem; 
    --marg: 5rem;
    --h1: 100px;
    --f2: 1.33rem;
    --f2a: 1.26rem; 
    --col: rgb(255, 119, 0);
    --dist: 1.5rem;
    --logo-h: 1.8rem;
}

}