:root {
    --primary-color: #ffffff;
    --border-color: black;
    --small-border-block: 1.5rem solid var(--border-color);
    --border-block: 3rem solid var(--border-color);
  
}
@media(min-width:2420px) {
    :root{
       --size-big-h2: 7rem;
       --size-medium-h2: 5rem;
        --size-small-h2: 3rem;
        --size-p: 1.5rem; 
    }
    
}
@media(min-width:2100px) and (max-width:2419px) {
    :root{
       --size-big-h2: 6rem;
       --size-medium-h2: 4rem;
        --size-small-h2: 2.5rem;
        --size-p: 1.2rem; 
    }
    
}
@media(min-width:1800px) and (max-width:2099px) {
    :root{
       --size-big-h2: 5rem;
       --size-medium-h2: 3rem;
        --size-small-h2: 2rem;
        --size-p: 1rem; 
    }
    
}
@media((max-width:1799px) or (max-height:900px)) and (min-width:1280px) {
    :root{
       --size-big-h2: 4rem;
       --size-medium-h2: 2rem;
        --size-small-h2: 1.5rem;
        --size-p: 0.8rem; 
    }
    
}
/* Portables */
@media(max-width:1279px) {
    :root{
       --size-big-h2: 2.5rem;
       --size-medium-h2: 1.8rem;
        --size-small-h2: 1.4rem;
        --size-p: 0.8rem;
        --border-block: 1rem solid var(--border-color);
        --small-border-block: 0.5rem solid var(--border-color);

    }
    
}
@font-face {
  font-family: title;
  src: url(Tondu-Beta.ttf); 
}
p, li{
    font-family:'Courier New', Courier, monospace;
    font-size: var(--size-p);
}
ul{
    margin: 0;
}
h2{
  font-family: title; /* use font */
  text-transform: uppercase;
  font-size : var(--size-big-h2);
  margin: 0rem;
}
h2.small{
    font-size : var(--size-small-h2)
}
.cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100vw;
  height: 100vh;
}
@media(max-width:1279px) {
.cv-grid{
    grid-template-columns: 1fr;
}

}
.cv-block {
  display: flex;
  padding-left : 3rem;
  padding-top: 3rem;
  border: var(--border-block);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  background: #ffffff;
  color: var(--border-color);
  box-sizing: border-box;
  font-family: tondu;
  transition: 0.6s;
  overflow: scroll;
}

.cv-block.title{
    text-align: center;
    justify-content: center;
    padding: 2rem;
    background: var(--border-color);
    color: rgb(154, 154, 255);
    overflow: visible;

}

.cv-block.top{
    border-bottom: var(--small-border-block);
}
.cv-block.left{
    border-right: var(--small-border-block);
}
.cv-block.right{
    border-left: var(--small-border-block);
}
.cv-block.bottom{
    border-top: var(--small-border-block);
}
.cv-block:hover {
  background: var(--border-color);
  color: white;
}
.no-a:hover{
    cursor: auto;
    color: rgb(154, 154, 255);
}
.cv-block.wide {
  grid-column: 1 / 3;
}
.cv-block.text{
    padding: 1rem;
    display: grid;
    grid-template-columns: 2fr 3fr;
    cursor: auto;
    /* column-gap: 1rem */
}
.cv-block.black{
    background: var(--border-color);
    cursor: auto;

}
html,
body {
   margin: 0;
   padding: 0;
}
.cv-block.home{
    display: flex;
    padding: 0rem;

}
.cv-block.home.right{
    justify-content: right;
}
.cv-block.home.left{
    justify-content: left;
}
.cv-block.home > h2{
    font-size: var(--size-medium-h2);
    line-height: 2rem;
    align-self: flex-end;
}
p{
    margin:0;
}
.information{
    align-self: flex-end;
    text-align: end;
}
/* INDEX FILE */
.index-left-grid{
    display: grid;
   grid-template-rows: 20vh 80vh;
   width: 100%;
   height: 100%;
}
.index-right-grid{
    display: grid;
  grid-template-columns: 3fr 2fr;
   grid-template-rows: 30vh 30vh 40vh;
   width: 100%;
   height: 100%;
}

/* EXPERIENCE FILE */
.experience-left-grid{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 19vh 27vh 26vh 28vh;
    width: 100%;
    height: 100%;
}
.experience-right-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 34vh 20vh 18vh 28vh;
    width: 100%;
    height: 100%;
}

/* PROJECTS FILE */
.projects-left-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 19vh 20vh 30vh 31vh;
    width: 100%;
    height: 100%;
}
.projects-right-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 19vh 20vh 34vh 27vh;
    width: 100%;
    height: 100%;
}

/* ABOuT-ME FILE */
.me-left-grid{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 19vh 60vh 21vh;
    width: 100%;
    height: 100%;
}
.me-right-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50vh 14vh 36vh;
    width: 100%;
    height: 100%;
}

/* SKILLS FILE */
.skills-left-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 17vh 23vh 18vh 18vh 24vh;
    width: 100%;
    height: 100%;
}
.skills-right-grid{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows:  17vh 27vh 18vh 38vh;
    width: 100%;
    height: 100%;
}
@media(max-width:1279px) {

.cv-block{
    padding-left : 1rem;
    padding-top: 2rem;
}
.cv-block.text{
    display: block;
}

.cv-block.text > h2{
    margin-bottom:1rem;
}
}